• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 game programming overview
 

Html5 game programming overview

on

  • 3,858 views

 

Statistics

Views

Total Views
3,858
Views on SlideShare
3,308
Embed Views
550

Actions

Likes
7
Downloads
0
Comments
0

6 Embeds 550

http://www.ibare.kr 490
http://faz.my 42
http://ibare77.tumblr.com 15
http://localhost 1
http://mail62.paran.com 1
http://twitter.com 1

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

    Html5 game programming overview Html5 game programming overview Presentation Transcript

    • HTML5Javascript GAME By min tae, Kim
    • GAMEHTML로가능한가?
    • GAME
    • GAME무엇이필요할까?
    • richard garriott
    • john d. carmack
    • GAME당신은창조적입니까? 확실해요?
    • GAMEMediaResourceControlPixelControlMechanismProgrammerPhysicsGraphicsAcceleratorHighPerformanceNetworkProtocol
    • GAME HTML4 HTML5MediaResourceControlPixelControlMechanismProgrammerPhysicsGraphicsAcceleratorHighPerformanceNetworkProtocol
    • GAMEMediaResourceControl<IMG> <VIDEO> <AUDIO> <DIV>
    • GAMEPixelControlMechanism <CANVAS> 2D 3D
    • GAMEGraphicsAccelerator
    • GAMEHighPerformanceNetworkProtocol WebSocket
    • GAMEGettingStartedfunction start() { ...... ?????
    • IsogenicEngine Akihabara gameQuery three.js bdge JS3D GameJs PropulsionJS TheRenderEngine Flax Aves TomsHalls js-verge CopperLicht Cocos2D GLGE GammaJS ClanFX jGen RocketEngine CanvexSarien.netinterpreter Curve3D FlixelJS Unity3D gTile xc.js SpiderGL C3DL j5g3 JavascriptGamelib TheJavascript2DGameEngine Diggy Crafty SpellScript Impact O3D EffectGames Sandy3D cssgameengine TheGMPJavascriptGameEngine Rosewood vegalib jsGameSoup Pre3d
    • CraftySpriteimage
    • CraftyBackgroundimage
    • CraftyGettingStartedCrafty.init(50); > Frame rateCrafty.canvas();
    • CraftyGettingStartedCrafty.init(50);Crafty.canvas();
    • Crafty PreloadtheresourcesCrafty.load(["sprite.png", "bg.png"], function() { Crafty.sprite(64, "sprite.png", { ship: [0,0], big: [1,0], medium: [2,0], small: [3,0] });
    • Crafty PreloadtheresourcesCrafty.load(["sprite.png", "bg.png"], function() { Crafty.sprite(64, "sprite.png", { ship: [0,0], big: [1,0], medium: [2,0], small: [3,0] });
    • Crafty SetspritesizeCrafty.load(["sprite.png", "bg.png"], function() { Crafty.sprite(64, "sprite.png", { ship: [0,0], big: [1,0], medium: [2,0], small: [3,0] });
    • Crafty DefinespriteobjectCrafty.load(["sprite.png", "bg.png"], function() { Crafty.sprite(64, "sprite.png", { ship: [0,0], big: [1,0], medium: [2,0], small: [3,0] });
    • Crafty SceneCrafty.scene("main");Crafty.scene("main", function() { Crafty.background("url(bg.png)");...
    • Crafty SceneCrafty.scene("main");Crafty.scene("main", function() { Crafty.background("url(bg.png)");...
    • Crafty Scoredisplayvar score = Crafty.e("2D, DOM, text") .text("Score: 0") .attr({x: Crafty.viewport.width - 300, y: Crafty.viewport.height - 50, w: 200, h:50}) .css({color: "#fff"});
    • Crafty Scoredisplayvar score = Crafty.e("2D, DOM, text") .text("Score: 0") .attr({x: Crafty.viewport.width - 300, y: Crafty.viewport.height - 50, w: 200, h:50}) .css({color: "#fff"});
    • Crafty Scoredisplayvar score = Crafty.e("2D, DOM, text") .text("Score: 0") .attr({x: Crafty.viewport.width - 300, y: Crafty.viewport.height - 50, w: 200, h:50}) .css({color: "#fff"});
    • Crafty Scoredisplayvar score = Crafty.e("2D, DOM, text") .text("Score: 0") .attr({x: Crafty.viewport.width - 300, y: Crafty.viewport.height - 50, w: 200, h:50}) .css({color: "#fff"});
    • Crafty Playervar player = Crafty.e( "2D, canvas, ship, controls, collision, score") .attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, x: 100, 100}) .bind("keydown", function(e) { if(e.keyCode === Crafty.keys.RA) { this.move.right = true;
    • Crafty Playervar player = Crafty.e( "2D, canvas, ship, controls, collision, score") .attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, x: 100, 100}) .bind("keydown", function(e) { if(e.keyCode === Crafty.keys.RA) { this.move.right = true;
    • Crafty Playerattributevar player = Crafty.e( "2D, canvas, ship, controls, collision, score") .attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, x: 100, 100}) .bind("keydown", function(e) { if(e.keyCode === Crafty.keys.RA) { this.move.right = true;
    • Crafty Bindkeyboardeventhandlervar player = Crafty.e( "2D, canvas, ship, controls, collision, score") .attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, x: 100, 100}) .bind("keydown", function(e) { if(e.keyCode === Crafty.keys.RA) { this.move.right = true;
    • Crafty Bindkeyboardeventhandlervar player = Crafty.e( "2D, canvas, ship, controls, collision, score") .attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, x: 100, 100}) .bind("keydown", function(e) { if(e.keyCode === Crafty.keys.RA) { this.move.right = true;
    • CraftyActioncontrol.attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, x: 100, 100}).bind("keydown", function(e) { if(e.keyCode === Crafty.keys.RA) { this.move.right = true; }}).collision("asteroid", function() { Crafty.scene("main");
    • Crafty Firebulletif(e.keyCode === Crafty.keys.SP) { Crafty.e("2D, DOM, color, bullet") .color("rgb(255, 0, 0)") .bind("enterframe", function() {! if(this._x > Crafty.viewport.width || this._x < 0 || this._y > Crafty.viewport.height || this._y < 0) { this.destroy(); }
    • Crafty Firebulletif(e.keyCode === Crafty.keys.SP) { Crafty.e("2D, DOM, color, bullet") .color("rgb(255, 0, 0)") .bind("enterframe", function() {! if(this._x > Crafty.viewport.width || this._x < 0 || this._y > Crafty.viewport.height || this._y < 0) { this.destroy(); }
    • Crafty Firebulletif(e.keyCode === Crafty.keys.SP) { Crafty.e("2D, DOM, color, bullet") .color("rgb(255, 0, 0)") .bind("enterframe", function() {! if(this._x > Crafty.viewport.width || this._x < 0 || this._y > Crafty.viewport.height || this._y < 0) { this.destroy(); }
    • Crafty Firebulletif(e.keyCode === Crafty.keys.SP) { Crafty.e("2D, DOM, color, bullet") .color("rgb(255, 0, 0)") .bind("enterframe", function() {! if(this._x > Crafty.viewport.width || this._x < 0 || this._y > Crafty.viewport.height || this._y < 0) { this.destroy(); }
    • Crafty Firebulletif(e.keyCode === Crafty.keys.SP) { Crafty.e("2D, DOM, color, bullet") .color("rgb(255, 0, 0)") .bind("enterframe", function() {! if(this._x > Crafty.viewport.width || this._x < 0 || this._y > Crafty.viewport.height || this._y < 0) { this.destroy(); }
    • Crafty AsteroidCrafty.c("asteroid", { init: function() { this.attr( ... ) .bind("enterframe", function() { ... }) .collision("bullet", function(e) { player.incrementScore(5); }); }});
    • Crafty AsteroidCrafty.c("asteroid", { init: function() { this.attr( ... ) .bind("enterframe", function() { ... }) .collision("bullet", function(e) { player.incrementScore(5); }); }});
    • Crafty AsteroidCrafty.c("asteroid", { init: function() { this.attr( ... ) .bind("enterframe", function() { ... }) .collision("bullet", function(e) { player.incrementScore(5); }); }});
    • Crafty AsteroidCrafty.c("asteroid", { init: function() { this.attr( ... ) .bind("enterframe", function() { ... }) .collision("bullet", function(e) { player.incrementScore(5); }); }});
    • Crafty Start&Finishfor(var i = 0; i < 10; i++) { Crafty.e("2D, DOM, big, collision, asteroid");}
    • IsogenicEngine Akihabara gameQuery three.js bdge JS3D GameJs PropulsionJS Crafty Flax Aves TomsHalls js-verge CopperLicht Cocos2D GLGE GammaJS ClanFX jGen RocketEngine CanvexSarien.netinterpreter Curve3D FlixelJS Unity3D gTile xc.js SpiderGL C3DL j5g3 JavascriptGamelib TheJavascript2DGameEngine Diggy SpellScript Impact EffectGames Sandy3D O3D cssgameengine TheGMPJavascriptGameEngine TheRenderEngine Rosewood vegalib Pre3d jsGameSoup
    • IsogenicEngine Akihabara gameQuery three.js bdge JS3D GameJs PropulsionJS Crafty Flax Aves TomsHalls js-verge CopperLicht Cocos2D GLGE GammaJS ClanFX jGen RocketEngine CanvexSarien.netinterpreter Curve3D FlixelJS Unity3D gTile xc.js SpiderGL C3DL j5g3 JavascriptGamelib TheJavascript2DGameEngine Diggy SpellScript Impact EffectGames Sandy3D O3D cssgameengine TheGMPJavascriptGameEngine TheRenderEngine Rosewood vegalib Pre3d jsGameSoup
    • HTML5Javascript GAME By min tae, Kim Thank you!