這篇文章主要介紹“如何用HTML5制作一個(gè)簡(jiǎn)單的彈力球游戲”，在日常操作中，相信很多人在如何用HTML5制作一個(gè)簡(jiǎn)單的彈力球游戲問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何用HTML5制作一個(gè)簡(jiǎn)單的彈力球游戲”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、峰峰礦ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的峰峰礦網(wǎng)站制作公司

【創(chuàng)建小球?qū)ο蟆?/p>

第一步就是先創(chuàng)建一個(gè)小球?qū)ο螅瑢懞眯∏虻臉?gòu)造函數(shù)：

復(fù)制代碼

代碼如下:

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

this.x = x;

this.y = y;

this.oldx = x;

this.oldy = y;

this.vx = 0;

this.vy = 0;this.radius = r;

this.color = color;

}

小球?qū)傩院芎?jiǎn)單，xy是小球的坐標(biāo)，vx和vy是小球的初始水平速度和初始垂直速度。radius就是小球的半徑，color是小球顏色（為了區(qū)分不同球），oldx和oldy是記錄小球的上一幀的位置，后期球與球之間碰撞后用于位置修正(后面其實(shí)沒用上，位置修正直接計(jì)算了，如果用oldx來(lái)設(shè)置很不嚴(yán)謹(jǐn)，不過(guò)記錄一下，難免會(huì)用得到)。

小球?qū)傩詫懞煤?，就在小球原型中寫小球的?dòng)作了：

復(fù)制代碼

代碼如下:

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();

},

}

小球的動(dòng)作方法也很簡(jiǎn)單，就兩個(gè)，第一個(gè)方法是把自己畫出來(lái)，第二個(gè)方法就是控制小球的運(yùn)動(dòng)。t是當(dāng)前幀與上一幀的時(shí)間差。用于計(jì)算小球的速度的增量從而得出小球的位移增量，從而計(jì)算出小球的新位置并且將小球重繪。得出新位置的同時(shí)判斷小球的新位置有無(wú)超出墻壁，如果超出則進(jìn)行速度修正讓小球反彈。

第二個(gè)方法里的一些常量ballRadius =30, g = 9.8 , mocali = 0.5,balls = [],collarg = 0.8,pxpm = canvas.width/20; 意思很明顯：ballradius是球半徑，g是重力加速度，mocali是空氣阻力引起的水平方向的減速度，balls是一個(gè)用于存放小球?qū)ο蟮臄?shù)組，collarg是彈力系數(shù)。pxpm是像素與米之間的映射，把畫布當(dāng)成是20米寬的區(qū)域。

【碰撞檢測(cè)】

創(chuàng)建好小球?qū)ο蠛?，就開始寫碰撞了，小球與小球之間的碰撞：

復(fù)制代碼

代碼如下:

function collision(){

for(var i=0;i

for(var j=0;j

var b1 = balls[i],b2 = balls[j];

if(b1 !== b2){

var rc = Math.sqrt(Math.pow(b1.x - b2.x , 2) + Math.pow(b1.y - b2.y , 2));

if(Math.ceil(rc) < (b1.radius + b2.radius)){

//獲得碰撞后速度的增量

var ax = ((b1.vx - b2.vx)*Math.pow((b1.x - b2.x) , 2) + (b1.vy - b2.vy)*(b1.x - b2.x)*(b1.y - b2.y))/Math.pow(rc , 2)

var ay = ((b1.vy - b2.vy)*Math.pow((b1.y - b2.y) , 2) + (b1.vx - b2.vx)*(b1.x - b2.x)+(b1.y - b2.y))/Math.pow(rc , 2)

//給與小球新的速度

b1.vx = (b1.vx-ax)*collarg;

b1.vy = (b1.vy-ay)*collarg;

b2.vx = (b2.vx+ax)*collarg;

b2.vy = (b2.vy+ay)*collarg;

//獲取兩球斜切位置并且強(qiáng)制扭轉(zhuǎn)

var clength = ((b1.radius+b2.radius)-rc)/2;

var cx = clength * (b1.x-b2.x)/rc;

var cy = clength * (b1.y-b2.y)/rc;

b1.x = b1.x+cx;

b1.y = b1.y+cy;

b2.x = b2.x-cx;

b2.y = b2.y-cy;

}

}

}

}

}

每一幀都進(jìn)行小球之間碰撞的判斷，如果兩個(gè)小球球心距離小于兩球半徑之和，則證明兩個(gè)小球發(fā)生了碰撞。然后進(jìn)行計(jì)算兩個(gè)小球碰撞之后的速度變化量。ax和ay就是速度變化量?！?/p>

后面長(zhǎng)長(zhǎng)的公式就是這個(gè)：

2015512173816364.png (334×192)

具體原理我就不說(shuō)了，想了解原理就直接戳 小球碰撞的算法設(shè)計(jì) 。 下面那段就是防止小球重復(fù)碰撞檢測(cè)導(dǎo)致無(wú)法正常反彈，所以計(jì)算兩小球的球心距離，然后算出兩個(gè)小球的斜切位置，并且將兩個(gè)小球的位置進(jìn)行更正。

【運(yùn)動(dòng)動(dòng)畫】

最后一步：

復(fù)制代碼

代碼如下:

canvas.onclick = function(event){

event = event || window.event;

var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - canvas.offsetLeft;

var y= event.clientY + document.body.scrollTop + document.documentElement.scrollTop - canvas.offsetTop;

balls.forEach(function(){

this.vx = (x - this.x)/20; //初速度 m/s

this.vy = (y - this.y)/20;

});

}

function animate(){

ctx.save();

ctx.fillStyle = "rgba(255,255,255,0.2)";

ctx.fillRect(0,0,canvas.width,canvas.height)

ctx.restore();

// ctx.clearRect(0,0,canvas.width,canvas.height)

var t1 = new Date();

var t = (t1 - t0)/1000;

collision();

balls.forEach(function(){

this.run(t);

});

t0 = t1;

if("requestAnimationFrame" in window){

requestAnimationFrame(animate);

}

else if("webkitRequestAnimationFrame" in window){

webkitRequestAnimationFrame(animate);

}

else if("msRequestAnimationFrame" in window){

msRequestAnimationFrame(animate);

}

else if("mozRequestAnimationFrame" in window){

mozRequestAnimationFrame(animate);

}

}

}

通過(guò)點(diǎn)擊畫布的位置來(lái)給于小球初速度，然后animate就是動(dòng)畫的每一幀運(yùn)行的方法。上面的 ctx.fillStyle = "rgba(255,255,255,0.2)"; ctx.fillRect(0,0,canvas.width,canvas.height)是給小球添加虛影，我覺得這樣會(huì)更好看，如果覺得不喜歡，就直接用clearRect清除就行了。然后就是計(jì)算每一幀的時(shí)間差，然后對(duì)小球數(shù)組里小球數(shù)組進(jìn)行遍歷重繪。然后再加入碰撞檢測(cè)的collision方法。動(dòng)畫也就做完了。

到此，關(guān)于“如何用HTML5制作一個(gè)簡(jiǎn)單的彈力球游戲”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！