Creating games to run in browsers
Exercise 1 - simplest HTML
The development environment
The browser console
The <canvas> element
The <script> element
Running the script
Exercise 2 - start a program
What is a function?
Accessing the canvas
Setting canvas size
The graphics context
Colours
Let's start drawing
Exercise 3 - draw away!
What is an object?
Naming conventions
Text and images
Crucial: Javascript is event-driven
Mouse events
Global data
Exercise 4 - click and draw
Freehand drawing
Exercise 5 - freehand
Hitting a target
Redrawing all shapes
Dragging a shape
Exercise 6 - draw and drag
Touch events
Keyboard events
Exercise 7 - control with keys
More general user interface
Time events
How long did it take?
Exercise 8 - how long?
Animation
Exercise 9 - sunrise
Overall game structure
The event queue
More about images
16 million colours
Transparent shapes
Working with pixels
Conclusion