It took some time, but Riley Robot in a Space Race is now playable on the Riley Robot website! Now that the game is officially published, we don’t have to explain what the game consists of because you can play it yourself (http://rileyrobot.akfirstrobotics.org/play/)! However, we can still explain how the game works.
Here is how the game looks:
There are three parts to programming the Riley Game: HTML, CSS, and Javascript.
HTML is essential to ALL websites in the entirety of the internet. It is basically a “frame” of the website and it is used to create documents, paragraphs, and images to the website. In our case, it was used to make the sentence at the top and the left, the displayed items, and the actual game on the right (but not the contents).
HTML that is used to display the items and the descriptions:
CSS is basically a way to make the website look nicer. In our game, it wasn’t exceptionally used since it was mainly programmed in Javascript, but it was still used for placing the different elements on the screen, the blue and orange borders, and some formatting such as font size.
CSS that is used to load the custom font and setting the size and position of the canvas (game):
Finally and most importantly, Javascript is the programming language that is used to create the actual game itself. Let’s take a more in-depth look at our Javascript code…
Here is what is known as the game loop, an essential part to the game:
Although it looks like nonsense at first glance, this piece of code is looping multiple times in a single second (30 or 60 FPS for most people) while the game is running. In each loop, the previous canvas is cleared so all the images that were previously on the canvas are gone. Then, the positions, size, angle, etc. of the sprites (the images in the game) are updated. Finally, the sprites are shown on the canvas screen again at their desired positions, so it creates the illusion that they are moving. This is essentially what is going on inside the game.
Our next goal in developing the Riley Game is to make the game playable on mobile devices. We will continue to update the Riley Game to make the game even more fun to play as well as being accessible to more people. But for the time being, enjoy our first version of Riley Robot in a Space Race!