source code • demo

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.