• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SCMC HTML5 Game Development
 

SCMC HTML5 Game Development

on

  • 1,027 views

My presentation for HTML5 Game development done at the Software Craftsmanship McHenry County.

My presentation for HTML5 Game development done at the Software Craftsmanship McHenry County.

Statistics

Views

Total Views
1,027
Views on SlideShare
867
Embed Views
160

Actions

Likes
0
Downloads
9
Comments
0

4 Embeds 160

http://mchenry.softwarecraftsmanship.org 147
http://feeds.feedburner.com 9
http://posterous.com 2
http://www.directrss.co.il 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    SCMC HTML5 Game Development SCMC HTML5 Game Development Presentation Transcript

    • HTML5 Game Development #likeacraftsmanMonday, September 26, 2011 1
    • Monday, September 26, 2011 2
    • Monday, September 26, 2011 3
    • Monday, September 26, 2011 4
    • Monday, September 26, 2011 5
    • Monday, September 26, 2011 6
    • Monday, September 26, 2011 7
    • Monday, September 26, 2011 8
    • Monday, September 26, 2011 9
    • Monday, September 26, 2011 10
    • Monday, September 26, 2011 11
    • Monday, September 26, 2011 12
    • Monday, September 26, 2011 13
    • Nuts And BoltsMonday, September 26, 2011 14
    • CanvasMonday, September 26, 2011 15
    • Canvas <canvas width="200" height="200"> This Browser doesnt support the canvas. </canvas>Monday, September 26, 2011 16
    • Monday, September 26, 2011 17
    • 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();Monday, September 26, 2011 18
    • AudioMonday, September 26, 2011 19
    • Audio backgroundMusic.play(); backgroundMusic.pause();Monday, September 26, 2011 20
    • Monday, September 26, 2011 21
    • Monday, September 26, 2011 22
    • function gameLoop() { update(); draw(); } setInterval(function() { gameLoop(); }, this.getTickTime())Monday, September 26, 2011 23
    • this.loop = function() { while (scheduler.getTicks() > nextGameTick) { updaterList.update(); nextGameTick += scheduler.getTickTime(); } screen.render(); };Monday, September 26, 2011 24
    • TestsMonday, September 26, 2011 25
    • Monday, September 26, 2011 26
    • Monday, September 26, 2011 27
    • NO GUI!Monday, September 26, 2011 28
    • NO GUI!Monday, September 26, 2011 29
    • + •JSDom •Node-JQuery •Underscore •Bullets suckMonday, September 26, 2011 30
    • HOW?Monday, September 26, 2011 31
    • Monday, September 26, 2011 32
    • 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 }; }; };Monday, September 26, 2011 33
    • context = new Context(); screen = new Eskimo.Screen(context);Monday, September 26, 2011 34
    • screen.render(); expect(context).toHaveScreenClearedTo("#aaaabb");Monday, September 26, 2011 35
    • Why? screen.put(image); screen.render();Monday, September 26, 2011 36
    • JSDom • Simulates the DOM • Doesn’t Support HTML5 • Bullets suckMonday, September 26, 2011 37
    • define("HTMLAudioElement", { tagName: AUDIO, attributes: [ src ]Monday, September 26, 2011 38
    • levelLoader.load("newLevel"); spiedJQuery.triggerEvent("canplaythrough"); jukebox = levelLoader.getJukebox(); var asset = jukebox.assets.get(soundOne).src; expect(asset).toEqual(sound.mp3);Monday, September 26, 2011 39
    • Simulators are hard!Monday, September 26, 2011 40
    • Game Logic Interaction DOMMonday, September 26, 2011 41
    • Spies spyOn(levels, "load"); TitleScreen.load(levels, screen); expect(levels.load) .toHaveBeenCalledWith(title, TitleScreen);Monday, September 26, 2011 42
    • Acceptance Player 1 Player 2 Winner Rock Paper Paper Paper Scissors Scissors Scissors Rock RockMonday, September 26, 2011 43
    • ArchitectureMonday, September 26, 2011 44
    • Monday, September 26, 2011 45
    • FeedTheQuinn.Assets = { title: { images: { background: { src: images/title_screen_background.jpg, location: { x: 0, y: 0 } },Monday, September 26, 2011 46
    • Respawn Dead AliveMonday, September 26, 2011 47
    • Monday, September 26, 2011 48
    • Monday, September 26, 2011 49
    • Monday, September 26, 2011 50
    • if (intersects(humanControlledBitmap.currentlyHeldKillableObject, otherGameObject.boundingBox) &&otherGameObject.isCapableOfEndingGame?) { gameObjectList.remove(otherGameObject);numericValueRepresentingAPositiveReinforcementOfPlayerBehavior+= 100241;}Monday, September 26, 2011 51
    • player.kill(zombie);Monday, September 26, 2011 52
    • player.decapitate(zombie);Monday, September 26, 2011 53
    • JavaScriptMonday, September 26, 2011 54
    • DesignMonday, September 26, 2011 55
    • Eskimo!Monday, September 26, 2011 56
    • ThanksMonday, September 26, 2011 57