On this topic: | | | | Part 5 | Part 1 Part 2 Part 3 Part 4 Part 6 I believe it’s high time we attempted to build a game with the engine we have so far; wouldn’t you agree? We’ll be making Asteroids, which first made its debut in November 1979; released by Atari Inc. There are so many ways we could implement the game: we could use sprite sheets, as we do support them now we could use code to draw the game elements we can even add sounds as the class supports this AssetsLoader I believe there’s more learning value in trying to draw the game elements using , so things like: the player, bullets, asteroid and star fields will all be individual classes. JavaScript We don’t have fancy things like collision yet, so the game will be pretty dull at first, but don’t worry… collision is definitely on the to-do-list. We’ll start with the player… we’ll need some sort of ship, that moves according to the we previously implemented. The canvas cartesian coordinate system begins with x = 0 and y = 0 at the top-left corner, so anything we draw is relative to that; we want this ship: VerletModel The instructions necessary to draw this are: point A then points B, C, D and back to A. The line from D to A is optional, as we could simply call . We’ll reuse points B, C and D, with some offsets, to create the ship thruster. moveTo() lineTo() closePath() We could create a utility method for drawing. It would take two parameters: a set of and a set of for each action. This method should be part of the class as anything that’s drawn, extends it. actions coordinates DisplayObject We’re only using and for now, so that’s all our engine will be instructed to use: moveTo() lineTo() engine/ui/DisplayObject.js The method can be used like this: draw() // normal approach// moveTo(10, 10)// lineTo(10, 20)// lineTo(20, 20) // draw method approachdraw([0, 1, 1], [[10, 10], [10, 20], [20, 20]]); You could argue this method does more harm than good and without proper I admit, it can be confusing… but it’s a helper method, we don’t have to use it. For the sake of clarity, I won’t be using it in these posts. documentation Our ship needs to rotate around its center point so that fact has to be taken into account when we calculate the coordinates needed to draw it. asteroids/objects/Player.js As you can see, our class is both a view and a controller. You can control the ship using the arrow keys or (W, A, D), and the SPACE key to play a shooting sound (although we’re don’t have bullets yet). We’re missing the … let’s add that as well: Player PlayerModel asteroids/models/PlayerModel.js This one is similar to what we’ve implemented in our previous examples, but with a few extra features. The update function of the also treats rotation and adds a speed trap which slows down the ship if the thrusters are off. We could add all of these features directly into the and just enable them if/when we need them, but this is fine for now. PlayerModel VerletModel The next thing we could do is create a class. This would draw some indicators of all the objects rendered on the scene, like the player and asteroids. Map It’s basically an in-game map and it will take two parameters: the marker (indicator) size and the map scale factor. The latter will represent the percentage of the map size, relative to the scene size. The class looks like this: Map asteroids/objects/Map.js The method will resize the marker when it gets close to the outer edges of the map. This is to prevent it from overflowing the container size. getSize() Map Let’s also add in a for good measure; it should generate: StarField a dynamic number of stars it would be nice to automatically generate 3 types of star sizes (large, medium, small) to emulate some sort of depth; we’ll also change their colors from bright white to dark gray. it should move the stars relative to the PlayerModel and star size, creating a parallax effect where closer stars move faster than stars further away asteroids/objects/StarField.js You’ll notice that we’re calling in the method. That’s to make sure that all of the stars that we added as children in the method, are rendered. Alternatively we could write our own method that does this, but let’s use the engine :D! super.update() update() generateStars() render() The parallax effect comes into play on lines 62 & 63 where we’re calculating the x and y positions of each star based on the model velocity and star scale. We’re also wrapping the stars to the scene, so it feels like we’re flying through a never ending field. Changing the star color based on its size also adds a nice touch to the overall effect. You’ll also notice we’re using a class in there. That’s something new and it’s part of the engine. It draws a circle of a specified radius and color: Particle engine/ui/Particle.js Let’s put everything together and see how it works: asteroids/index.js The Demo (no sounds in free codepen account): Source code: _game-physx - A small utility for JavaScript game making_github.com raduGaspar/game-physx Next time we’ll learn how to generate random asteroids, so that all of the rocks look a bit different, add them to the map for tracking and bullet generation logic.
