Apple a fait un mouvement critique quand il a opté pour les appareils iOS à utiliser HTML5 sur les joueurs Flash. En dépit des critiques , HTML5 commence à prendre forme comme une plate-forme naissante dans son propre droit , en particulier pour la création de jeux vidéo. Création d'un jeu de HTML5 de base ne nécessite un peu de savoir-faire quand il s'agit de codage et de programmation , mais heureusement, vous n'avez pas à être un créateur de jeu à part entière pour créer un jeu de base . Choses que vous devez
Box2D Physics Engine
Voir Plus Instructions
1

créer un nouveau fichier HTML (index.html ) dans Box2D et copier le js et répertoires lib de projet Box2D -js à votre dossier de jeu . Insérez les fichiers suivants dans un seul fichier de script dans votre fichier HTML:

< [endif] -> < script de src = ' js/box2d/common/b2Settings.js > < script de src = " js /box2d/common/math/b2Mat22.js > < script de src = " js /box2d/collision/b2AABB.js > < script de src = ' js/box2d/collision /b2BoundValues.js > < script de src = ' js/box2d/collision/b2PairCallback.js ' > < , le script src = ' js/box2d/collision/Features.js > < script de src = « js/box2d/collision/b2ContactPoint.js > < script de src = ' js/box2d /collision/b2Manifold.js > < script de src = ' js/box2d/collision/b2Proxy js . '> < /script> < script de src = js/box2d/collision/shapes/b2Shape.js » > < /script> < script de src = js/box2d/collision/shapes/b2BoxDef.js » > < /script> < script de src = js/box2d/collision/shapes/b2CircleShape.js » > < /script> < script de src = js/box2d/collision/shapes/b2PolyDef.js > < le script src = ' js/box2d/dynamics/contacts/b2ContactNode.js > < le script src = " js/box2d/dynamics/contacts/b2ContactConstraint.js > < le script src = ' js/box2d/dynamics/contacts/b2ContactRegister.js > < le script src = ' js/box2d/dynamics/contacts/b2CircleContact.js > < le script src = ' js/box2d/dynamics/contacts/b2NullContact.js > < le script src = ' js/box2d/dynamics/contacts/b2PolyContact.js > < script de src = ' js/box2d/dynamics/b2World.js > < script de src = " js /box2d/dynamics/joints/b2JointNode.js > < script de src = " js /box2d/dynamics/joints/b2JointDef.js > < script de src = " js /box2d/dynamics/joints/b2DistanceJointDef.js > < script de src = " js /box2d/dynamics/joints/b2GearJoint.js > < script de src = " js /box2d/dynamics/joints/b2MouseJoint.js > < script de src = " js /box2d/dynamics/joints/b2PrismaticJoint.js > < script de src = " js /box2d/dynamics/joints/b2PulleyJoint.js > < script de src = " js /box2d/dynamics/joints/b2RevoluteJoint.js >
2 < p> Créez deux scripts appelés box2dutils.js et game.js dans le répertoire /js /dossier. Insérez le code suivant dans box2dutils.js :
fonction

drawWorld ( monde , context) { for (var j = world.m_jointList ; j; j = j.m_next ) { drawJoint (j, contexte );} pour (var b = world.m_bodyList , b, b = b.m_next ) { for (var s = b.GetShapeList (); ! s = null; s = s.GetNext ()) { drawShape (s, contexte );} } } function drawJoint ( conjoint , context) {var b1 = joint.m_body1 ; var b2 = joint.m_body2 ; var x1 = b1.m_position ; var x2 = b2.m_position ; p1 var = joint.GetAnchor1 (); var p2 = joint.GetAnchor2 (); context.strokeStyle = ' # 00eeee '; context.beginPath (); switch ( joint.m_type ) {case b2Joint.e_distanceJoint : context.moveTo ( P1.x , p1.y ) ; context.lineTo ( P2.x , p2.y ) ; break; cas b2Joint.e_pulleyJoint : //TODO break; par défaut: si (b1 == world.m_groundBody ) { context.moveTo ( P1.x , p1.y ) ; context.lineTo ( x2.x , x2.y );} else if ( b2 == world.m_groundBody ) { context.moveTo ( P1.x , p1.y ) ; context.lineTo ( x1.x , x1.y );} else { context.moveTo ( x1.x , x1.y ) ; context.lineTo ( P1.x , p1.y ) ; context.lineTo ( x2.x , x2.y ) ; context.lineTo ( P2.x , p2.y );} break; } context.stroke (); } function drawShape (forme, contexte ) { context.strokeStyle = ' # 000000' ; context.beginPath (); switch ( shape.m_type ) {case b2Shape.e_circleShape : {var cercle = forme ; var pos = circle.m_position ; var r = circle.m_radius ; var segments = 16,0 ; var thêta = 0,0 ; var dtheta = 2.0 * Math.PI /segments; //Tracer le cercle context.moveTo ( pos.x + r , pos.y ) ; for (var i = 0; i < segments; i + + ) {var d = new b2Vec2 (r * Math.cos (thêta ) , r * Math.sin (thêta ) ) ; var v = b2Math.AddVV (pos , d); context.lineTo ( vx , vy ) ; theta + = dtheta ;} context.lineTo ( pos.x + r , pos.y ) ; //Dessine rayon context.moveTo (pos. x , pos.y ) ; var = ax circle.m_R.col1 ; var POS2 = new b2Vec2 ( pos.x + r * ax.x , pos.y + r * ax.y ) ; context.lineTo ( pos2.x , pos2.y );} break; cas b2Shape.e_polyShape : {var poly = forme ; var tV = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV ( poly.m_R , poly.m_vertices [ 0 ] ) ) ; contexte. moveTo ( tV.x , tV.y ); for (var i = 0; i < poly.m_vertexCount ; i + + ) {var v = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV ( poly.m_R , poly.m_vertices [i]) ) ; context.lineTo ( vx , vy );} context.lineTo ( tV.x , tV.y );} break; } context.stroke ();}
3

Continuer le code suivant dans box2dutils.js :
fonction createWorld

() { var = new worldAABB b2AABB (); worldAABB.minVertex.Set (-1000 , -1000 ) ; worldAABB.maxVertex.Set ( 1000, 1000 ) ; var gravité = new b2Vec2 (0, 300); var doSleep = true; var monde = new b2World ( worldAABB , la gravité, doSleep ) ; monde de retour; } function createGround ( monde ) {var groundSd = new b2BoxDef ( ) ; groundSd.extents.Set (1000 , 50) ; groundSd.restitution = 0,2 ; var groundBd = new b2BodyDef (); groundBd.AddShape ( groundSd ) ; groundBd.position.Set (-500 , 340) ; retour world.CreateBody ( groundBd ) } function createBall ( monde , x , y) {var = new ballSd b2CircleDef (); ballSd.density = 1,0; ballSd.radius = 20; ballSd.restitution = 1,0; ballSd.friction = 0; var = new ballBd b2BodyDef (); ballBd.AddShape ( ballSd ) ; ballBd.position.Set (x, y); retour world.CreateBody ( ballBd ) ; } function createBox ( monde , x , y, largeur, hauteur, fixe, userData ) {if (typeof (fixe) == ' undefined ') fixe = true; var boxSd = new b2BoxDef (); ( ! fixe) si boxSd.density = 1,0; boxSd.userData = userData ; boxSd.extents.Set ( largeur, hauteur) ; var boxBd = new b2BodyDef (); boxBd.AddShape ( boxSd ) ; boxBd.position.Set (x, y); retour world.CreateBody ( boxBd ) }
4

Ouvrir le fichier index.html déposer et ajouter un élément de toile 600x400 dans l'élément du corps :

Photos < p > En outre , game.js et box2dutils.js référence :
vue

plaincopy à clipboardprint < script de src = " js /game.js '>
5

game.js ouvertes et insérez le code suivant :
vue

plaincopy à clipboardprint //des variables qui nous va utiliser dans cette démo var initid = 0; joueur var = function () { this.object = null; this.canJump = false; }; monde var ; CTX var , var canvasWidth ; var canvasHeight ; touches var = []; //HTML5 onLoad événement Event.observe (window, ' load', function () { monde = createWorld (); //box2DWorld ctx = $ (' jeu ') getContext ('2 d '); . //2 var canvasElm = $ ( 'jeu' ) ; canvasWidth = parseInt ( canvasElm.width ) ; canvasHeight = parseInt ( canvasElm.height ) ; initGame (); //3 étape (); //4 //5 window.addEventListener (« KeyDown », HandleKeyDown , true); window.addEventListener (' keyup », handleKeyUp , true); });
6

Recherche de la fonction dans boxdutils.js createWorld () et saisir le code suivant:
< p > fonction createWorld () { //ici nous créons nos paramètres mondiaux de collisions var worldAABB = new b2AABB (); worldAABB.minVertex.Set (-1000 , -1000 ) ; worldAABB.maxVertex.Set (1000 , 1000) ; //définir la gravité vecteur var gravité = new b2Vec2 (0, 300); var doSleep = true; //init notre monde et retourne son monde var = valeur nouvelle b2World ( worldAABB , la gravité, doSleep ) ; monde de retour; }
< br > 7

Copiez le code ci-dessous et collez le dans game.js pour créer la définition de la forme, la mise en place densité , le format userData , créer la définition du corps , mis en place la position et de créer le corps dans le monde du jeu :
< p > fonction initGame () { //créer 2 plates-formes grand createBox ( monde , 3, 230 , 60, 180, vrai, «terrain» ) ; createBox ( monde , 560, 360, 50, 50 , vrai, «terrain» ) ; //créer de petites plates-formes for (var i = 0; i < 5; i + +) { createBox ( monde , 150 + (80 * i) , 360, 5, 40 + (i * 15) , c'est vrai, «terrain» ) ;} //créer joueur balle var ballSd = new b2CircleDef (); ballSd.density = 0,1 ; ballSd.radius = 12; ballSd.restitution = 0,5 ; ballSd.friction = 1; ballSd.userData = 'player' ; var = ballBd nouveau b2BodyDef (); ballBd.linearDamping = .03 ; ballBd.allowSleep = false; ballBd.AddShape ( ballSd ) ; ballBd.position.Set (20,0 ) ; player.object = world.CreateBody ( ballBd );} Inside < ; code> box2dutils.js , nous avons créé une fonction, appelée createBox . Cela crée un corps de rectangle statique. fonction createBox ( monde , x , y, largeur, hauteur, fixe, userData ) {if ( typeof ( fixe) == ' undefined ') fixe = true; //1 var = new boxSd b2BoxDef (); if ( fixe !) boxSd.density = 1.0; //2 = boxSd.userData userData ; //3 boxSd.extents.Set ( largeur, hauteur) ; //4 var boxBd = new b2BodyDef (); boxBd.AddShape ( boxSd ) ; //5 boxBd.position.Set (x, y); //6 retour world.CreateBody ( boxBd ) }
8

Ouvert script game.js et copier-coller le code suivant dans le temps de rendu : < br step> vue

plaincopy à clipboardprint d' function () {var stepping = false; ? var TimeStep = 1.0/60 ; var itération = 1 //1 world.Step ( TimeStep , itération) ; //2 ctx.clearRect ( 0, 0, canvasWidth , canvasHeight ) ; drawWorld ( monde , ctx ) ; //3 setTimeout ( 'step () ', 10 );}
9

Insérez le code suivant dans box2dutils.js à dessiner "joints" des organes de joueurs :
fonction

drawWorld ( monde , context) { for (var j = world.m_jointList ; j; j = j.m_next ) { drawJoint (j, contexte );} pour (var b = world.m_bodyList , b, b = b.m_next ) { for (var s = b.GetShapeList (); ! s = null; s = s.GetNext ()) { drawShape (s, contexte );} }}
10

Insérez une deuxième boucle de tirer tous les organes :
fonction drawShape

(forme, contexte ) { context.strokeStyle = ' # 000000' ; context.beginPath (); switch ( shape.m_type ) {case b2Shape.e_circleShape : {var = cercle forme ; var pos = circle.m_position ; var r = circle.m_radius ; var segments = 16,0 ; var thêta = 0,0 ; var dtheta = 2,0 * Math.PI /segments ; //Tracer le cercle context.moveTo ( pos.x + r , pos.y ) ; for (var i = 0; i < segments; i + + ) {var d = new b2Vec2 (r * Math.cos (thêta ) , r * Math.sin (thêta ) ) ; var v = b2Math.AddVV (pos , d); context.lineTo ( vx , vy ) ; theta + = dtheta ;} context.lineTo ( pos.x + r , pos . y); //dessiner rayon context.moveTo ( pos.x , pos.y ) ; var = ax circle.m_R.col1 ; var POS2 = new b2Vec2 ( pos.x + r * ax.x , pos.y + r * ax.y ) ; context.lineTo ( pos2.x , pos2.y );} break; cas b2Shape.e_polyShape : {var poly = forme ; var tV = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV (poly . m_R , poly.m_vertices [0]) ) ; context.moveTo ( tV.x , tV.y ) ; for (var i = 0; i < poly.m_vertexCount ; i + + ) {var v = b2Math.AddVV (poly . m_position , b2Math.b2MulMV ( poly.m_R , poly.m_vertices [i]) ) ; context.lineTo ( vx , vy );} context.lineTo ( tV.x , tV.y );} break; } context.stroke ();}
11

créer de l'interactivité dans le jeu avec le code suivant :
fonction

HandleKeyDown (evt ) { touches [ evt.keyCode ] = true; } function handleKeyUp ( EVT ) { touches [ evt.keyCode ] = false; } //désactiver le défilement vertical des flèches document.onkeydown = function () { event.keyCode de retour ! = 38 && event.keyCode ! = 40}
12 < p> Fabrication détection de collision de joueur et de la vitesse en entrant le code suivant dans l'étape () fonction : Photos handleInteractions de la fonction

() { //flèche vers le haut //1 var = collision world.m_contactList ; player.canJump = false if ( collision = null ! ) {if ( collision.GetShape1 () getUserData () == 'player'