Apple gjorde ett kritiskt drag när det valde iOS-enheter att använda HTML5 över Flash spelare . Trots kritiken , är HTML5 börjar ta form som en fledging plattform i sin egen rätt , särskilt för att skapa videospel . Skapa en grundläggande HTML5 spel kräver lite know -how när det gäller kodning och programmering , men lyckligtvis du behöver inte vara en fullfjädrad speldesigner att skapa en grundläggande spelet . Saker du behöver
Box2D fysikmotor
Visa fler instruktioner
1
Skapa en ny HTML -fil ( index.html ) i Box2D och kopiera js och lib kataloger från Box2D - js projektet till ditt spel mappen . Sätt följande filer som en script -fil i din HTML -fil :
< - ! [ Om IE ] > < 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 >
5
Öppna game.js och infoga följande kod : ?
view plaincopy till clipboardprint //vissa variabler som vi gonna användning i denna demo var initId = 0; var spelare = function ( ) { this.object = null; this.canJump = false; } , var världen , var ctx , var canvasWidth , var canvasHeight , var- tangenter = [ ] ; //HTML5 onLoad Event.observe ( window , ' load ' , function ( ) { världen = createWorld ( ) , //box2DWorld ctx = $ ( "spelet" ) getContext ( '2 d '); . //2 var canvasElm = $ ( "spelet" ) ; canvasWidth = parseInt ( canvasElm.width ) , canvasHeight = parseInt ( canvasElm.height ) , initGame ( ) , //3 steg ( ) , //4 //5 window.addEventListener ( ' keyDown ' , handleKeyDown , true ) ; window.addEventListener ( ' keyUp ' , handleKeyUp , true ) ;} ) ;
6
Sök för createWorld ( ) funktionen i boxdutils.js och input här koden :
funktionen createWorld ( ) { //här skapar vi vår värld inställningar för kollisioner var worldAABB = ny b2AABB ( ) ; worldAABB.minVertex.Set ( -1000 , -1000 ) , worldAABB.maxVertex.Set (1000 , 1000), //ställa gravitation vektor var gravitation = ny b2Vec2 ( 0 , 300 ), var doSleep = true; //init vår värld och returnera dess värde var världen = ny b2World ( worldAABB , gravitation , doSleep ) , återvändande världen ; }
7
Kopiera koden nedan och klistra in den på game.js att skapa form definition , inrätta densitet , format userData , skapar kroppen definition , ställa in positionen och skapa kroppen i spelvärlden :
funktionen initGame ( ) { //skapa två stora plattformar createBox ( värld , 3 , 230 , 60 , 180 , true , ' mark '); createBox ( värld , 560 , 360 , 50 , 50 , true , ' mark ' ) ; //skapa små plattformar for (var i = 0 ; i < 5 , i + + ) { createBox ( värld , 150 + ( 80 * i) , 360 , 5 , 40 + (i * 15 ) , true , ' mark ' ) ; } //skapa spelare bollen var ballSd = ny b2CircleDef ( ) ; ballSd.density = 0,1; ballSd.radius = 12 ; ballSd.restitution = 0.5; ballSd.friction = 1 ; ballSd.userData = ' spelare ' , var ballBd = nya b2BodyDef ( ) ; ballBd.linearDamping = .03 ; ballBd.allowSleep = false; ballBd.AddShape ( ballSd ) , ballBd.position.Set ( 20,0 ) , player.object = world.CreateBody ( ballBd ) ;} Inside < ; code > box2dutils.js < /code > , vi har skapat en funktion som heter createBox < /code > . Detta skapar en statisk rektangel kropp . Funktionen createBox ( värld , x , y , bredd , höjd , fast , userData ) {if ( typeof ( fast ) == ' undefined ' ) fast = true; //1 var boxSd = ny b2BoxDef ( ) , om ( fast ! ) boxSd.density = 1,0 , //2 boxSd.userData = userData , //3 boxSd.extents.Set ( bredd , höjd ) , //4 var boxBd = ny b2BodyDef ( ) ; boxBd.AddShape ( boxSd ) , //5 boxBd.position.Set ( x , y ) , //6 retur world.CreateBody ( boxBd ) }
8 Open game.js manus och kopiera och klistra in följande kod för att göra tid :
view plaincopy till clipboardprint funktion steg ( ) {var stepping = false; var tidssteg = 1.0/60 , var iteration = 1 ; //1 world.Step ( tidssteg , iteration ) , //2 ctx.clearRect ( 0 , 0 , canvasWidth , canvasHeight ) ; drawWorld ( världen , ctx ) , //3 setTimeout ( " steg ( ) " , 10 ) ; }
9
Infoga följande kod i box2dutils.js till dra " skarvar " av spelare organ :
funktion drawWorld ( världen , kontext ) { for (var j = world.m_jointList , j ; j = j.m_next ) { drawJoint ( j , sammanhang ) ; } för (var b = world.m_bodyList , b , b = b.m_next ) { for (var s = b.GetShapeList (); ! s = null; s = s.GetNext ( )) { drawShape (s, sammanhang) ;} } }
10
Infoga en andra slinga för att dra alla organ :
funktion drawShape ( form , kontext ) { context.strokeStyle = ' # 000000 ' ; context.beginPath ( ) ; switch ( shape.m_type ) { case b2Shape.e_circleShape : {var cirkel = form , var pos = circle.m_position , var r = circle.m_radius , var- segment = 16.0 , var theta = 0.0 , var dtheta = 2,0 * Math.PI /segment , //rita cirkeln context.moveTo ( pos.x + R , pos.y ) , for (var i = 0 ; i. < segment , 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 ) , //rita radie context.moveTo ( pos.x , pos.y ) , var yxa = circle.m_R.col1 , var POS2 = ny b2Vec2 ( pos.x + r * ax.x , pos.y + R * ax.y ) , context.lineTo ( pos2.x , pos2.y ) ;} break; case b2Shape.e_polyShape : {var poly = form , 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
Skapa interaktivitet i ditt spel med följande kod :
funktion handleKeyDown ( evt ) { knapparna [ evt.keyCode ] = true ; } funktion handleKeyUp ( evt ) { knapparna [ evt.keyCode ] = false; } //avaktivera vertikal rullning från pilar < img src = " http://net.tutsplus.com/wp-includes/images/smilies/icon_smile.gif " alt = " :) " class = " wp - smiley " > document.onkeydown = function ( ) {return event.keyCode ! = 38 && event.keyCode ! = 40 }
12
Tillverkning spelare kollisioner och hastigheten genom att mata in följande kod i steget ( ) funktionen :
funktion handleInteractions ( ) { //upp pil //1 var kollision = world.m_contactList , player.canJump = false , om ( kollision = null ) { if ( collision.GetShape1 ( ) GetUserData ( ) == ' player '
