Embed Size (px)
DESCRIPTION
My presentation for HTML5 Game development done at the Software Craftsmanship McHenry County.
Citation preview
#likeacraftsman
HTML5 Game
Development
1Monday, September 26, 2011
2Monday, September 26, 2011
3Monday, September 26, 2011
4Monday, September 26, 2011
5Monday, September 26, 2011
6Monday, September 26, 2011
7Monday, September 26, 2011
8Monday, September 26, 2011
9Monday, September 26, 2011
10Monday, September 26, 2011
11Monday, September 26, 2011
12Monday, September 26, 2011
13Monday, September 26, 2011
Nuts And Bolts14Monday, September 26, 2011
Canvas
15Monday, September 26, 2011
Canvas
<canvas width="200" height="200"> This Browser doesn't support the canvas.</canvas>
16Monday, September 26, 2011
17Monday, September 26, 2011
context.save(); context.setTransform(1,0,0,1,0,0);
context.translate(400, 300);context.rotate(playerState.rotationAngle);
context.drawImage(player, -37, -30);context.restore();
18Monday, September 26, 2011
Audio
19Monday, September 26, 2011
Audio
backgroundMusic.play(); backgroundMusic.pause();
20Monday, September 26, 2011
21Monday, September 26, 2011
22Monday, September 26, 2011
function gameLoop() {update();draw();}
setInterval(function() { gameLoop(); }, this.getTickTime());
23Monday, September 26, 2011
this.loop = function() { while (scheduler.getTicks() > nextGameTick) { updaterList.update();
nextGameTick += scheduler.getTickTime(); } screen.render(); };
24Monday, September 26, 2011
Tests25Monday, September 26, 2011
26Monday, September 26, 2011
27Monday, September 26, 2011
NO GUI!
28Monday, September 26, 2011
NO GUI!
29Monday, September 26, 2011
+•JSDom•Node-JQuery•Underscore•Bullets suck
30Monday, September 26, 2011
HOW?
31Monday, September 26, 2011
32Monday, September 26, 2011
Context = function() { this.drawImage = function(image, x, y) { imageList.push({name: image, x: x, y: y}); };
this.fillRect = function(x, y, width, height) { this.filledRect = {x: x, y: y, width: width, height: height }; }; };
33Monday, September 26, 2011
context = new Context();
screen = new Eskimo.Screen(context);
34Monday, September 26, 2011
screen.render();
expect(context).toHaveScreenClearedTo("#aaaabb");
35Monday, September 26, 2011
Why?
screen.put(image);
screen.render();
36Monday, September 26, 2011
JSDom
• Simulates the DOM
• Doesn’t Support HTML5
• Bullets suck
37Monday, September 26, 2011
define("HTMLAudioElement", {
tagName: 'AUDIO',
attributes: [
'src'
]
38Monday, September 26, 2011
levelLoader.load("newLevel");
spiedJQuery.triggerEvent("canplaythrough");
jukebox = levelLoader.getJukebox();
var asset = jukebox.assets.get('soundOne').src;
expect(asset).toEqual('sound.mp3');
39Monday, September 26, 2011
Simulators are hard!
40Monday, September 26, 2011
Game Logic
Interaction
DOM
41Monday, September 26, 2011
SpiesspyOn(levels, "load"); TitleScreen.load(levels, screen);
expect(levels.load).toHaveBeenCalledWith('title', TitleScreen);
42Monday, September 26, 2011
Acceptance
Player 1 Player 2 Winner
Rock Paper Paper
Paper Scissors Scissors
Scissors Rock Rock
43Monday, September 26, 2011
Architecture44Monday, September 26, 2011
45Monday, September 26, 2011
FeedTheQuinn.Assets = {
'title': {
'images': {
'background': {
'src': 'images/title_screen_background.jpg',
'location': {
'x': 0,
'y': 0
}
},
46Monday, September 26, 2011
Dead
Respawn
Alive
47Monday, September 26, 2011
48Monday, September 26, 2011
49Monday, September 26, 2011
50Monday, September 26, 2011
if (intersects(humanControlledBitmap.currentlyHeldKillableObject, otherGameObject.boundingBox) && otherGameObject.isCapableOfEndingGame?) { gameObjectList.remove(otherGameObject); numericValueRepresentingAPositiveReinforcementOfPlayerBehavior += 100241;}
51Monday, September 26, 2011
player.kill(zombie);
52Monday, September 26, 2011
player.decapitate(zombie);
53Monday, September 26, 2011
JavaScript
54Monday, September 26, 2011
Design
55Monday, September 26, 2011
Eskimo!
56Monday, September 26, 2011
Thanks
57Monday, September 26, 2011
