您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“怎么用HTML5制作一個(gè)簡(jiǎn)單的彈力球游戲”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用HTML5制作一個(gè)簡(jiǎn)單的彈力球游戲”吧!
【創(chuàng)建小球?qū)ο蟆?/p>
第一步就是先創(chuàng)建一個(gè)小球?qū)ο?,?xiě)好小球的構(gòu)造函數(shù):
代碼如下:
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í)沒(méi)用上,位置修正直接計(jì)算了,如果用oldx來(lái)設(shè)置很不嚴(yán)謹(jǐn),不過(guò)記錄一下,難免會(huì)用得到)。
小球?qū)傩詫?xiě)好后,就在小球原型中寫(xiě)小球的動(dòng)作了:
代碼如下:
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;</p>
<p>
if(Math.abs(this.vx) < 0.01){
this.vx = 0;
}
else this.vx += this.vx>0? -mocali*t : mocali*t;</p>
<p> this.vy = this.vy + g * t;
this.x += t * this.vx * pxpm;
this.y += t * this.vy * pxpm;</p>
<p> 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();
},</p>
<p> }
小球的動(dòng)作方法也很簡(jiǎn)單,就兩個(gè),第一個(gè)方法是把自己畫(huà)出來(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是像素與米之間的映射,把畫(huà)布當(dāng)成是20米寬的區(qū)域。
【碰撞檢測(cè)】
創(chuàng)建好小球?qū)ο蠛螅烷_(kāi)始寫(xiě)碰撞了,小球與小球之間的碰撞:
代碼如下:
function collision(){
for(var i=0;i<balls.length;i++){
for(var j=0;j<balls.length;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)){</p>
<p> //獲得碰撞后速度的增量
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)</p>
<p> //給與小球新的速度
b1.vx = (b1.vx-ax)*collarg;
b1.vy = (b1.vy-ay)*collarg;
b2.vx = (b2.vx+ax)*collarg;
b2.vy = (b2.vy+ay)*collarg;</p>
<p> //獲取兩球斜切位置并且強(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;
}
}
}
}
}</p>
<p>
每一幀都進(jìn)行小球之間碰撞的判斷,如果兩個(gè)小球球心距離小于兩球半徑之和,則證明兩個(gè)小球發(fā)生了碰撞。然后進(jìn)行計(jì)算兩個(gè)小球碰撞之后的速度變化量。ax和ay就是速度變化量。
后面長(zhǎng)長(zhǎng)的公式就是這個(gè):
具體原理我就不說(shuō)了,想了解原理就直接戳 小球碰撞的算法設(shè)計(jì) 。 下面那段就是防止小球重復(fù)碰撞檢測(cè)導(dǎo)致無(wú)法正常反彈,所以計(jì)算兩小球的球心距離,然后算出兩個(gè)小球的斜切位置,并且將兩個(gè)小球的位置進(jìn)行更正。
【運(yùn)動(dòng)動(dòng)畫(huà)】
最后一步:
代碼如下:
</p>
<p>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;</p>
<p> balls.forEach(function(){
this.vx = (x - this.x)/20; //初速度 m/s
this.vy = (y - this.y)/20;
});
}</p>
<p> </p>
<p> 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)</p>
<p> var t1 = new Date();
var t = (t1 - t0)/1000;
collision();
balls.forEach(function(){
this.run(t);
});
t0 = t1;</p>
<p> 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);
}
}
}</p>
<p>
通過(guò)點(diǎn)擊畫(huà)布的位置來(lái)給于小球初速度,然后animate就是動(dòng)畫(huà)的每一幀運(yùn)行的方法。上面的 ctx.fillStyle = "rgba(255,255,255,0.2)"; ctx.fillRect(0,0,canvas.width,canvas.height)是給小球添加虛影,我覺(jué)得這樣會(huì)更好看,如果覺(jué)得不喜歡,就直接用clearRect清除就行了。然后就是計(jì)算每一幀的時(shí)間差,然后對(duì)小球數(shù)組里小球數(shù)組進(jìn)行遍歷重繪。然后再加入碰撞檢測(cè)的collision方法。動(dòng)畫(huà)也就做完了。
至此,就已經(jīng)寫(xiě)完了,源碼地址:
https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Other-demo/shotBall.html
到此,相信大家對(duì)“怎么用HTML5制作一個(gè)簡(jiǎn)單的彈力球游戲”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。