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 HTMLcanvas is made. Its 2d context is selected by JavaScript.
• TheGame class is created and a new instance is instantiated.
• Thestart method is called on theGame instance.
• AgameLoop function is created and called.gameLoop usesrequestAnimationFrame recursively to clear, update, and draw on the game screen every frame.
• ThePlayer class object moves by changing the pixels of its position. To move diagonally, the x and y position are both updated.
• TheInputHandler class listens for akeydown event, and calls the appropriate player movement function based on the key that was pressed.InputHandler also listens for akeyup event, and will call the stop function on the player object when a key is released.
• TheEnemy 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 tox = 0 andy = 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 aclick of an account form's submit button.
• The username provided by the user is sent to the Ruby on Rails backend via afetch 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.