Html5 game programming overview
8 likes1,955 views
The document discusses using HTML5 and JavaScript to create games. It provides an overview of key game development concepts like media resource control, graphics acceleration, and networking protocols. It then introduces Crafty, an open source JavaScript game engine, demonstrating how to set up a game scene, control sprites, handle player input, fire bullets, and spawn asteroids using Crafty's component-based system.
![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]
}
);](https://image.slidesharecdn.com/html5-games-webdevmobile-110131024118-phpapp01/85/Html5-game-programming-overview-27-320.jpg)
![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]
}
);](https://image.slidesharecdn.com/html5-games-webdevmobile-110131024118-phpapp01/85/Html5-game-programming-overview-28-320.jpg)
![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]
}
);](https://image.slidesharecdn.com/html5-games-webdevmobile-110131024118-phpapp01/85/Html5-game-programming-overview-29-320.jpg)
![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]
}
);](https://image.slidesharecdn.com/html5-games-webdevmobile-110131024118-phpapp01/85/Html5-game-programming-overview-30-320.jpg)
Html5 game programming overview
- 1. HTML5 Javascript GAME By min tae, Kim
- 3. GAME
- 7. GAME 당신은창조적입니까? 확실해요?
- 10. GAME HTML4 HTML5 MediaResourceControl PixelControlMechanism Programmer Physics GraphicsAccelerator HighPerformanceNetworkProtocol
- 11. GAME MediaResourceControl IMG VIDEO AUDIO DIV
- 12. GAME PixelControlMechanism CANVAS 2D 3D
- 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
- 25. Crafty GettingStarted Crafty.init(50); Frame rate 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!