- 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
