Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use HTML5 to make a simple springball game". In daily operation, I believe many people have doubts about how to use HTML5 to make a simple springball game. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to use HTML5 to make a simple springball game". Next, please follow the editor to study!

[create a ball object]

The first step is to create a ball object and write the constructor of the ball:

Copy the code

The code is as follows:

Var Ball = function (x, y, r, color) {

This.x = x

This.y = y

This.oldx = x

This.oldy = y

This.vx = 0

This.vy = 0this.radius = r

This.color = color

}

The properties of the ball are simple, xy is the coordinates of the ball, vx and vy are the initial horizontal velocity and initial vertical velocity of the ball. Radius is the radius of the ball, color is the color of the ball (to distinguish different balls), oldx and oldy record the position of the ball in the previous frame, and later the collision between the ball and the ball is used for position correction (the latter is actually useless, the position correction is calculated directly, if you use oldx to set up very lax, but record it, it will inevitably be used).

After the attributes of the ball are written, the action of the ball is written in the ball prototype:

Copy the code

The code is as follows:

Ball.prototype = {

Paint:function () {

Ctx.save ()

Ctx.beginPath ()

Ctx.arc (this.x, this.y, this.radius, 0, Math.PI*2)

Ctx.fillStyle=this.color

Ctx.fill ()

Ctx.restore ()

This.moving = false

}

Run:function (t) {

If (! this.candrod) {

This.paint ()

Return}

This.oldx = this.x

This.oldy = this.y

If (Math.abs (this.vx))

< 0.01){ this.vx = 0; } else this.vx += this.vx>

0?-mocali*t: mocali*t

This.vy = this.vy + g * t

This.x + = t * this.vx * pxpm

This.y + = t * this.vy * pxpm

If (this.y > canvas.height-ballRadius | | this.y

< ballRadius){ this.y = this.y < ballRadius ? ballRadius : (canvas.height - ballRadius); this.vy = -this.vy*collarg } if(this.x >

Canvas.width-ballRadius | | this.x < ballRadius) {

This.x = this.x < ballRadius? BallRadius: (canvas.width-ballRadius)

This.derectionX =! this.derectionX

This.vx =-this.vx*collarg

}

This.paint ()

}

}

The movement of the ball is also very simple, there are only two, the first method is to draw yourself, and the second method is to control the movement of the ball. T is the time difference between the current frame and the previous frame. It is used to calculate the increment of the speed of the ball so as to obtain the displacement increment of the ball, thus calculating the new position of the ball and redrawing the ball. Get the new position while judging whether the new position of the ball is beyond the wall, and if so, make a speed correction to let the ball bounce.

In the second method, some constants ballRadius = 30, g = 9.8, mocali = 0.5 ballradius = [], collarg = 0.8 dint pxpm = canvas.width/20; have a clear meaning: ballradius is the radius of the sphere, g is the acceleration of gravity, mocali is the horizontal deceleration caused by air resistance, balls is an array used to store small ball objects, and collarg is the coefficient of elasticity. Pxpm is a mapping between pixels and meters, treating the canvas as an area 20 meters wide.

[collision detection]

After you create the ball object, you start to write about the collision, the collision between the ball and the ball:

Copy the code

The code is as follows:

Function collision () {

For (var iTuno Bandi)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.