HTML5Javascript     GAME        By min tae, Kim
GAMEHTML로가능한가?
GAME
GAME무엇이필요할까?
richard garriott
john d. carmack
GAME당신은창조적입니까?   확실해요?
GAMEMediaResourceControlPixelControlMechanismProgrammerPhysicsGraphicsAcceleratorHighPerformanceNetworkProtocol
GAME                                                         HTML4   HTML5MediaResourceControlPixelControlMechanismProgram...
GAMEMediaResourceControlIMG   VIDEO   AUDIO        DIV
GAMEPixelControlMechanism     CANVAS       2D         3D
GAMEGraphicsAccelerator
GAMEHighPerformanceNetworkProtocol             WebSocket
GAMEGettingStartedfunction start() {    ......                 ?????
IsogenicEngine     Akihabara                                           gameQuery    three.js          bdge                ...
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, {       ...
Crafty  PreloadtheresourcesCrafty.load([sprite.png, bg.png],    function() {        Crafty.sprite(64, sprite.png, {       ...
Crafty  SetspritesizeCrafty.load([sprite.png, bg.png],    function() {        Crafty.sprite(64, sprite.png, {            s...
Crafty  DefinespriteobjectCrafty.load([sprite.png, bg.png],    function() {        Crafty.sprite(64, sprite.png, {        ...
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  Scoredisplayvar score = Crafty.e(2D, DOM, text)    .text(Score: 0)    .attr({x: Crafty.viewport.width - 300,     y...
Crafty  Scoredisplayvar score = Crafty.e(2D, DOM, text)    .text(Score: 0)    .attr({x: Crafty.viewport.width - 300,     y...
Crafty  Scoredisplayvar score = Crafty.e(2D, DOM, text)    .text(Score: 0)    .attr({x: Crafty.viewport.width - 300,     y...
Crafty   Playervar player = Crafty.e(    2D, canvas, ship, controls, collision, score)    .attr({move: {left: false, right...
Crafty   Playervar player = Crafty.e(    2D, canvas, ship, controls, collision, score)    .attr({move: {left: false, right...
Crafty   Playerattributevar player = Crafty.e(    2D, canvas, ship, controls, collision, score)    .attr({move: {left: fal...
Crafty   Bindkeyboardeventhandlervar player = Crafty.e(    2D, canvas, ship, controls, collision, score)    .attr({move: {...
Crafty   Bindkeyboardeventhandlervar player = Crafty.e(    2D, canvas, ship, controls, collision, score)    .attr({move: {...
CraftyActioncontrol.attr({move: {left: false, right: false, up: false,    down: false}, xspeed: 0, yspeed: 0,    x: 100, 1...
Crafty   Firebulletif(e.keyCode === Crafty.keys.SP) {    Crafty.e(2D, DOM, color, bullet)    .color(rgb(255, 0, 0))    .bi...
Crafty   Firebulletif(e.keyCode === Crafty.keys.SP) {    Crafty.e(2D, DOM, color, bullet)    .color(rgb(255, 0, 0))    .bi...
Crafty   Firebulletif(e.keyCode === Crafty.keys.SP) {    Crafty.e(2D, DOM, color, bullet)    .color(rgb(255, 0, 0))    .bi...
Crafty   Firebulletif(e.keyCode === Crafty.keys.SP) {    Crafty.e(2D, DOM, color, bullet)    .color(rgb(255, 0, 0))    .bi...
Crafty   Firebulletif(e.keyCode === Crafty.keys.SP) {    Crafty.e(2D, DOM, color, bullet)    .color(rgb(255, 0, 0))    .bi...
Crafty   AsteroidCrafty.c(asteroid, {    init: function() {        this.attr( ... )        .bind(enterframe, function() { ...
Crafty   AsteroidCrafty.c(asteroid, {    init: function() {        this.attr( ... )        .bind(enterframe, function() { ...
Crafty   AsteroidCrafty.c(asteroid, {    init: function() {        this.attr( ... )        .bind(enterframe, function() { ...
Crafty   AsteroidCrafty.c(asteroid, {    init: function() {        this.attr( ... )        .bind(enterframe, function() { ...
Crafty   StartFinishfor(var i = 0; i  10; i++) {    Crafty.e(2D, DOM, big, collision, asteroid);}
IsogenicEngine     Akihabara                                           gameQuery    three.js          bdge                ...
IsogenicEngine     Akihabara                                           gameQuery    three.js          bdge                ...
HTML5Javascript     GAME        By min tae, Kim Thank you!
Html5 game programming overview
Html5 game programming overview
Html5 game programming overview
Html5 game programming overview
Html5 game programming overview
Html5 game programming overview
Html5 game programming overview
Upcoming SlideShare
Loading in...5
×

Html5 game programming overview

3,655

Published on

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

No Downloads
Views
Total Views
3,655
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "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!

×