Πώς να φτιάξετε τη δική HTML 5 το παιχνίδι σας

Η Apple έκανε μια κρίσιμη κίνηση όταν επέλεξε για iOS συσκευές να χρησιμοποιούν HTML5 πάνω Flash παίκτες . Παρά τις επικρίσεις , HTML5 έχει αρχίσει να παίρνει μορφή ως νεογέννητη πλατφόρμα από μόνη της , ιδίως για τη δημιουργία video games . Δημιουργώντας ένα βασικό παιχνίδι HTML5 δεν απαιτούν ένα κομμάτι της τεχνογνωσίας , όταν πρόκειται για την κωδικοποίηση και τον προγραμματισμό , αλλά ευτυχώς δεν χρειάζεται να είναι ένα ολοκληρωμένο σχεδιαστή παιχνίδι για να δημιουργήσετε ένα βασικό παιχνίδι . Τα πράγματα που θα χρειαστείτε
Box2D μηχανή φυσικής
Η Εμφάνιση Περισσότερες οδηγίες
Η

1 Δημιουργήστε ένα νέο αρχείο HTML ( index.html ) σε Box2D και να αντιγράψετε τα js και lib καταλόγους από Box2D - js έργο στο φάκελο του παιχνιδιού σας . Τοποθετήστε τα ακόλουθα αρχεία σε ένα αρχείο script σε HTML αρχείο σας :

<- ! box2djs - >
5

Open game.js και εισάγετε τον ακόλουθο κώδικα :

άποψη plaincopy να clipboardprint //κάποιες μεταβλητές που το gonna ; χρήση σε αυτό το demo var initId = 0 ? //? var παίκτης = λειτουργία () { this.object = null? this.canJump = false ? } ? var κόσμο? var ctx ? var canvasWidth ? var canvasHeight ? κλειδιά var = [ ] HTML5 onLoad εκδήλωση Event.observe ( παράθυρο , «φορτίο» , λειτουργία () { κόσμο = createWorld ( ) ? //box2DWorld ctx = $ ( ' παιχνίδι ' ) getContext ( '2 d ' ) ? . //2 var canvasElm = $ ( «παιχνίδι» ) ? canvasWidth = parseInt ( canvasElm.width ) ? canvasHeight = parseInt ( canvasElm.height ) ? initGame ( ) ? //3 βήμα ( ) ? //4 //5 window.addEventListener ( « KeyDown » , handleKeyDown , αλήθεια)? window.addEventListener ( « KeyUp » , handleKeyUp , αλήθεια)? } ) ?
Η 6

Αναζήτηση για το createWorld ( λειτουργία ) σε boxdutils.js και η συμβολή αυτό τον κώδικα:

createWorld λειτουργία ( ) { //εδώ θα δημιουργήσετε τις ρυθμίσεις για τον κόσμο μας συγκρούσεις var worldAABB = νέα b2AABB ( ) ? worldAABB.minVertex.Set ( -1000 , -1000 ) ? worldAABB.maxVertex.Set ( 1000 , 1000 ) ? //που διάνυσμα βαρύτητας var βαρύτητας = νέα b2Vec2 ( 0 , 300 ) ? var doSleep = true ? //init τον κόσμο μας και να επιστρέψει var αξία της παγκόσμιας = νέα b2World της ( worldAABB , η βαρύτητα , doSleep ) ? κόσμου επιστροφή?}

7

Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε την στα game.js για τη δημιουργία του ορισμού σχήματος , που έχει συσταθεί πυκνότητα , μορφή UserData , τη δημιουργία του ορισμού του σώματος , που έχει συσταθεί με τη θέση της και να δημιουργήσει το σώμα στον κόσμο του παιχνιδιού :

initGame λειτουργία ( ) { //δημιουργία 2 μεγάλες πλατφόρμες createBox ( κόσμο , 3 , 230 , 60 , 180 , αλήθεια , « έδαφος» ) ? createBox ( κόσμο , 560 , 360 , 50 , 50 , αλήθεια , « έδαφος» ) ? //δημιουργία μικρών πλατφόρμες ( var i = 0 ? i <5 ? i + + ) { createBox ( κόσμο , 150 + ( 80 * i ) , 360 , 5 , 40 + ( i * 15 ) , αλήθεια , « έδαφος» ) ? } //δημιουργία παίκτης ballSd var μπάλα = νέα b2CircleDef ( ) ? ballSd.density = 0.1 ? ballSd.radius = 12 ? ballSd.restitution = 0.5 ? ballSd.friction = 1 ? ballSd.userData = « παίκτης» ? var ballBd = νέα b2BodyDef ( ) ? ballBd.linearDamping = .03 ? ballBd.allowSleep = false ? ballBd.AddShape ( ballSd ) ? ballBd.position.Set ( 20,0 ) ? player.object = world.CreateBody ( ballBd ) ? } Μέσα box2dutils.js , έχουμε δημιουργήσει μια λειτουργία , που ονομάζεται createBox . Αυτό δημιουργεί ένα στατικό σώμα ορθογώνιο. createBox λειτουργία ( κόσμο , x, y , πλάτος, ύψος , σταθερό , UserData ) {if ( typeof ( σταθερό ) == « ακαθόριστη» ) σταθερό = true ? //1 var boxSd = νέα b2BoxDef ( ) ? ( ! σταθερό ) , εάν boxSd.density = 1,0 ? //2 = boxSd.userData UserData ? //3 boxSd.extents.Set ( πλάτος , ύψος) ? //4 var boxBd = νέα b2BodyDef ( ) ? boxBd.AddShape ( boxSd ) ? //5 boxBd.position.Set ( x , y ) ? //6 επιστροφής world.CreateBody ( boxBd ) }
8

Open σενάριο game.js και να αντιγράψετε και να επικολλήσετε τον παρακάτω κώδικα για να καταστήσουν το χρόνο :

άποψη plaincopy να clipboardprint βήμα λειτουργία () { var stepping = false ? ; var timeStep = 1.0/60 ? var επανάληψης = 1 ? //1 world.Step ( προς βήμα, επανάληψη) ? //2 ctx.clearRect ( 0 , 0 , canvasWidth , canvasHeight ) ? drawWorld ( κόσμο , ctx ) ? //3 setTimeout ("στάδιο ( ) ' , 10 ) ? }
Η 9

Εισάγετε τον παρακάτω κώδικα στο box2dutils.js να Ισοπαλία «συνδέσεις» των οργάνων αναπαραγωγής :

drawWorld λειτουργία ( κόσμο , το πλαίσιο ) { για ( var j = world.m_jointList ? j ? j = j.m_next ) { drawJoint ( j , το πλαίσιο ) ? } για ( var b = world.m_bodyList ? b ? β = b.m_next ) { για ( var s = b.GetShapeList ( ) ? ! s = null? s = s.GetNext ( ) ) { drawShape ( s , το πλαίσιο ) ? } } }
Η 10

Τοποθετήστε ένα δεύτερο loop να αντληθούν όλα τα όργανα :

drawShape λειτουργίας ( σχήμα , πλαίσιο ) { context.strokeStyle = ' # 000000 ' ? context.beginPath ( ) ? διακόπτης ( shape.m_type ) { περίπτωση b2Shape.e_circleShape : { var κύκλος = σχήμα? var pos = circle.m_position ? var r = circle.m_radius ? τμήματα var = 16,0 ? var θήτα = 0.0 ? var dtheta = 2,0 * Math.PI /τμήματα? //ισοπαλίες κύκλο context.moveTo ( pos.x + r , pos.y ) ? για ( var i = 0 ? i <τμήματα ? i + + ) { var d = νέα b2Vec2 ( r * Math.cos ( θήτα ) , r * Math.sin ( θήτα ) ) ? var v = b2Math.AddVV ( pos , δ) ? context.lineTo ( vx , vy ) ? θήτα + = dtheta ? } context.lineTo ( pos.x + r , pos . y ) ? ακτίνα //κλήρωση context.moveTo ( pos.x , pos.y ) ? var ax = circle.m_R.col1 ? var pos2 = νέα b2Vec2 ( pos.x + r * ax.x , pos.y + r * ax.y ) ? context.lineTo ( pos2.x , pos2.y ) ? } διάλειμμα? περίπτωση b2Shape.e_polyShape : { var = πολυ σχήμα? var tV = b2Math.AddVV ( poly.m_position , b2Math.b2MulMV ( πολυ . m_R , poly.m_vertices [ 0 ] ) ) ? context.moveTo ( tV.x , tV.y ) ? για ( var i = 0 ? i Η 11

Δημιουργία διαδραστικότητα στο παιχνίδι σας με τον παρακάτω κώδικα :

handleKeyDown λειτουργία ( evt), { πλήκτρα [ evt.keyCode ] = true ? } λειτουργία handleKeyUp ( evt ) { πλήκτρα [ evt.keyCode ] = false ? } //απενεργοποιήσετε την κατακόρυφη κύλιση από τα βέλη document.onkeydown = λειτουργία () {επιστροφή event.keyCode ! = 38 && event.keyCode ! = 40 }
Η 12

Κατασκευή player ανίχνευσης σύγκρουσης και την ταχύτητα με την εισαγωγή του παρακάτω κώδικα μέσα στο στάδιο ( λειτουργία ) :

handleInteractions λειτουργία ( ) { //πάνω βέλος //1 var σύγκρουσης = world.m_contactList ? player.canJump = false ? εάν ( σύγκρουση = null ! ) {if ( collision.GetShape1 ( ) GetUserData ( ) == « παίκτης»