Building the spaceship Catching up Hi everybody! This article is the second part of my tutorial to make a little game with Javascript. You can read Part 1 here . The full source code of this tutorial can be found here . Creating the spaceship Now that the background is done, we can finally start setting up our spaceship! Let’s and as a script (same as ). create a Player.js file add it to index.html CloudManager Here is a (beautiful) spaceship designed in a few minutes that you can and in the loader function of : add to your assets folder main.js Spaceship Basically, we want this ship to . We also (position point of the object) to be , and because its maybe too huge, we can rescale it: appear near the left border of the screen need its anchor in the center of the sprite Of course, we have to file, so it can be instantiated in the game: declare this object as a global variable of the main.js … and (just after ): in the init function of the same file CloudManager Now you should see the glittering spaceship cruising. However if you wait for a few seconds, you should get some troubles: The spaceship is flying behind the clouds! Yeah, because in fact, Clouds are spawning after the spaceship has been instantiated, so we need the cloud manager generating clouds in the bottom of the objects list. For this, we just have to of the class: the last object created is moving behind the previous one. update a bit the addChild CloudManager allows us to pass a second parameter, which is . The furthest it is, the furthest the sprite will be on the screen. addChildAt the position in the stage’s objects list “0” means the , so each time we create a new cloud, we , ensuring that first index in the objects list add it at the first position of the list it will appear behind the spaceship. Now that it’s done, we can start the spaceship controls. Moving the spaceship Let’s get back to class and : Player.js add some lines in the constructor This allows the game to catch (when a key is pressed and released). When one of this event occurs, the method at the end of each line is executed. keyboard events Note : By adding “.bind(this)” at the end of the function, we pass the context of the object into it, which means we can still access its properties by calling “this”. If we don’t write it this way, the callback function is not able to determine which object we are working with. Just remember that if one of your callback function is getting an “undefined this” error, you might have to bind your object like this. Let’s (we will fill these ones in a little while): define 2 empty methods in the same class We also need 3 variables to move the spaceship: its (X & Y) and the (all of them in the constructor): horizontal and vertical directions speed This object is basically an association of key codes and direction values: 37 is the , to move our spaceship to the left we need to decrease its X position. left arrow key 38 is the , to move our spaceship to the top we need to decrease its Y position. up arrow key 39 is the , to move our spaceship to the right we need to increase its X position. right arrow key 40 is the , to move our spaceship to the bottom we need to increase its Y position. down arrow key Every time a key is pressed, we retrieve the corresponding direction: It’s looking pretty weird but let’s explain that: . If it’s 38 or 40, you can guess what’s happening (yeah it’s actually the vertical direction). That’s all! if the key code is 37 or 39 (which means left or right arrow key), then we just set the X direction Let’s ( ): add the update method of the player like the Cloud Manager, remember? … and of course, of ! don’t forget to call it in the loop function main.js If you save and reload the game, it (should) work well, except that the ship . It’s obvious because we didn’t complete the function, which is . So this way we can stop it by setting either or to 0. keeps moving when we release the direction keys onKeyUp catching the key that has just been released directionX directionY There is just one little problem there: what’s going on if we set the direction to 0 because we released the left key, but the right key is still pressed? Yeah, the spaceship is going to stop, and , which is not very logic. we would have to press the right key again to move So why not check if the right key or left key is still pressed, so we can reset the direction to this previous pressed key? That’s what we are going to do. And for this we need to store the state of each key in a boolean, pressed or released ( or ). Let’s put all these states in an object variable in the constructor: true false Player If a key (identified by its own code) is pressed, then , and if it’s released we set it to . Easy, right? we just change its state to true false Let’s add this line in the beginning of : onKeyDown … and this one in : onKeyUp Now we can continue with the logic: . : onKeyUp if one of the horizontal or vertical key is released but the opposite one is still pressed, we change the direction to the last one If both of them are released, we stop the ship Note: There are multiple ways of handling the spaceship move, this is certainly not the cleanest one, but I think it’s one of the simplest to understand. We’re all set, save & reload & enjoy! . Upgrade: The spaceship can exit the screen! Try to check its position before updating it. You can check the result here Shooting rockets Now that we can control the ship, we want it to shoot rockets. Let’s start by adding the sprite in the assets folder: … and as usual: add it to the assets loader called in the folder and in with the others guys: Create a new file Rocket.js src add it index.html Let’s go back to the class. We want it to be able to . The function is already catching such events, so we just need to (spacebar in this example): Player shoot a rocket if he presses the spacebar button onKeyDown make a condition with the key code we want We are giving the spaceship position in the Rocket constructor, so inside we just (with an offset to make it appear in front of the ship instead of the middle). set its position to the spaceship one So let’s go, initialize with the constructor: Rocket.js Alright, if you save & reload, you may be able to fire (static) rockets by pressing the spacebar! To make them move, we need to containing all the rockets existing in the game (we don’t know how many of them are on stage): create an array variable The variable is located outside of the class because it’s static, which means its (unlike ). However we can get it and set it as we want (with the 2 first lines of the class). _list value is unique and is not only one object’s property this We can (within the constructor) and in the same time: push the current object inside this list declare the speed variable … and also : add the update method This is basically the same as before, we (and not the y because it’s not moving vertically) and like the clouds, we , except that this time it’s the right edge. update the x position of the rocket remove it when it goes outside of the screen limits After that, in the loop of , we just have to and main.js parse the rocket list call the update function for each element: Save & reload, and try it! It’s shooting, but it isn’t automatic. You have to press the key for each rocket and when you don’t move, it’s kinda weird because it’s firing fast as hell. What we want is to be able to shoot automatically when the key is kept pressed, with an adjustable speed. Let’s : the fire speed (that can be modified) and the cooldown, which is going to be the timer value: define two new variables in the Player constructor We also need to to , because we want to know if it’s pressed or not: update keyState add the space key Here is the function we are using to shoot (we need to ): call it in the update of the player It’s pretty simple here: we set and if the key is pressed and the timer has reached the value, we we just increment the timer from 0 to the fire speed spawn a rocket and reset the timer to 0. This function is permanently executed in the loop of the player: update Work done! If you want it faster, just decrease the fire speed variable (and increase it for slower speed). Firing some rockets Next post soon: we are adding some enemies! Thank you for reading! If you have any questions or suggestions, please let me know so I can improve the next one!

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Making a game with Javascript: Part 2

Too Long; Didn't Read

Company Mentioned

Baptiste M.

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Making a game with Javascript: Part 2

Too Long; Didn't Read

Company Mentioned

Baptiste M.

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES