H5 shooting Game (1)--Physical model abstraction

Objective:
A few days ago witnessed the university students opened a micro-shop, is indirectly experience the use of public platform. Feel very convenient and convenient, so I also want to tinker with a. Public number name: " Wood purpose H5 game world ", positioning into a, personal H5 game small site, while sharing game technology blog. your experience is the greatest affirmation to me.
This article will describe the fixed-point shooting game writing, the main elaboration of its physical model of abstraction, follow-up slowly perfect and iterative.

Ideas and Experiences:
Originally conceived, is to do a simple H5 game, can run on the mobile side. And start with a simple, one-look. But don't know what to do? Later saw some of the friends of the back body shot as a picture, feel very upward and beautiful. Then think, is not a simple shooting game?
Say dry, because there are similar shooting game app for reference, game creativity does not need to be conceived, so it is a copy of the implementation.
　　
Online experience of the game link: fixed-point shooting game . ( point me, point me, ^_^!)

Model Abstraction:
The main scene of the game consists of rebounds , baskets , basketball and ground. Basketball needs to be thrown into the basket to score. The auxiliary line is used for aiming and locating, simple triggering can shoot.
Because it is a 2-dimensional scene, it involves simple physical collisions and processing. But decide overkill------use box2d to build a physical model. Box2D is a simulation of the real world, its harmonic units are meters-kilograms-seconds (MKS), so use real data to set the size, as long as the corresponding scaling coefficient of the pixel can be set.
In order to reflect the "professionalism", specifically reference the real basketball court size parameters.
　　
We set the following parameters: rebounds 1.05 meters high, basketball radius of 0.123 meters, the basket center radius of 0.19 meters (smaller than the real). Simulate in the physical world with as much real data as possible.
Rebounding is a static rigid body, ignoring its wide length and simply set to a vertical edge.

*) Create rebounds var bodydef = new B2bodydef;bodydef.type = B2body.b2_staticbody;var Fixdef = new B2fixturedef;fixdef.shape = new B2polygonshape;fixdef.shape.setasedge (New B2VEC2 (1, 3), New B2VEC2 (1, 4.05)); fixdef.restitution = 1;world. Createbody (Bodydef). Createfixture (FIXDEF);

The setting of the basket frame, see non-income, it uses a very trick method. Its round box is in the physical world, it does not exist, it has two points: the left border point and the right border point.
　　

var bodydef = new B2bodydef;var fixdef = new B2fixturedef;bodydef.type = b2body.b2_staticbody;//left box point bodydef.position.x = 1 .09;BODYDEF.POSITION.Y = 3.05;fixdef.shape = new B2circleshape (0.01); Createbody (Bodydef). Createfixture (fixdef);//Right border point bodydef.position.x = 1.5;BODYDEF.POSITION.Y = 3.05;fixdef.shape = new B2CircleShape (0.01); World. Createbody (Bodydef). Createfixture (FIXDEF);

Basketball is a sphere, in fact a dynamic rigid body.

var bodydef = new B2bodydef (); bodydef.type = B2body.b2_dynamicbody;var Fixdef = new b2fixturedef;fixdef.density = 1.5;fixD Ef.shape = new B2circleshape (0.123); Createbody (Bodydef). Createfixture (FIXDEF);

Core algorithms:
In addition to the physical engine itself, there are two important core points. One is the auxiliary parabola, the other is the basketball algorithm.
• Auxiliary Parabolic
Some people have commented on why "Angry Birds" are burning for a moment because of the obsession with "parabolic" . so the auxiliary parabola has become the core point of the game itself. Auxiliary parabolic, hiding the angle of the shooting and power settings , making the game very easy to start. it uses the simulated stroke method to draw . Instead of the parabolic equation in turn, the orbital point is calculated.

var dt = 0.62;for (var i = 0; i < Dlevel; i++) {var tx = SPX * DT * i + this.posx * scalefactor;　　var ty = spy * DT * i-0.5 * gavity * DT * DT * I * i + this.posy * scalefactor; This.tracklines[i].drawcircle (TX, Ty), 2, Cc.degreestoradians (CC.P), 255, False, Cc.color (0, 0, 0,));}

Note: by physical formula: Sx = Vx * t, Sy = Vy * t + * A * T^2; Vx, vy up to the throw point.
basketball in decision algorithm The essence of the
problem is how to determine the basketball sphere through the diameter segment of the ball frame ? This problem can be changed slightly . Record the center position of the two points before and after the sport basketball , if the two-point line segment intersects the line of the blue-frame diameter . It is thought that the basketball ball is over the diameter line. That's the goal.
So the problem eventually evolves, to solve the problem of the two-segment intersection. ?

Specific algorithms, see the following blog post: Determine whether the two segments intersect. introduced quick Test and cross-experiment these two phases. The approximate algorithm code for this side of the
is described below:

Collidewith:function (Ball) {//*) var px1 = Ball.prevposx;　　var py1 = Ball.prevposy;　　var px2 = ball.posx;　　var py2 = Ball.posy;　　var qx1 = 1.1, qx2 = 1.5;　　var qy1 = 3.05, qy2 = 3.05; *) Quick test, if (!) ( Math.min (px1, px2) <= Math.max (qx1, qx2) && math.min (qx1, qx2) <= Math.max (px1, px2) && Ma 　　Th.min (Py1, Py2) <= Math.max (qy1, Qy2) && math.min (qy1, Qy2) <= Math.max (Py1, py2)) {return false;　　}//*) cross-determine var D1 = (px1-qx1) * (qy2-qy1)-(qx2-qx1) * (PY1-QY1);　　　　var D2 = (px2-qx1) * (qy2-qy1)-(qx2-qx1) * (PY2-QY1);　　var d3 = (qx1-px1) * (py2-py1)-(PX2-PX1) * (QY1-PY1);　　var d4 = (qx2-px1) * (py2-py1)-(PX2-PX1) * (QY2-PY1);　　if (D1 * D2 < 0 && D3 * D4 < 0) {return true;　　} else if (D1 = = 0 && this.isonsegline (qx1, Qy1, qx2, Qy2, Px1, py1)) {return true;　　} else if (D2 = = 0 && this.isonsegline (qx1, Qy1, qx2, Qy2, PX2, py2)) {return true; } else if (D3 = = 0 && this.isonsegline (px1, Py1, px2, Py2, qx1, qy1)) {return true;　　} else if (D4 = = 0 && this.isonsegline (px1, Py1, px2, Py2, qx2, Qy2)) {return true;　　} return False;},isonsegline:function (Px1, Py1, px2, Py2, px3,py3) {var minx = math.min (px1, px2);　　var Maxx = Math.max (px1, px2);　　var miny = math.min (py1, py2);　　var Maxy = Math.max (py1, py2); Return px3 >= Minx && px3 <= Maxx && py3 >= miny && py3 <= Maxy;}

Summarize:
Friends play a piece, spit a lot, but still very happy, can experience is kind of affirmation. Later must be good to improve one more, making its user experience, more friendly.

Written at the end:
　　If you think this article is helpful to you, please give it a little reward. In fact, I would like to try to see if blogging can bring me a little bit of revenue. No matter how much, is a kind of sincere affirmation to the landlord.

Public Number & Games sites:
Personal public Number: Wooden purpose H5 game world
　　

H5 shooting Game (1)--Physical model abstraction