HTML5 Game tutorial with Quiz, Exercises and Examples

Canvas

• Canvas Tag Topic:8
• Coordinate system
• Line Topic:12
• Line Caps Topic:5
• Line Join Topic:2
• Rectangle Methods Topic:10
• Arc Topic:12
• Circle Topic:5
• Bezier Curve Topic:10
• Quadratic Curve Topic:8
• Linear Gradient Topic:18
• Radial Gradient Topic:13
• Drawing Using Paths Topic:15
• Text Drawing Topic:25
• Image Topic:23
• Image Data Topic:15
• Image Resize Topic:4
• Image Crop Topic:3
• Image Pixelation Topic:4
• Pattern Topic:11
• Composite Operations Topic:8
• Colour and Style Topic:6
• Clear Topic:5
• Video Topic:3
• Drawing State Topic:8
• Clip Topic:3
• Color
• Translate Topic:11
• Rotate Topic:13
• Scale Topic:10
• Transformation Matrix Topic:8
• Shear to draw shadow Topic:2
• Shadow Topic:16
• Global Alpha
• Transparent Topic:6
• toDataURL Topic:6

Canvas Shape

• Arrow Topic:5
• Axis
• Clock
• Club
• Cutout Shapes
• Dashed Lines
• Diamond
• Ellipse
• Stick Figure
• Grid Topic:9
• Heart Topic:2
• Logo Topic:3
• Pacman Topic:4
• Play button
• Polygon Topic:2
• Random Shape Topic:2
• Rectangle
• Ring
• Shape from curve Topic:6
• Ship Topic:2
• Smiley
• Spade
• Spiral
• Square
• Star Topic:3
• Tile
• Tree Topic:4
• Triangle Topic:5
• Zigzag

Canvas Animation

• Acceleration Topic:6
• Angular velocity
• HTML controls in a canvas
• Animation Controller Topic:5
• Testing Browser Animation Performance Topic:4
• Bobbing
• Bounce Topic:18
• Clock Ticking Topic:4
• Collision Detection Topic:2
• Animate on gradient
• Easing In for Taking Off Topic:6
• Elliptical movement
• Explode
• Alpha Fading the Player Ship
• Flock animation
• Friction to reduce velocity Topic:3
• Falling Topic:7
• Linear Motion Topic:13
• Mechanical Gears
• Following the mouse Topic:4
• Flying Along Circle Topic:5
• Cubic Bezier Curve Movement Topic:4
• Oscillation Topic:5
• Fountain partical Topic:2
• Pendulum
• Projectile with vector
• Pulsing motion
• Rotation Topic:4
• Spinning text
• Spring Topic:7
• Sprite Topic:2
• Telescoping
• Throwing
• Vector2D class Topic:4
• Waves with two angles Topic:2

Audio

• HTMLMediaElement Topic:9
• Audio Element Topic:8
• Audio events
• Adding custom control for audio

Video

• HTMLVideoElement Attributes Topic:3
• Video Element Topic:17
• Video functions Topic:2
• Video events Topic:2

Geolocation

• Geolocation Topic:7
• Geolocation Errors Topic:2
• Geolocation Options Topic:2
• GeoLocaltion Monitoring Topic:4

Local Storage

• Local Storage Topic:3
• Local Storage Events
• Session Storage Topic:4

Drag and Drop

• Drag Source
• Drag Event
• Drop Zone
• Drop Event
• DataTransfer Object Topic:2
• Drag and Drop Files Topic:2
• FileReader Topic:4

Chart

• Pie Chart Topic:2
• Bar Chart Topic:2
• Line Chart
• Graph Topic:4

Canvas Event

• Event Controller
• Mouse Event Topic:15
• Mobile Event Topic:2
• Image Event Topic:2
• Drag and Drop Topic:3
• Controlling the player ship with keyboard Topic:4
• Touch events with ball movement Topic:3

WebGL

• A WebGL Initialization Function

WebSocket

• Echo server via WebSocket Topic:3
• Use Generic EventListener Interface with WebSocket

Web Worker

• Use webworker to do multithread in browser Topic:2

indexedDB

• Store data in indexedDB Topic:3
• Listen to storage event

Ajax

• Use EventSource to get result from php
• Use XMLHttpRequest to read value from php

Web SQL

• Websql