Html5 game programming overview

4,325 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,325
On SlideShare
0
From Embeds
0
Number of Embeds
560
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Html5 game programming overview

  1. 1. HTML5Javascript GAME By min tae, Kim
  2. 2. GAMEHTML로가능한가?
  3. 3. GAME
  4. 4. GAME무엇이필요할까?
  5. 5. richard garriott
  6. 6. john d. carmack
  7. 7. GAME당신은창조적입니까? 확실해요?
  8. 8. GAMEMediaResourceControlPixelControlMechanismProgrammerPhysicsGraphicsAcceleratorHighPerformanceNetworkProtocol
  9. 9. GAME HTML4 HTML5MediaResourceControlPixelControlMechanismProgrammerPhysicsGraphicsAcceleratorHighPerformanceNetworkProtocol
  10. 10. GAMEMediaResourceControlIMG VIDEO AUDIO DIV
  11. 11. GAMEPixelControlMechanism CANVAS 2D 3D
  12. 12. GAMEGraphicsAccelerator
  13. 13. GAMEHighPerformanceNetworkProtocol WebSocket
  14. 14. GAMEGettingStartedfunction start() { ...... ?????
  15. 15. 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
  16. 16. CraftySpriteimage
  17. 17. CraftyBackgroundimage
  18. 18. CraftyGettingStartedCrafty.init(50); Frame rateCrafty.canvas();
  19. 19. CraftyGettingStartedCrafty.init(50);Crafty.canvas();
  20. 20. 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] });
  21. 21. 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] });
  22. 22. 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] });
  23. 23. 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] });
  24. 24. Crafty SceneCrafty.scene(main);Crafty.scene(main, function() { Crafty.background(url(bg.png));...
  25. 25. Crafty SceneCrafty.scene(main);Crafty.scene(main, function() { Crafty.background(url(bg.png));...
  26. 26. 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});
  27. 27. 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});
  28. 28. 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});
  29. 29. 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});
  30. 30. 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;
  31. 31. 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;
  32. 32. 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;
  33. 33. 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;
  34. 34. 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;
  35. 35. 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);
  36. 36. 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(); }
  37. 37. 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(); }
  38. 38. 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(); }
  39. 39. 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(); }
  40. 40. 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(); }
  41. 41. Crafty AsteroidCrafty.c(asteroid, { init: function() { this.attr( ... ) .bind(enterframe, function() { ... }) .collision(bullet, function(e) { player.incrementScore(5); }); }});
  42. 42. Crafty AsteroidCrafty.c(asteroid, { init: function() { this.attr( ... ) .bind(enterframe, function() { ... }) .collision(bullet, function(e) { player.incrementScore(5); }); }});
  43. 43. Crafty AsteroidCrafty.c(asteroid, { init: function() { this.attr( ... ) .bind(enterframe, function() { ... }) .collision(bullet, function(e) { player.incrementScore(5); }); }});
  44. 44. Crafty AsteroidCrafty.c(asteroid, { init: function() { this.attr( ... ) .bind(enterframe, function() { ... }) .collision(bullet, function(e) { player.incrementScore(5); }); }});
  45. 45. Crafty StartFinishfor(var i = 0; i 10; i++) { Crafty.e(2D, DOM, big, collision, asteroid);}
  46. 46. 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
  47. 47. 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
  48. 48. HTML5Javascript GAME By min tae, Kim Thank you!

×