The document provides an overview of making games using JavaScript, HTML, and the DOM. It discusses JavaScript and HTML5 as languages well-suited for game development due to features like fast iteration, treating scripts as data, and allowing different game types. It covers key concepts like the DOM tree, rendering to a <canvas> element, using the 2D context to draw, implementing a main loop with setInterval(), drawing sprites and images, handling user input, and creating basic animations and games with concepts like sprites, matrices, vectors, bullets, and zombies.

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

11. What Type of Games?

12. HTML
<b>bold<b/>
<i>italics</i>
<script>

13. How do we run code?
<script src=”main.js”
type=”text/javascript”>
int main() </script>
{
printf(“hello world”);
}
alert("Hello World");

14. DOM
Document Object Model

15. HTML DOM Tree

16. Rendering

17. <canvas>

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

19. window.setInterval(funciton, delay)
window.setInterval(“drawFrame()”, 1000/30);

20. 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;
}

22. drawImage
var 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);
}

24. Tiled Background
var background = new Array(15); function drawFrame(c){
c.fillStyle = "#000";
for(var y=0;y<15;y++){ c.fillRect(0, 0, canvas.width,
canvas.height);
background[y] = new Array(20);
for(var x=0; x<20; x++){ for(var y=0; y<15; y++) {
background[y][x] = image; for(var x=0; x<20; x++) {
} c.drawImage(background[y][x],
} x*32, y*32);
}
}
}

26. Game Loop
setTimeout("drawFrame(context)", 0);

27. var fps = 0; }
var fpsCount = 0; }
var fpsTime = 0;
var dt = 0; // draw some debugging information
var startFrameMillis = Date.now(); c.fillStyle = "#f00";
var endFrameMillis = Date.now(); c.fillText("FPS: " + fps, 5, 20, 100);
function drawFrame(c) // update the frame counter
{ fpsTime += dt;
endFrameMillis = startFrameMillis; fpsCount++;
startFrameMillis = Date.now(); if(fpsTime >= 1000)
{
dt = startFrameMillis - endFrameMillis; fpsTime = 0;
fps = fpsCount;
var delta = dt * 0.001; fpsCount = 0;
}
if(delta > 1)
delta = 1; setTimeout("drawFrame(context)", 0);
// clear the background with black } // end of drawFrame function
c.fillStyle = "#000";
c.fillRect(0, 0, canvas.width, canvas.height);
// call the drawFrame function to start the game loop.
for(var y=0; y<15; y++) // call frame will repeatedly call itself
{ drawFrame(context);
for(var x=0; x<20; x++)
{
c.drawImage(background[y][x], x<<5, y<<5);

29. Animation

30. <script src="vector2.js"></script>
<script src="matrix3x3.js"></script> player.update(dt);
<script src="sprite.js"></script>
var trans = new Matrix3x3();
trans.setupTranslation(100, 100);
trans.applyToContext(c);
player = new Sprite("player.png"); player.draw(c);
player.buildFrames(
8, 1, 32, 32, 0, 0, 0, 0, 0.05); identityMatrix.applyToContext(c);
player.setOffset(16, 16);

31. Keyboard Input

32. Key Press Events
window.addEventListener('keydown',
function(evt) { self.onKeyDown(evt); },
false);

33. game.textures.bullet = loadImage("bullet.png"); drawFrame(c) {
…
game.sprites.player = new Sprite("player.png"); game.player.update(dt);
game.sprites.player.buildFrames(8, 1, 32, 32, 0, 0, 0, if(game.player.fired === true) {
0, 0.05); game.player.fire();
game.sprites.player.setOffset(16, 16); }
… for(var bulletIdx=0; bulletIdx<game.bullets.length;
bulletIdx++) {
// create the player object if(game.bullets[bulletIdx].alive == true) {
game.player = new Player(game.sprites.player, game.bullets[bulletIdx].update(dt);
game.canvas.width/2, game.canvas.height/2); }
}
// set up the mouse and keyboard event handler
game.keyboard = new Keyboard(); game.player.draw(c);
for(var i=0; i<game.bullets.length; i++) {
var BULLET_COUNT = 6; if(game.bullets[i].alive == true) {
game.bullets[i].draw(c);
game.bullets = new Array(); }
for(var bulletIdx=0; bulletIdx<BULLET_COUNT; }
bulletIdx++) { …
game.bullets[bulletIdx] = new }
Bullet(game.textures.bullet);
}

34. zombies

36. Zombie.prototype.update
// seek to player
this.velocity.x = game.player.position.x - this.position.x;
this.velocity.y = game.player.position.y - this.position.y;
// look at player
this.rotation = lookAt(this.velocity.x, this.velocity.y);
// scale down the velocity
this.velocity.normalize();
this.velocity.multiplyScalar(dt*30);
this.position.add(this.velocity);

37. QUESTIONS?