JS13K Games 2019 Day 30
Hmm...less than 34 hours to complete Shield Bearer for the contest. Hopefully, tonight will be just like yesterday.
Okay, let's get a Heads Up Display (HUD) going to display the player's current score and their Health Bar. I wanted to get the score going first, so I looked up how to draw text using the HTML5 canvas context. I then read up on the JavaScript classes, because I wanted to know if I could create a static class just to display the score. I can: if I add the word "static" before the function in the class, it becomes a static function that can be called right from the class without creating an instance of that class. I gave it a static draw() function, and made a few const variables to hold the color that I wanted for the text. I then added it to my main draw() function to get the score to draw on the Canvas. I had to change the x and y variables around to fully display the text, but I got it in an area that I like.
Now, we need a Health Bar. I think it would be really cool if I was able to get the bar to go from green, to yellow, and then to red! Essentially, computers use a mixture of red, green, and blue to generate all the colors. If you remember your art classes, you would know the combination of red and green make yellow. The maximum value for one of the three colors is 255, and the lowest is 0. So, what I need to do is start with only green, move to yellow, and then end up on red. It sounds harder than it is: it's just starting out with max green and no red, and then increasing my red as I decrease the green. The green section was Math.round(255 * (hp/maxHp)) so I would start out with max green when the Bearer's health is full, but decrease as the Bearer lost health. The red section was Math.round(255 - (255 * (hp/maxHp))) so I would start out with no red, but the value for the red would increase as the Bearer lost health. I didn't need any blue, and I set the alpha to 0.5 to make it transparent so that you can see what is underneath the HUD. The health part of the Health Bar was a bit tricky to position: I wanted to make the bar shrink as the Bearer lost health, giving the effect that the bar is being emptied. The top of the bar is point * 3.5, so the health part has Math.round(maxHeight - (maxHeight * (hp/maxHp))) added to its y position to move it down as the Bearer loses health. The height part of the health part uses Math.round(maxHeight * (hp/maxHp)) so it loses height as the Bearer loses health. This gives the effect of the bar decreasing as the Bearer loses health. You can test it out by opening the console and typing in "hp = x" where x is any number between 100 and 0. Please don't use that knowledge to cheat in my game.
Now on to the fun part: implementing the Backscatter Buster! Well...first I wanted to make sure the Bearer would drop the shield to fire the buster. So I looked up JavaScript's setTimeout, because I need the Shield to disappear for a while while the Bearer is firing. I wanted to have all the functions for dropping and raising the shield in the Shield class, but setTimeout doesn't like that very much. So, raise is a separate function outside of the Shield class that restores the dropped = false status for the shield. Whenever the spacebar (keycode = 32) has a keydown event, the shield's dropped status is set to true. That true dropped status makes the shield snap to outside of the gameWindow (canvas). When the dropped status is set to false by the setTimeout's raise function, the shield once again snaps to the player, just like how it acted before adding this keydown event for the spacebar. I felt that 0.5 seconds was a pretty good time for the shield to be down. Plus, if you are hammering the spacebar, the timer keeps being reset. So you have to stop firing for half a second for your shield to return. That should give the Backscatter Buster shots plenty of time for them to hit the Bearer if the player isn't too careful.
Okay, now it is time to start implementing the Backscatter Buster! I added to the keydown event for spacebar: the Bearer is told to fire. When the Bearer fires, when the player presses spacebar, its firing is set to true (in case I want to have a sprite for it) and it pushes a new playerProjectile class onto the playerPro array. The new playerProjectile sets its position and direction based on the Bearer's facing direction. When the player releases the spacebar, the Bearer's firing boolean is set to false. The playerPro array holds all the playerProjectile objects that the player makes when they press spacebar. Now the main update and draw functions just have to go through the array and call each object in that array's update and draw function. An algorithm, similar to what I've used to keep the Bearer in the gameWindow (canvas), is used to make the Backscatter Buster shots rebound off the walls: when their x positions go out of bounds, I reset the x position to be in bounds, but I also change the dx value to travel in the opposite direction.
Well, that's all I can do for tonight! I'll have to make those Backscatter Buster shots die when they hit the shield, Bearer, and future enemies. I'm also thinking I might want to use a function with parameters in setTimeout when I start creating those robot spiders later. I want to make it so the robot spiders use a setTimeout to time their shots. It seems I just need to implement those spider enemies, get the buster shots to die when they hit anything, implement the game over screen, and then I'm ready to ship my game (meet the bear minimum requirements that I'm comfortable with to upload to the competition). I wish I had time to add sprites and sounds to the game, to make it look really good, but I feel like I would be lucky to complete those robot spider enemies and get the game posted before the deadline.
Okay, let's get a Heads Up Display (HUD) going to display the player's current score and their Health Bar. I wanted to get the score going first, so I looked up how to draw text using the HTML5 canvas context. I then read up on the JavaScript classes, because I wanted to know if I could create a static class just to display the score. I can: if I add the word "static" before the function in the class, it becomes a static function that can be called right from the class without creating an instance of that class. I gave it a static draw() function, and made a few const variables to hold the color that I wanted for the text. I then added it to my main draw() function to get the score to draw on the Canvas. I had to change the x and y variables around to fully display the text, but I got it in an area that I like.
Now, we need a Health Bar. I think it would be really cool if I was able to get the bar to go from green, to yellow, and then to red! Essentially, computers use a mixture of red, green, and blue to generate all the colors. If you remember your art classes, you would know the combination of red and green make yellow. The maximum value for one of the three colors is 255, and the lowest is 0. So, what I need to do is start with only green, move to yellow, and then end up on red. It sounds harder than it is: it's just starting out with max green and no red, and then increasing my red as I decrease the green. The green section was Math.round(255 * (hp/maxHp)) so I would start out with max green when the Bearer's health is full, but decrease as the Bearer lost health. The red section was Math.round(255 - (255 * (hp/maxHp))) so I would start out with no red, but the value for the red would increase as the Bearer lost health. I didn't need any blue, and I set the alpha to 0.5 to make it transparent so that you can see what is underneath the HUD. The health part of the Health Bar was a bit tricky to position: I wanted to make the bar shrink as the Bearer lost health, giving the effect that the bar is being emptied. The top of the bar is point * 3.5, so the health part has Math.round(maxHeight - (maxHeight * (hp/maxHp))) added to its y position to move it down as the Bearer loses health. The height part of the health part uses Math.round(maxHeight * (hp/maxHp)) so it loses height as the Bearer loses health. This gives the effect of the bar decreasing as the Bearer loses health. You can test it out by opening the console and typing in "hp = x" where x is any number between 100 and 0. Please don't use that knowledge to cheat in my game.
Now on to the fun part: implementing the Backscatter Buster! Well...first I wanted to make sure the Bearer would drop the shield to fire the buster. So I looked up JavaScript's setTimeout, because I need the Shield to disappear for a while while the Bearer is firing. I wanted to have all the functions for dropping and raising the shield in the Shield class, but setTimeout doesn't like that very much. So, raise is a separate function outside of the Shield class that restores the dropped = false status for the shield. Whenever the spacebar (keycode = 32) has a keydown event, the shield's dropped status is set to true. That true dropped status makes the shield snap to outside of the gameWindow (canvas). When the dropped status is set to false by the setTimeout's raise function, the shield once again snaps to the player, just like how it acted before adding this keydown event for the spacebar. I felt that 0.5 seconds was a pretty good time for the shield to be down. Plus, if you are hammering the spacebar, the timer keeps being reset. So you have to stop firing for half a second for your shield to return. That should give the Backscatter Buster shots plenty of time for them to hit the Bearer if the player isn't too careful.
Okay, now it is time to start implementing the Backscatter Buster! I added to the keydown event for spacebar: the Bearer is told to fire. When the Bearer fires, when the player presses spacebar, its firing is set to true (in case I want to have a sprite for it) and it pushes a new playerProjectile class onto the playerPro array. The new playerProjectile sets its position and direction based on the Bearer's facing direction. When the player releases the spacebar, the Bearer's firing boolean is set to false. The playerPro array holds all the playerProjectile objects that the player makes when they press spacebar. Now the main update and draw functions just have to go through the array and call each object in that array's update and draw function. An algorithm, similar to what I've used to keep the Bearer in the gameWindow (canvas), is used to make the Backscatter Buster shots rebound off the walls: when their x positions go out of bounds, I reset the x position to be in bounds, but I also change the dx value to travel in the opposite direction.
Well, that's all I can do for tonight! I'll have to make those Backscatter Buster shots die when they hit the shield, Bearer, and future enemies. I'm also thinking I might want to use a function with parameters in setTimeout when I start creating those robot spiders later. I want to make it so the robot spiders use a setTimeout to time their shots. It seems I just need to implement those spider enemies, get the buster shots to die when they hit anything, implement the game over screen, and then I'm ready to ship my game (meet the bear minimum requirements that I'm comfortable with to upload to the competition). I wish I had time to add sprites and sounds to the game, to make it look really good, but I feel like I would be lucky to complete those robot spider enemies and get the game posted before the deadline.
Comments
Post a Comment