Apple lavet en kritisk tiltag, når det valgte iOS enheder til at bruge HTML5 i løbet af flash -afspillere. På trods af den kritik , der er HTML5 begyndt at tage form som en fledging platform i sin egen ret , især for at skabe videospil. Oprettelse af et grundlæggende HTML5 spil kræver en smule af know -how , når det kommer til kodning og programmering , men heldigvis behøver du ikke at være et fuldgyldigt game designer til at skabe en grundlæggende spil . Ting du skal
Box2D fysikmotor
Vis Flere Instruktioner
1

Opret en ny HTML-fil ( index.html ) i Box2D og kopiere js og lib mapper fra Box2D - js projekt til dit spil mappe. Indsæt følgende filer som én script-fil ind i din HTML-fil : Hej

<- [ hvis IE ] > < [ endif ] -> <- 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 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 = ' js/box2d/dynamics/contacts/b2PolyContact.js '> < script src = ' 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 < p > Opret to scripts kaldet box2dutils.js og game.js inde i /js /mappe . Indsæt følgende kode i box2dutils.js : Hej

funktion drawWorld ( verden , kontekst ) { for (var j = world.m_jointList j j = j.m_next ) { drawJoint ( j, sammenhæng) ;} for (var b = world.m_bodyList b b = b.m_next ) { for (var s = b.GetShapeList (); ! s = null s = s.GetNext ( )) { TegnForm (s, ​​sammenhæng) ;} }} funktionen drawJoint (fælles , kontekst) {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 (); kontakt ( joint.m_type ) { sag b2Joint.e_distanceJoint : context.moveTo ( p1.x , p1.y ) ; context.lineTo ( p2.x , p2.y ) break; sag b2Joint.e_pulleyJoint : //TODO break; standard : 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 ( );} funktionen TegnForm (form , kontekst ) { context.strokeStyle = ' # 000000 « context.beginPath (); kontakt ( shape.m_type ) { tilfælde b2Shape.e_circleShape : {var cirkel = form, var pos = circle.m_position ; vAR r = circle.m_radius ; vAR segmenter = 16,0 , var theta = 0,0 , var dtheta = 2,0 * Math.PI /segmenter //draw cirkel context.moveTo ( pos.x + r, pos.y ), for (var i = 0; i < segmenter 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 ) //trække radius 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; tilfælde b2Shape.e_polyShape : {var poly = form, var tV = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV ( poly.m_R , poly.m_vertices [ 0 ] )), kontekst. 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

Fortsæt følgende kode i box2dutils.js : Hej

funktion createWorld () {var worldAABB = new b2AABB (); worldAABB.minVertex.Set ( -1000 , -1000 ) ; worldAABB.maxVertex.Set ( 1000, 1000), var tyngdekraften = new b2Vec2 (0, 300 ), var doSleep = true; var verden = new b2World ( worldAABB , tyngdekraft , doSleep ) tilbagevenden verden ;} funktion createGround ( verden) {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) ; tilbagevenden world.CreateBody ( groundBd ) } funktionen createBall ( verden , 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) , tilbagesendelsespolitik world.CreateBody ( ballBd );} funktionen createBox ( verden, x, y , bredde, højde , faste userdata ) {if ( typeof (fast) == ' udefineret ' ) fast = true; var boxSd = new b2BoxDef (); ( ! fixed) hvis boxSd.density = 1,0; boxSd.userData = userdata , boxSd.extents.Set (bredde , højde) , var boxBd = new b2BodyDef (); boxBd.AddShape ( boxSd ) boxBd.position.Set (x, y) , tilbagesendelsespolitik world.CreateBody ( boxBd ) }
4

Åbn index.html fil og tilføje en 600x400 lærred element i kroppen element : Hej

< p> Også , reference game.js og box2dutils.js : ?

view plaincopy til clipboardprint < script src = ' js /game.js '>
5

Åbne game.js og sæt den følgende kode: ?

view plaincopy til clipboardprint //nogle variabler , som vi tage bruge i denne demo var initId = 0 var player = function () { this.object = null ; this.canJump = false; }; var verden, var ctx , var canvasWidth , var canvasHeight , vAR taster = [ ] //HTML5 onLoad begivenhed Event.observe ( vinduet , »belastning« , function () { verden = createWorld () //box2DWorld ctx = $ (' spil' ) getContext ( '2 d ' ) . //2 var canvasElm = $ ( 'spil '); canvasWidth = parseInt ( canvasElm.width ) canvasHeight = parseInt ( canvasElm.height ) initGame () //3 trin ( ) //4 //5 window.addEventListener ( ' keydown ' handleKeyDown , sand) , window.addEventListener ( ' keyup ' handleKeyUp , true );} )
6

Søg efter createWorld ( ) funktion i boxdutils.js og indtaste denne kode : Hej

funktionen createWorld () { //her vi skaber vores verden indstillinger for kollisioner var worldAABB = new b2AABB (); worldAABB.minVertex.Set ( -1000 , -1000 ), worldAABB.maxVertex.Set (1000 , 1000 ) //sæt tyngdekraften vektor var tyngdekraften = new b2Vec2 (0, 300 ), var doSleep = true //init vores verden og returnere sin værdi var verden = new b2World ( worldAABB , tyngdekraft , doSleep ) tilbagevenden verden ;}
< br > 7.

Kopier koden herunder og indsæt den på game.js at skabe formen definition , der er nedsat tæthed , format userdata , oprette kroppens definition opsætte position og skabe kroppen i spillets verden : Hej

funktionen initGame () { //opretter 2 store platforme createBox ( verden , 3, 230 , 60 , 180, sandt, "ground '); createBox ( verden, 560, 360 , 50 , 50, sandt, " ground '); //skabe små platforme for (var i = 0; i < 5; i + +) { createBox ( verden , 150 + ( 80 * i) , 360 , 5, 40 + ( i * 15) , sande , ' jorden' ) ;} //skabe player bold var ballSd = new b2CircleDef (); ballSd.density = 0.1 , ballSd.radius = 12, ballSd.restitution = 0,5; ballSd.friction = 1 ballSd.userData = ' player ' , var ballBd = nye b2BodyDef (); ballBd.linearDamping = .03 ; ballBd.allowSleep = false; ballBd.AddShape ( ballSd ) ballBd.position.Set ( 20,0 ), player.object = world.CreateBody ( ballBd );} Inside < ; code > box2dutils.js , vi har oprettet en funktion , kaldet createBox . Dette skaber en statisk rektangel krop . Funktionen createBox ( verden, x, y , bredde, højde , faste userdata ) { if ( typeof (fast) == ' udefineret ' ) fast = true //1 var boxSd = new b2BoxDef ( ), og hvis (fast !) boxSd.density = 1,0 //2 boxSd.userData = userdata //3 boxSd.extents.Set ( bredde, højde ) //4 var boxBd = new b2BodyDef (); boxBd.AddShape ( boxSd ) //5 boxBd.position.Set (x, y ) //6 retur world.CreateBody ( boxBd ) }
8

Open game.js script og kopiere og indsætte følgende kode til at gøre tid : < br >

view plaincopy til clipboardprint funktion trin ( ) {var stepping = false; var tidsskridt = 1.0/60 , var iteration = 1 //1 world.Step ( tidsskridt , iteration ) //2 ctx.clearRect ( 0, 0, canvasWidth , canvasHeight ), drawWorld ( verden, ctx ) //3 setTimeout ( trin ( ) " , 10) ;}
9

Indsæt følgende kode i box2dutils.js til tegne " samlinger " af spilleren organer : Hej

funktion drawWorld ( verden , kontekst ) { for (var j = world.m_jointList j j = j.m_next ) { drawJoint ( j, sammenhæng) ;} for (var b = world.m_bodyList b b = b.m_next ) { for (var s = b.GetShapeList (); ! s = null s = s.GetNext ( )) { TegnForm (s, ​​sammenhæng) ;} }}
10

Indsæt en anden sløjfe til at trække alle de organer : Hej

funktion TegnForm (form , kontekst ) { context.strokeStyle = ' # 000000 « context.beginPath (); switch ( shape.m_type ) { sag b2Shape.e_circleShape : {var cirkel = form, var pos = circle.m_position , var r = circle.m_radius ; vAR segmenter = 16,0 , var theta = 0,0 , var dtheta = 2,0 * Math.PI /segmenter //draw cirkel context.moveTo ( pos.x + r, pos.y ), for (var i = 0; i < segmenter 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 ) //tegne radius 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; tilfælde 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

Opret interaktivitet i dit spil med følgende kode : Hej

funktion handleKeyDown ( evt ) { tasterne [ evt.keyCode ] = true; } funktion handleKeyUp ( evt ) { tasterne [ evt.keyCode ] = false; } //deaktivere lodret rulning fra pile < 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 < p> Fremstilling player kollisionsdetektion og hastighed ved at indtaste følgende kode ind i trin ( ) funktion :

funktion handleInteractions () { //pil op //1 var sammenstød = world.m_contactList , player.canJump = false , hvis ( kollision = null !) {if ( collision.GetShape1 () GetUserData () == ' player '