You made the first game using just one game object—the tile. Next, create a game with multiple game objects put together.
- [Voiceover] Hi there. Welcome back to the video. In the last section, we had completed the Count game, and pushed it onto the web. In this section, we will plan the next game that we are going to make. It is called Rush. It is a platformer game. The hero in it runs on platforms. The player clicks on the screen to make the hero jump over obstacles. We create the foundation, GameObject classes, and a world that contains the platform and the hero.
In the first video of this section, we will kickstart the game development. After five sections of building the game, we will have a platform game with a hero falling under gravity, and jumping between platforms. We will have a glimpse of how the game works. Then, we'll initialize the project folder and create a starting point in the game. We will also copy some foundation code from our last game project, the Count game. This is the gameplay.
The hero runs on the platforms. There are coins for the player to collect. There are also obstacles for the player to jump and avoid. There is even a gap between platforms. The player needs to jump over it. Otherwise, the game will be over. First, we create the project structure. It is, in fact, like the Count game. We have a project folder named Rush. There is an index.html file as the entry point of the game.
There is also a scripts folder. Inside, we have a game-es6.js file. We can also define a CSS file here, inside a styles folder. We had created some foundation code in the last game. We can reuse it here. Open the project folder in code editor. In the index.html file, we copy the html code from the last game and paste it here. We change the title of the page to Rush.
If you have skipped the Count game, remember that I explained the setup code in Section 1. You can also find the source code in the code bundle. Moreover, I have extracted common code for all my CreateJS game projects into the following url. In this game, we will make the game dimensions 480 pixels wide, and 320 pixels high. Next we open the game-es6.js file. We copy the Game class from the Count game, but, we only keep the essential setup code.
The constructor is basically the same. We have removed the new GameData line of code because we don't have the GameData class in this game. We've also deleted the generateMultipleBoxes and handleClick methods, because they are Count game-specific code. But we still have the version method to indicate the game version. We delete all the code inside the restartGame method. This method will contain the reset code for our Rush game objects.
We do the same to loadSound method. We keep the method, but remove the code inside. Later, if we need to load sound, we know that there is a method designed for that logic. We keep the retinalize method. Actually, this is the method that we need in almost every CreateJS game. At last, we create the Game instance to kickstart everything. We can test the code in Chrome Canary by running the index.html file. The page is a blank page, but there shouldn't be any errors in the developer console.
We started a new game project where we reused what we had learned from the Count game. Specifically, the canvas and the CreateJS setup code. In the next video, we will create the Rush game's graphics.
Note: This course was created by Packt Publishing. We are pleased to host this training in our library.
- Planning your first game
- Setting up your file structure
- Setting up HTML and JS
- Drawing basic shapes with EaselJS
- Implementing your first game object
- Creating the core game logic
- Adding graphics to your game
- Planning your second game
- Handling obstacle and hero collisions
- Making the hero run and jump
- Adding graphics and animations
- Polishing your final game
Skill Level Beginner
Q: Should the exercise files be run from a server or locally?
A: Please run the exercise files from a server as directed. The files will not work properly if run locally.