HTML5 Game Development Series tutorial 8)

Address: http://www.script-tutorials.com/html5-game-development-lesson-8/

This is our latest HTML5 game development series. We will continue to use canvas for HTML5 Game Development Series articles. This time I will show you how to use Box2D to create objects in your project. Box2D is a very popular open-source physical engine for applications that need to simulate 2D objects. In game development, 2D physical engines are a hot topic. With the help of the physical engine, we can easily create fun games by setting the environment and simple rules.

Preparation:

First, you should download the Box2d library here.

Step 1: HTML

This time, we must reference all necessary library files to our project.

Index.html

<! DOCTYPE html> Step 2: CSS

Css/main.css

This time, I am not going to display the content of the CSS file, because it is just some page layout styles. You can find the file in the source code package.

Step 3: JS

Js/jquery-2.0.0.min.js and js/protoclass. js

The above two js files are in the source code package. The following js files are the most important and the main code of our game.

Js/script. js

      iBorder = 5         Math.floor(Math.random() * y) +   $(     world =      canvas = document.getElementById('game'     ctx = canvas.getContext('2d'     canvasWidth =     canvasHeight =      createGround(canvasWidth / 2, canvasHeight - iBorder, canvasWidth / 2, iBorder, 0     createGround(iBorder, canvasHeight / 2, iBorder, canvasHeight / 2, 0);        createGround(canvasWidth - iBorder, canvasHeight / 2, iBorder, canvasHeight / 2, 0);               iVar = getRand(1, 2       (iVar == 1) {            x = getRand(100, 600          y = 0          r = getRand(10, 40      }  (iVar == 2) {            x = getRand(100, 600          y = 0          w = getRand(5, 40          h = getRand(5, 40        setTimeout(addObjects, 500        world.Step(1.0 / 60, 1     ctx.clearRect(0, 0        setTimeout(frame, 10              worldAABB =      worldAABB.minVertex.Set(-1000, -1000);       worldAABB.maxVertex.Set(1000, 1000);                gravity =  b2Vec2(0, 200            doSleep =                 groundSd =       groundSd.restitution = 0.4;          groundBd =        groundBd.rotation = rotation * Math.PI / 180;                boxSd =      boxSd.density = 1.0;       boxSd.friction = 1.0;        boxSd.restitution = .5;           boxBd =                 boxSd =      boxSd.density = 1.0     boxSd.friction = 1.0     boxSd.restitution = .5     boxSd.radius =       boxBd =                      ( b = world.m_bodyList; b != ; b =          ( s = b.GetShapeList(); s != ; s =           context.strokeStyle = '#0000ff'     context.fillStyle = 'rgba(100, 100, 255, 0.8)'                              circle =              pos =              r =              segments = 16.0              theta = 0.0              dtheta = 2.0 * Math.PI /             context.moveTo(pos.x +              ( i = 0; i < segments; i++                  d =  b2Vec2(r * Math.cos(theta), r *                  v =                  theta +=              context.lineTo(pos.x +               ax =              pos2 =  b2Vec2(pos.x + r * ax.x, pos.y + r *                                     poly =              tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0               ( i = 0; i < poly.m_vertexCount; i++                  v =                    }

I have added comments in many places and hope these codes are easy to understand.

Conclusion:

You have completed this tutorial using HTML5 and Box2D. Congratulations!