1. Making Games in JavaScript Sam Cartwright Game Programming Instructor Academy of Interactive Entertainment, Sydney

2. Welcome

3. Who am I?

4. Who are you?

5. Topics JavaScript HTML The DOM Rendering Main Loop Animation User Input

6. What is JavaScript?

7. Why HTML5?(making games is hard)

8. Fast Iteration

9. Scripts are data

10. What Type of Games?

11. HTMLbolditalics

12. How do we run code? { printf(hello world);} alert("Hello World");

13. DOMDocument Object Model

14. HTML DOM Tree

15. Rendering

16.

17. 2D Contextvar canvas = document.getElementById("gameCanvas");var context = canvas.getContext("2d");var width = canvas.width;var height = canvas.height;

18. window.setInterval(funciton, delay) window.setInterval(drawFrame(), 1000/30);

19. window.onload = function(){ context.beginPath(); var canvas = document.getElementById(game); context.arc(0.5 * width, ball * height, var context = canvas.getContext(2d); width * radius, 0, Math.PI*2); var width = canvas.width; context.closePath(); var height = canvas.height; context.fill(); var ball = 0.1; var radius = 0.1; context.fillRect(0, wall * height, width, var wall = 0.9; (1-wall) * height); var velocity = 0; }, 1000 * dt);} var dt = 1.0/30.0; var scale = 0.005; window.setInterval(function(){ canvas.width = canvas.width; var gravity = 9.8; velocity = velocity + gravity * dt * scale; ball = ball + velocity; if( (ball + radius) > wall ){ ball = wall - radius; velocity = -velocity; }

20. drawImagevar image = document.createElement("img");image.src = "grass.png";image.onload = function(){drawFrame(context);};function drawFrame(c){ // clear the background with black c.fillStyle = "#000"; c.fillRect(0, 0, canvas.width, canvas.height); c.drawImage(image, 100, 100);}

21. Tiled Backgroundvar background = new Array(15); function drawFrame(c){ c.fillStyle = "#000";for(var y=0;y