"Finishing" HTML5 game Development Study notes (2)-Bouncing balls

1. Pre-knowledge
(1) Drawing an external picture resource on the canvas
(2) gradient (gradient): The object type in HTML5, including linear gradient and radial gradient. Like Createlineargradient, drawing gradients requires a color group
Http://www.w3school.com.cn/tags/canvas_createlineargradient.asp

function Test1 () {//Draw external picture resource on canvas var ctx = document.getElementById (' Ballcanvas '). GetContext (' 2d ') var image =new image () IMAGE.SRC = ' football.jpg ' ctx.drawimage (image,0,0,360,300)}//test1 () function test2 () {/* Gradient (Gradient): Object type in HTML5, Includes linear gradient and radial gradient. Like Createlineargradient, drawing gradients requires a color group Http://www.w3school.com.cn/tags/canvas_createlineargradient.asp*/var CTX = document.getElementById (' Ballcanvas '). GetContext (' 2d ') var gradient = ctx.createlineargradient (10,10,200,10) var hue = [' #FFF ', ' #F00 ', ' #000 ']gradient.addcolorstop (0,hue[0]) gradient.addcolorstop (0.5,hue[1]) gradient.addcolorstop (1 , hue[2]) Ctx.fillstyle = Gradientctx.fillrect (10,10,200,100)}//test2 ()

2. Realization of Ideas
The entire game involves the object, including the ball of motion, the Wall (Box), the speed (tempo).
At the same time, the ball must move inside the wall and bounce back when it touches the wall.

When the ball and the wall collide, the direction of operation will change, the change to the absolute value of the speed does not change, but change the speed of the positive or negative. In the implementation process, I merge the concept of direction into

The speed of the object, mainly for the convenience of code implementation.

3. Code (fragment)

Ballfunction Ball () {var opts,ctx,ballx,ballyfunction drawball () {var ballopts = Opts.balloptsballx = ballopts.xbally = BallOpts.yctx.lineWidth = BallOpts.lineWidthctx.strokeStyle = BallOpts.strokeStylectx.beginPath () Ctx.arc (BALLX, Bally,ballopts.radius,0,2*math.pi,false) Ctx.closepath () Ctx.stroke ()}return {init:function (options) {opts = $. Extend (options,{canvas:null,ballopts: {x:100,y:100,radius:50,linewidth:1,strokestyle: ' #000 '}}) var canvas =opt S.canvasif (canvas==null) {alert (' canvas is null. ') Return}ctx = Canvas.getcontext (' 2d ') Drawball () return this},/*beginmove@return:void@speed:{offsetx:0,offsety:0}@ Box:box instance*/beginmove:function (Speed,box) {Box.refresh () var boxsize = Box.getsize (), ballopts = Opts.ballOpts, OffsetX = Speed.offsetx,offsety = Speed.offsety,directionchanged = false//Judge Ball is inside the box (top, right, bottom, left) within Var Boxinnerboundry = {top:boxsize.y+boxsize.linewidth,right:boxsize.x+boxsize.linewidth+boxsize.width,bottom: Boxsize.y+boxsize.linewidth+boxsize.height,left:Boxsize.x+boxsize.linewidth}var top = (bally-ballopts.radius-ballopts.linewidth) +offsety,right = (ballX+ Ballopts.radius+ballopts.linewidth) +offsetx,bottom = (bally+ballopts.radius+ballopts.linewidth) +offsetY,left = ( Ballx-ballopts.radius-ballopts.linewidth) +offsetxif (top<boxinnerboundry.top) {BallY + = Top-boxinnerboundry.topoffsety =-offsetydirectionchanged = True}if (right>boxinnerboundry.right) {BallX + = Right-boxinnerboundry.rightoffsetx =-offsetxdirectionchanged = True}if (bottom>boxinnerboundry.bottom) {BallY + = OffsetY-(bottom-boxinnerboundry.bottom) OffsetY =-offsetydirectionchanged = True}if (left<boxinnerboundry.left) { ballx+= Left-boxinnerboundry.leftoffsetx =-offsetxdirectionchanged = True}ballx + = offsetxbally + = offsetY/* The current speed must be changed because speed is a constant in the timer, while the actual movement speed (the direction indicated by the plus and minus signs is changed) */if (directionchanged) {speed.changespeed ( offsetx,offsety)}//alert (ballopts.x+offsetx+ '-' +ballopts.y+offsety) Ctx.beginpath () Ctx.arc (BallX,ballY, Ballopts.radius,0,2*math.pi,false) ctx.cLosepath () Ctx.stroke ()}} 

4. Optimization and improvement
(1) mainly in the judgment of the ball and the wall, through a large number of if judgment, to achieve a more disgusting
(2) Speed implementation for a similar single-case approach, non-conforming to reuse
(3) style can beautify, add external image resources, such as landscaping into football and golf course
(4) Introduction of acceleration

"Finishing" HTML5 game Development Study notes (2)-Bouncing balls