1. HTML5
Javascript
GAME
By min tae, Kim

2. GAME
HTML로가능한가?

3. GAME

4. GAME
무엇이필요할까?

5. richard garriott

6. john d. carmack

7. GAME
당신은창조적입니까?
확실해요?

9. GAME
MediaResourceControl
PixelControlMechanism
Programmer
Physics
GraphicsAccelerator
HighPerformanceNetworkProtocol

10. GAME
HTML4 HTML5
MediaResourceControl
PixelControlMechanism
Programmer
Physics
GraphicsAccelerator
HighPerformanceNetworkProtocol

11. GAME
MediaResourceControl
IMG VIDEO
AUDIO
DIV

12. GAME
PixelControlMechanism
CANVAS
2D
3D

13. GAME
GraphicsAccelerator

14. GAME
HighPerformanceNetworkProtocol
WebSocket

17. GAME
GettingStarted
function start() {
......
?????

19. IsogenicEngine
Akihabara gameQuery
three.js bdge JS3D GameJs
PropulsionJS TheRenderEngine Flax
Aves Tom'sHalls js-verge CopperLicht
Cocos2D GLGE GammaJS
ClanFX jGen RocketEngine
Canvex
Sarien.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

22. Crafty
Spriteimage

24. Crafty
Backgroundimage

25. Crafty
GettingStarted
Crafty.init(50); Frame rate
Crafty.canvas();

26. Crafty
GettingStarted
Crafty.init(50);
Crafty.canvas();

27. Crafty
Preloadtheresources
Crafty.load([sprite.png, bg.png],
function() {
Crafty.sprite(64, sprite.png, {
ship: [0,0],
big: [1,0],
medium: [2,0],
small: [3,0]
}
);

28. Crafty
Preloadtheresources
Crafty.load([sprite.png, bg.png],
function() {
Crafty.sprite(64, sprite.png, {
ship: [0,0],
big: [1,0],
medium: [2,0],
small: [3,0]
}
);

29. Crafty
Setspritesize
Crafty.load([sprite.png, bg.png],
function() {
Crafty.sprite(64, sprite.png, {
ship: [0,0],
big: [1,0],
medium: [2,0],
small: [3,0]
}
);

30. Crafty
Definespriteobject
Crafty.load([sprite.png, bg.png],
function() {
Crafty.sprite(64, sprite.png, {
ship: [0,0],
big: [1,0],
medium: [2,0],
small: [3,0]
}
);

31. Crafty
Scene
Crafty.scene(main);
Crafty.scene(main, function() {
Crafty.background(url('bg.png'));
...

32. Crafty
Scene
Crafty.scene(main);
Crafty.scene(main, function() {
Crafty.background(url('bg.png'));
...

33. Crafty
Scoredisplay
var 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}
);

34. Crafty
Scoredisplay
var 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}
);

35. Crafty
Scoredisplay
var 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}
);

36. Crafty
Scoredisplay
var 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})
;

37. Crafty
Player
var 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;

38. Crafty
Player
var 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;

39. Crafty
Playerattribute
var 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;

40. Crafty
Bindkeyboardeventhandler
var 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;

41. Crafty
Bindkeyboardeventhandler
var 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;

42. Crafty
Actioncontrol
.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);

43. Crafty
Firebullet
if(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();
}

44. Crafty
Firebullet
if(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();
}

45. Crafty
Firebullet
if(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();
}

46. Crafty
Firebullet
if(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();
}

47. Crafty
Firebullet
if(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();
}

48. Crafty
Asteroid
Crafty.c(asteroid, {
init: function() {
this.attr( ... )
.bind(enterframe, function() { ... })
.collision(bullet, function(e) {
player.incrementScore(5);
});
}
});

49. Crafty
Asteroid
Crafty.c(asteroid, {
init: function() {
this.attr( ... )
.bind(enterframe, function() { ... })
.collision(bullet, function(e) {
player.incrementScore(5);
});
}
});

50. Crafty
Asteroid
Crafty.c(asteroid, {
init: function() {
this.attr( ... )
.bind(enterframe, function() { ... })
.collision(bullet, function(e) {
player.incrementScore(5);
});
}
});

51. Crafty
Asteroid
Crafty.c(asteroid, {
init: function() {
this.attr( ... )
.bind(enterframe, function() { ... })
.collision(bullet, function(e) {
player.incrementScore(5);
});
}
});

52. Crafty
StartFinish
for(var i = 0; i 10; i++) {
Crafty.e(2D, DOM, big, collision, asteroid);
}

53. IsogenicEngine
Akihabara gameQuery
three.js bdge JS3D GameJs
PropulsionJS Crafty Flax
Aves Tom'sHalls js-verge CopperLicht
Cocos2D GLGE GammaJS
ClanFX jGen RocketEngine
Canvex
Sarien.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

54. IsogenicEngine
Akihabara gameQuery
three.js bdge JS3D GameJs
PropulsionJS Crafty Flax
Aves Tom'sHalls js-verge CopperLicht
Cocos2D GLGE GammaJS
ClanFX jGen RocketEngine
Canvex
Sarien.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

55. HTML5
Javascript
GAME
By min tae, Kim
Thank you!