Build Jumping Game – HTML Canvas | Infinite Runner

Описание: In this video you will learn how to create this infinite jumping style game using the vanilla HTML canvas, so no frameworks will be necessary. The game is question is one of those infinite type of arcade games, where the game runs for as long as the user continues to jump over the obstacles and not mess up by colliding into one of them. If this does happen then the game will end & the users high score will show up, from this point the user will be able to restart the game from scratch if they want to.


To make things more challenging, the game speeds up if the player manages to survive for an extended period of time, it will continue to do this until the player does eventually mess up, this will give the game a natural skill curve where difficulty smoothly increases.

While there may be other videos that teach a similar style of game already on YouTube. The main attraction of my game is the rotation animation that can be seen on the player square when it jumps into the air to avoid an obstacle. There are also cool sound effects in my game that are missing from other people’s games of similar type. The sound effects where chosen to be as appealing as possible & give the game a jovial feel.

📚 Materials/References:

Link to the completed applications Code Pen page: https://codepen.io/LFCProductions/det...
Coin SFX: https://ia801409.us.archive.org/2/ite...
Jump SFX: https://ia801400.us.archive.org/32/it...
Game Over SFX: https://ia601405.us.archive.org/26/it...

🧠 Concepts Covered:

How to make the player object jump into the air & then come back down again.
How to make specific objects rotate in canvas without the rotation effecting other objects.
How to make an object move in the same direction whilst also rotating.
How to increase the speed of the game as time goes by.
How to infinitely spawn enemies over an indefinite period of time.


💻 Technologies used:


HTML5 and the canvas API
JavaScript (No jQuery)
CSS (No Bootstrap)

If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.

Stay awesome guys. Peace and love. ☮️❤️

#HTML#css#canvas#canvasapi#JavaScript#Java#gamedev#webdev#platformer#2dgame#makegame#JavaScriptCanvas