In this tutorial, we create a JavaScript game with HTML Canvas. First, we go through in detail, how to draw a balloon on the canvas. We cover the basics of drawing, and even quadratic bezier curves and arcs. Then as a second example, we draw trees based on randomly generated parameters. Then we talk about positioning these elements on the canvas and build up our game. We add some game logic, event handling, and animation. And finally, we add a very basic hit detection to our game.

👉 You find the game and its source code here: https://codepen.io/HunorMarton/pen/VwKOqdY

• 0:00 Introduction
• 0:58 Drawing an air balloon
• 6:51 Drawing trees
• 10:53 Positioning shapes
• 16:02 Event handling and animation
• 21:15 Hit detection
• 23:12 Next steps

CodePen — https://codepen.io/HunorMarton
Twitter — https://twitter.com/HunorBorbely

#html #javascript #game-development