A Apple fez um movimento crítico quando se optou por dispositivos iOS para usar HTML5 sobre os jogadores em Flash. Apesar das críticas , o HTML5 está começando a tomar forma como uma plataforma incipiente em seu próprio direito , especialmente para a criação de jogos de vídeo. Criando um jogo básico HTML5 requer um pouco de know-how quando se trata de codificação e programação , mas felizmente você não precisa ser um designer de jogos de pleno direito para criar um jogo básico . Coisas que você precisa
Box2D Physics Engine
Show Mais instruções
1

Crie um novo arquivo HTML ( index.html ) em Box2D e copiar os js e lib de projeto Box2D -js para a pasta do jogo. Insira os seguintes arquivos como um arquivo script em seu arquivo HTML:

<- box2djs -> < script src = ' js/box2d/common/b2Settings.js '> < script src =' js /box2d/common/math/b2Mat22.js '> < script src =' js /box2d/collision/b2AABB.js '> < script src =' js/box2d/collision /b2BoundValues.js '> < script src =' js/box2d/collision/b2PairCallback.js ' > < ; script src = ' js/box2d/collision/Features.js '> < /script> < script src = ' js/box2d/collision/b2ContactPoint.js '> < script src = ' js/box2d /collision/b2Manifold.js '> < script src =' js/box2d/collision/b2Proxy . js ' > < script src =' js/box2d/collision/shapes/b2Shape.js '> < script src =' js/box2d/collision/shapes/b2BoxDef.js '> < script src =' js/box2d/collision/shapes/b2CircleShape.js '> < script src =' js/box2d/collision/shapes/b2PolyDef.js '> < script src = ' js/box2d/dynamics/contacts/b2ContactNode.js ' > < script src = ' js/box2d/dynamics/contacts/b2ContactConstraint.js ' > < script src = ' js/box2d/dynamics/contacts/b2ContactRegister.js ' > < script src = ' js/box2d/dynamics/contacts/b2CircleContact.js ' > < script src = ' js/box2d/dynamics/contacts/b2NullContact.js ' > < script src => < script de src ' js/box2d/dynamics/contacts/b2PolyContact.js ' = ' js/box2d/dynamics/b2World.js '> < script src = ' js /box2d/dynamics/joints/b2JointNode.js '> < script src =' js /box2d/dynamics/joints/b2JointDef.js '> < script src =' js /box2d/dynamics/joints/b2DistanceJointDef.js '> < script src =' js /box2d/dynamics/joints/b2GearJoint.js '> < script src =' js /box2d/dynamics/joints/b2MouseJoint.js '> < script src =' js /box2d/dynamics/joints/b2PrismaticJoint.js '> < script src =' js /box2d/dynamics/joints/b2PulleyJoint.js '> < script src =' js /box2d/dynamics/joints/b2RevoluteJoint.js '>
2

Criar mais dois scripts chamados box2dutils.js e game.js dentro do /js /pasta. Insira o seguinte código no box2dutils.js :

função drawWorld ( mundo , context) {for (var j = world.m_jointList ; j; j = j.m_next ) { drawJoint (j, contexto );} para (var b = world.m_bodyList , b, b = b.m_next ) {for (var s = b.GetShapeList (); ! s = null; s = s.GetNext ()) { drawShape (s, contexto );} } } function drawJoint (articulação , context) {var b1 = joint.m_body1 ; var b2 = joint.m_body2 ; var x1 = b1.m_position ; var x2 = b2.m_position ; var p1 = 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; caso b2Joint.e_pulleyJoint : //break TODO ; default : if ( 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 (forma, contexto ) { context.strokeStyle = ' # 000000 '; context.beginPath (); switch ( shape.m_type ) {case b2Shape.e_circleShape : {var círculo = forma ; var pos = circle.m_position ; var r = circle.m_radius ; segmentos var = 16,0 ; var teta = 0,0; var dtheta = 2.0 * math.pi /segmentos ; //desenha círculo context.moveTo ( pos.x + r, pos.y ); for (var i = 0; i < segmentos; i + + ) {var d = new b2Vec2 (r * Math.cos (theta ), r * Math.sin ( theta) ); var v = b2Math.AddVV (pos , d); context.lineTo ( vx , vy ); theta + = dtheta ;} context.lineTo ( pos.x + r, pos.y ); //desenha raio 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; caso b2Shape.e_polyShape : {var poli = forma ; var tV = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV ( poly.m_R , poly.m_vertices [0]) ); contexto. moveTo ( tV.x , tV.y ); for (var i = 0; i 3

Continuar o seguinte código no box2dutils.js :

função createWorld () {var worldAABB = new b2AABB (); worldAABB.minVertex.Set ( -1000 , -1000 ); worldAABB.maxVertex.Set ( 1000, 1000), var gravidade = new b2Vec2 (0 , 300) ; var doSleep = true; var mundo = new b2World ( worldAABB , gravidade, doSleep ); mundo retorno; } function createGround ( mundo ) {var groundSd = new b2BoxDef ( ) ; groundSd.extents.Set ( 1000, 50 ) ; groundSd.restitution = 0,2 ; var groundBd = novo b2BodyDef ( ) ; groundBd.AddShape ( groundSd ) ; groundBd.position.Set ( -500 , 340 ) , com retorno world.CreateBody ( groundBd ) } function createBall (world , x, y) {var ballSd = new b2CircleDef (); ballSd.density = 1,0; ballSd.radius = 20; ballSd.restitution = 1,0; ballSd.friction = 0; var ballBd = new b2BodyDef (); ballBd.AddShape ( ballSd ); ballBd.position.Set (x, y); retornar world.CreateBody ( ballBd ); } function createBox (world , x, y , largura, altura , fixo, userData ) {if (typeof (fixo) == ' indefinido' ) fixa = true; var boxSd = new b2BoxDef (); se boxSd.density = 1,0 ( corrigido! ); boxSd.userData = userData ; boxSd.extents.Set (largura , altura) ; var boxBd = new b2BodyDef (); boxBd.AddShape ( boxSd ); boxBd.position.Set (x, y); retornar world.CreateBody ( boxBd ) }
4

Abra o index.html arquivo e adicionar um elemento de tela 600x400 dentro do elemento do corpo:

< /canvas >

Além disso , game.js referência e box2dutils.js :

vista plaincopy para clipboardprint < script src = ' js ? /game.js '>
5

game.js abertas e insira o seguinte código :

vista plaincopy para clipboardprint //algumas variáveis ​​que vamos ? utilizar nesta demonstração var initid = 0; jogador var = function () { this.object = null; this.canJump = false; }; var mundo ; var ctx ; var canvasWidth ; var canvasHeight ; chaves var = [] //HTML5 evento onLoad Event.observe ( window , 'load', function () { mundo = createWorld ( ) //box2DWorld ctx = $ ( "jogo" ) getContext ( '2 d ') ; . //2 var canvasElm = $ ( 'jogo' ); canvasWidth = parseInt ( canvasElm.width ); canvasHeight = parseInt ( canvasElm.height ); initGame () //3 passo ( ) //4 //5 window.addEventListener (' Keydown ' , HandleKeyDown , true); window.addEventListener (' keyup ' , handleKeyUp , true); });
6

Procure o createWorld function () em boxdutils.js e introduzir este código:

função createWorld ( ) {//aqui criamos nossas configurações mundiais para colisões var worldAABB = new b2AABB (); worldAABB.minVertex.Set ( -1000 , -1000 ); worldAABB.maxVertex.Set (1000 , 1000 ) //definir gravidade vetor var gravidade = new b2Vec2 (0 , 300) ; var doSleep = true; //init nosso mundo e retornar o seu valor var mundo = new b2World ( worldAABB , gravidade, doSleep ); mundo retorno;}
< br > 7

Copie o código abaixo e cole-o game.js para criar definição de forma , criar densidade, formato userData , criar definição corporal, configurar a posição e criar o corpo no mundo do jogo :

função initGame () { //cria duas plataformas grandes createBox ( mundo , 3, 230 , 60, 180 , é verdade, 'chão' ); createBox (world , 560, 360, 50, 50 , é verdade, 'chão' ); //cria pequenas plataformas para (var i = 0; i < 5; i + +) { createBox ( mundo , 150 + ( 80 * i) , 360, 5, 40 + ( i * 15) , é verdade, 'chão' ) ; } //criar jogador de bola var ballSd = new b2CircleDef (); ballSd.density = 0,1; ballSd.radius = 12; ballSd.restitution = 0,5; ballSd.friction = 1; ballSd.userData = ' jogador '; var ballBd = novo b2BodyDef (); ballBd.linearDamping = 0,03 ; ballBd.allowSleep = false; ballBd.AddShape ( ballSd ); ballBd.position.Set ( 20,0 ); player.object = world.CreateBody ( ballBd );} Dentro < ; code> box2dutils.js , nós criamos uma função, chamada createBox . Isso cria um retângulo corpo estático. função createBox (world , x, y , largura, altura , fixo, userData ) {if (typeof (fixo) == ' indefinido' ) fixa = true; //1 var boxSd = new b2BoxDef (); ( ! fixo) se boxSd.density = 1,0; //2 = boxSd.userData userData //3 boxSd.extents.Set ( largura, altura ); //4 var boxBd = new b2BodyDef (); boxBd.AddShape ( boxSd ) //5 boxBd.position.Set (x , y ) //6 retorno world.CreateBody ( boxBd ) }
8

Abrir roteiro game.js e copie e cole o seguinte código para processar tempo : < br >

vista plaincopy para clipboardprint função degrau () {var stepping = false; ? var timeStep = 1.0/60 ; var iteração = 1; //1 world.Step ( timeStep , iteração ) //2 ctx.clearRect ( 0, 0, canvasWidth , canvasHeight ); drawWorld ( mundo , ctx ) //3 setTimeout ( 'step ()' , 10) ;}
9

Insira o seguinte código no box2dutils.js para desenhar "juntas" dos corpos jogador :

função drawWorld ( mundo , context) {for (var j = world.m_jointList ; j; j = j.m_next ) { drawJoint (j, contexto );} para (var b = world.m_bodyList , b, b = b.m_next ) {for (var s = b.GetShapeList (); ! s = null; s = s.GetNext ()) { drawShape (s, contexto );} }}
10

Insira um segundo loop para desenhar todos os corpos :

função drawShape (forma, contexto ) { context.strokeStyle = ' # 000000 '; context.beginPath (); switch ( shape.m_type ) {case b2Shape.e_circleShape : {var círculo = forma ; var pos = circle.m_position ; var r = circle.m_radius ; segmentos var = 16,0 ; var teta = 0,0; var dtheta = 2.0 * Math.PI /segmentos ; //desenha círculo context.moveTo ( pos.x + r, pos.y ); for (var i = 0; i < segmentos; i + + ) {var d = new b2Vec2 (r * Math.cos (theta ), r * Math.sin ( theta) ); var v = b2Math.AddVV (pos , d); context.lineTo ( vx , vy ); theta + = dtheta ;} context.lineTo ( pos.x + r , pos . y); raio //draw 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; caso b2Shape.e_polyShape : {var poli = forma ; var tV = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV (poli . m_R , poly.m_vertices [0]) ); context.moveTo ( tV.x , tV.y ); for (var i = 0; i 11

Criar interatividade em seu jogo com o seguinte código :

função HandleKeyDown ( evt ) { chaves [ evt.keyCode ] = true; } function handleKeyUp ( evt { chaves [ evt.keyCode ] = false ;} ) //desativar a rolagem vertical das setas document.onkeydown = function " wp- smiley" () {return event.keyCode ! = 38 && event.keyCode ! = 40 }
12

jogador Fabricação de detecção de colisão e velocidade , inserindo o seguinte código na etapa function () :

handleInteractions função ( seta) {//se //colisão 1 var = world.m_contactList ; player.canJump = false , se ( colisão = null !) {if ( collision.GetShape1 () GetUserData () == ' jogador '