Contenu connexe
Similaire à Html5 game programming overview (20)
Html5 game programming overview
- 10. GAME
HTML4 HTML5
MediaResourceControl
PixelControlMechanism
Programmer
Physics
GraphicsAccelerator
HighPerformanceNetworkProtocol
- 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
- 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]
}
);
- 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