The goal of the game is to move the player (using the keyboard as a controller) to the goal. Along the way, the user must avoid the red squares, which briskly bounce up and down on the screen. The player's position will reset should a collision occur with a red square.
The game has collision detection between the player object and the enemy objects. Collision detection is also incorporated when the player and enemies hit the game screen edges, and when the player touches the goal.
- An HTML
Gameclass is created and a new instance is instantiated.
startmethod is called on the
gameLoopfunction is created and called.
requestAnimationFramerecursively to clear, update, and draw on the game screen every frame.
Playerclass object moves by changing the pixels of its position. To move diagonally, the x and y position are both updated.
InputHandlerclass listens for a
keydownevent, and calls the appropriate player movement function based on the key that was pressed.
InputHandleralso listens for a
keyupevent, and will call the stop function on the player object when a key is released.
Enemyclass changes its y-position every frame to move up and down. When it hits the edges of the game screen, its position is multiplied by -1 to cause it to change direction.
- When the player bumps into an enemy, the player's position is set to
x = 0and
y = 0.
- When the player makes contact with the goal, an alert to the user is displayed telling them they won the game. The number of levels completed is incremented by 1, and the player's position is reset.
clickof an account form's submit button.
- The username provided by the user is sent to the Ruby on Rails backend via a
- If the user wants to log in, Rails attempts to match the username string with a username in its SQLite database. If the user wants to sign up, Rails will create a user object based on the username it receives. However, if the username is blank or if it already exists, Rails will not create a new user object and the end-user will not be able to sign up.
- In the frontend, the DOM elements for the username and number of levels completed are updated based on the JSON that Rails gives back. The comment feature of the application also uses this asynchronous AJAX technique to render comments and to send a post request to the backend if a logged-in user wants to compose a new comment.