Tagged: demo

Tonight, I made an attempt at creating a HTML5 Canvas sprite animation. The process is actually quite simple, if not a little fiddly. I figure that I’ll need to get good at this, if I want to finish my game. Anyhow, an example of one of the sprites I created can be seen below. The sprite loops through 4 states, using a spritemap to show a different alien for each state. I’m thinking of using this one as part of my game’s intro.

See the Pen Canvas Sprite – Alien Loop by Philip Newborough (@corenominal) on CodePen.

This is the HTML5 canvas animation that I’m currently using in the header of this site. I’m not sure how long it will last on this site, so here is the CodePen. The animation is supposed to look like a giant barcode. It is randomly generated, so the chances of seeing the same barcode twice are quite slim. Anyhow, I love playing around with the canvas element :)

See the Pen HTML5 Canvas StripyWipy #2 by Philip Newborough (@corenominal) on CodePen.

This is a variation of a HTML5 canvas animation that I’m using in the header of this site. You can see a fullscreen version over on CodePen.

See the Pen HTML5 Canvas StripyWipy #1 by Philip Newborough (@corenominal) on CodePen.

Simulating “random” movements using the HTML5 canvas element. Blocks move in random directions and collide. Blocks are regenerated.

See the Pen HTML5 Canvas Collider #4 by Philip Newborough (@corenominal) on CodePen.

Simulating “random” movements using the HTML5 canvas element. Blocks move in random directions and collide. Resets if less than 2 blocks remain.

See the Pen HTML5 Canvas Collider #3 by Philip Newborough (@corenominal) on CodePen.

A simple demo of “random” movements using the HTML5 canvas element.

See the Pen HTML5 Canvas Movement #1 by Philip Newborough (@corenominal) on CodePen.

A simple collision detection demo using the HTML5 canvas element, version #2. This version tests for collisions between blocks and debris, meaning there is a chance of a chain-reaction of collisions. See version #1 for single collision detection.

See the Pen HTML5 Collider #2 by Philip Newborough (@corenominal) on CodePen.

A simple collision detection demo using the HTML5 canvas element. See version #2 for multiple collision detection.

See the Pen HTML5 Collider #1 by Philip Newborough (@corenominal) on CodePen.