Making Games in JavaScript
Preview:
DESCRIPTION
An introduction to making browser based games in JavaScript and HTML5. This workshop was presented at an open day for the Academy of Interactive Entertainment in Sydney, Australia on November 17, 2012.
Citation preview
- 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