public/subjects/make-your-game

make-your-game

As times passes and technology evolves, the human brain has been requesting more and more stimuli to keep the brain occupied. Boredom happens whenever people don't receive enough of these stimuli. And you are not receiving enough of it, so you decide to do your own game. And you also decide to just use JavaScript as a challenge.

Your game will be for single player only and you will have to create your own engine and tools so that the game works. And as you try to search all sort of information you start to remember all those 60fps memes.

Objectives

Here are some of the features you want to implement on your game:

• Run the game at least at 60fps at all time
• You must not have frame drops!
• Proper use of RequestAnimationFrame
• It is very hard to predict performances in JS. So measure performances, to know if your code is fast. This will be tested
• Pause menu, that includes:
  • Continue
  • Restart
• A score board that must present the following tasks:
  • Countdown clock / Timer: That will indicate the amount of time the player has until the game ends or the time that the game took to finish
  • Score: That will keep a score count of the amount of XP/points that the player got while playing
  • Lives: That indicates the amount of lives that the player has left

You must not use frameworks or canvas, the game must be implemented using just plain JS/DOM and HTML

Instructions

Animation must have consistent motion, so in order to have a smooth animation (without interruptions or better named: jank animation) you must achieve a special number, 60fps. You can see more about performance here

In order to play the game you must use only the keyboard. The usage of keyboard must be smooth, in other words you must not spam the key to move the player. But instead you must, for example maintain the key pressed and the player must continue to do the proper action. If the key is released the player should stop doing the action.

Basically every motion triggered by a key must not jank or stutter.

For the pause menu you must be able to pause, restart and continue the game whenever you want to do so. The frames should not drop if paused.

Pre-Approved List

Your game will have to respect the genre of one of these games listed below. In other words, the main goal of the game has to be similar to one of these:

• Bomberman
• Flipper/ Pinball
• Space Invaders
• Donkey Kong
• Brick Breaker/ Arkanoid
• Pac-Man
• Super Mario
• Tetris
• Duck Hunt

Dev Tools

We highly advise you to use Developer Tools present in every browser (usually with the key combination: Ctrl+Shift+I or in the Tools tab).

Below we briefly explain the tools that will help the most for this project:

• Page Inspector: You can view and edit page content and layout.
• Web Console: You can see your console.logs and interact with the page using JavaScript.
• Performance Tool: You can analyze your site's general responsiveness, performance, Javascript and layout performance.

The one tool that most will help you is the Performance Tool. There you can record a sample of your actions on the site and analyze the FPS, check for frame drops, how many time is your functions taking to execute, amongst other useful stuff.

In the developer tools you can also find a Paint Flashing option that will highlight every paint that happens in your page as you perform actions in it.

This project will help you learn about:

• requestAnimationFrame
• Event loop
• FPS
• DOM
• Jank/stutter animation
• Transform/ opacity
• Tasks
  • JavaScript
  • Styles
  • Layout
  • Painting
  • Compositing
• Developer Tools
  • Firefox
  • Chrome