Basic Collision Detection in Typescript Tutorial
In this video tutorial I'm covering some basic 2d collision detection for HTML5 canvas games in TypeScript. I cover basic circle collision detection, rectangle collision detection, line collision detection and rotated rectangle collision detection. There's some basic trigonometry that get's covered, but nothing that is too mathematically challenging. I do leave out polygon collision detection, but I will cover that in a later tutorial. There is a brief introduction to the separating axis theorem when I cover Oriented Rectangle collisions, but I save the details of that for when we do Polygon Collision Detection.
The code for this tutorial is available on the written version of the Basic Collision Detection page.
Learn to use TypeScript and the HTML5 canvas to draw images sprites for your games using images.
8 Bit Sound Effects
Learn how to use HTML5 to load a sprite sheet and create animations using the HTML5 canvas element.
I've added a series of fun 8 bit style 2048 puzzle games. Slide the tiles with the arrow keys. Tiles with the same value merge into a value with twice the value.
This is my take on the classic Atari arcade game Asteroids. Point your ship at the asteroids and shoot, but don't run into those giant space rocks.
Spades Card Game
Spades is a classic trick taking card game. Played in pairs, bid the number of tricks you believe you can take after you see your hand. Spades is always trump.
This is my version of the classic Taito arcade game Space Invaders. It has more of an 8 bit feel than the original Space Invaders, which was black and white.
Gaps Solitaire is my personal favorite solitaire card game. Your goal is to put all the cards in order by suit in four rows by moving cards into the gaps.