Classic Arcade Game with JS
My latest project in my Front End Web Developer Nanodegree at Udacity is to code a classic arcade game based on the game Frogger.
The point of the game is to get your character from the grass over the road and into the water. The challenge is to avoid the bugs that travel on the road. If a bug is touched, the character is reset back at the beginning. Upon reaching the water, the user is also reset back to the beginning.
CLICK HERE if you want to try the game out yourself.
The game engine and art assets were already provided through the Udacity exerciser. What I have to write is the JavaScript. In the following video, I explain what I had to code in detail:
Below is the class Enemy update function that determines that all speeds for the enemy are multiplied by dt (delta-time) which allows all computers to have the same speed. The first ‘if’ statement make the bugs reappear on the border with a randomized speed of (100 + random number) * 222. The second ‘if’ statement is the collision function, if the player touches the bug that is 80 by 60, the player is automatically sent back to the beginning.
Below is the JavaScript for the Player handleInput function that moves the player left, right, up and down with the arrow keys. For first 4 ‘if’ statements, for each assigned key, the player moves by 102 on the x axis and 83 of the y axis. These measurements allow the player to jump from one tile to the other.
In the final ‘if’ statement, once the player has reached the water, there is a short delay before the player is teleported back to the starting location.
This Frogger like game was an interesting project to code and to be able to add arrow keys into the playing field. The next project that I will work on will be testing.
