My Flatiron School JavaScript Project 
Tags: javascript, html, css, rails
Published: 2020-09-16 22:24:14

# [source code](https://github.com/colerau/the-second-hardest-game) • [demo](https://www.youtube.com/watch?v=WrzEvacPbyU)

# Project Description

I made an in-browser game using JavaScript, HTML, and CSS (which comprise the frontend); and a Ruby on Rails JSON API (the backend). The frontend uses the backend to alter elements on the DOM. My frontend code utilizes Object-Orientation, and the backend code is organized using REST and the MVC pattern.

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.  

# How the game works

* An HTML `canvas` is made. Its 2d context is selected by JavaScript. 
* The `Game` class is created and a new instance is instantiated.
* The `start` method is called on the `Game` instance.
* A `gameLoop` function is created and called. `gameLoop` uses `requestAnimationFrame` recursively to clear, update, and draw on the game screen every frame.
* The `Player` class object moves by changing the pixels of its position. To move diagonally, the x and y position are both updated. 
* The `InputHandler` class listens for a `keydown` event, and calls the appropriate player movement function based on the key that was pressed. `InputHandler` also listens for a `keyup` event, and will call the stop function on the player object when a key is released.
* The `Enemy` class 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 = 0` and `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.

# How signing up and logging in works

* JavaScript Event listeners wait for a `click` of an account form's submit button. 
* The username provided by the user is sent to the Ruby on Rails backend via a `fetch` request.
* 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.