這篇文章主要介紹了用HTML5制作一個(gè)簡(jiǎn)單的桌球游戲的教程,主要利用到了HTML5的Canvas API,需要的朋友可以參考下

話說這只是一個(gè)簡(jiǎn)單的DEMO。游戲性，游戲規(guī)則什么的我都沒怎么考慮，如果有興趣細(xì)化的朋友可以細(xì)化一下，比如細(xì)化一下規(guī)則，游戲開關(guān)，加個(gè)聲音，細(xì)化一下進(jìn)球檢測(cè)，更嚴(yán)謹(jǐn)甚至可以去查下?lián)羟蛄Χ?、桌面真?shí)摩擦力等來把游戲弄的更像游戲。我只是給個(gè)編程思路哈，隨便坐個(gè)DEMO而已，玩起來估計(jì)還是不會(huì)很爽快的~~

整個(gè)桌球游戲就兩個(gè)類，一個(gè)是球，一個(gè)是輔助瞄準(zhǔn)線。如果想把改游戲弄的更復(fù)雜，還可以再抽象一個(gè)形狀類，用于檢測(cè)球與邊角的碰撞以及進(jìn)球。我做的這個(gè)游戲采取了最簡(jiǎn)單的墻壁碰撞檢測(cè)，所以沒有進(jìn)行球與不規(guī)則形狀的碰撞檢測(cè)，如果想玩更復(fù)雜的碰撞，可以戳 關(guān)于簡(jiǎn)單的碰撞檢測(cè) 岑安大大講的還是很好的。好，接下來就一步一步來：

【球】

代碼如下:

[/code]var Ball = function(x , y , ismine){

            this.x = x;

            this.y = y;

            this.ismine = ismine;

            this.oldx = x;

            this.oldy = y;

            this.vx = 0;

            this.vy = 0;

            this.radius = ballRadius;

            this.inhole = false;this.moving = true;

        }

        Ball.prototype = {

            constructor:Ball,

            _paint:function(){

                var b = this.ismine?document.getElementById("wb") : document.getElementById("yb")

                if(b.complete) {

                    ctx.drawImage(b , this.x-this.radius , this.y-this.radius , 2*this.radius , 2*this.radius);

                }

                else {

                    b.onload = function(){

                        ctx.drawImage(b , this.x-this.radius , this.y-this.radius , 2*this.radius , 2*this.radius);

                    }

                }

            },

            _run:function(t){

                this.oldx = this.x;

                this.oldy = this.y;

                this.vx = Math.abs(this.vx)<0.1? 0 : (this.vx>0? this.vx-mcl*t : this.vx+mcl*t);

                 this.vy = Math.abs(this.vy)<0.1? 0 : (this.vy>0? this.vy-mcl*t : this.vy+mcl*t);

                // this.vx += this.vx>0? -mcl*t : mcl*t;

                // this.vy += this.vy>0? -mcl*t : mcl*t;

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

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

                 if((this.x<50 && this.y<50) || (this.x>370 && this.x<430 && this.y<50) || (this.x > 758 && this.y<50) || (this.x<46 && this.y>490) || (this.x>377 && this.x<420 && this.y>490) || (this.x > 758 && this.y>490)){

                     this.inhole = true;

                     if(this.ismine){

                         var that = this;

                         setTimeout(function(){

                             that.x = 202;

                             that.y = canvas.height/2;

                             that.vx = 0;

                             that.vy = 0;

                             that.inhole = false;

                         } , 500)

                     }

                     else {

                         document.getElementById("shotNum").innerHTML = parseInt(document.getElementById("shotNum").innerHTML)+1

                     }

                 }

                 else {

                     if(this.y > canvas.height - (ballRadius+tbw) || this.y < (ballRadius+tbw)){

                         this.y = this.y < (ballRadius+tbw) ? (ballRadius+tbw) : (canvas.height - (ballRadius+tbw));

                         this.derectionY = !this.derectionY;

                         this.vy = -this.vy*0.6;

                     }

                     if(this.x > canvas.width - (ballRadius+tbw) || this.x < (ballRadius+tbw)){

                         this.x = this.x < (ballRadius+tbw) ? (ballRadius+tbw) : (canvas.width - (ballRadius+tbw));

                         this.derectionX = !this.derectionX;

                         this.vx = -this.vx*0.6;

                     }

                 }

                 this._paint();

                 if(Math.abs(this.vx)<0.1 && Math.abs(this.vy)<0.1){

                     this.moving = false;

                 }

                 else {

                     this.moving = true;

                 }

            }

        }[/code]

 球類的屬性：x,y球的位置，vx,vy球的水平速度以及求得垂直速度，ismine代表是白球還是其他球（不同球在_paint方法中繪制的圖片不一樣），oldx,oldy用于保存球的上一幀位置，不過暫時(shí)還沒用上，應(yīng)該有用吧。_paint方法沒什么好說的，_run方法就是跟蹤小球位置，根據(jù)小球每一幀的時(shí)間來算出小球的位移增量以及速度增量，mcl和pxpm都是常量，mcl是摩擦力，pxpm是大概算個(gè)像素和現(xiàn)實(shí)轉(zhuǎn)換比例。。。。然后就是碰撞檢測(cè)，這個(gè)很容易理解了，就計(jì)算小球的位置有沒有超過邊界，超過了就反彈。不過這種碰撞檢測(cè)很不嚴(yán)謹(jǐn)，如果真要做游戲建議用更復(fù)雜一些的。還有就是根據(jù)小球的速度來讓小球靜止。

代碼如下:

var dotLine = function(x0,y0,x1,y1){

this.x0 = this.x0;

this.y0 = this.y0;

this.x1 = this.x1;

this.y1 = this.y1;

this.dotlength = 3;

this.display = false;

}

dotLine.prototype = {

constructor:dotLine,

_ready:function(){

this.length = Math.sqrt(Math.pow(this.y1 - this.y0 , 2)+Math.pow(this.x1 - this.x0 , 2));

this.dotNum = Math.ceil(this.length/this.dotlength);

},

_paint:function(){

this._ready();

xadd = this.dotlength*(this.x1 - this.x0)/this.length;

yadd = this.dotlength*(this.y1 - this.y0)/this.length;

ctx.save();

ctx.beginPath();

for(var i=1;i<=this.dotNum;i++){

if(i%2!==0){

ctx.moveTo(this.x0+(i-1)*xadd , this.y0+(i-1)*yadd);

ctx.lineTo(this.x0+i*xadd , this.y0+i*yadd);

}

}

ctx.strokeStyle = "#FFF";

ctx.stroke();

ctx.beginPath();

ctx.arc(this.x1 , this.y1 , ballRadius-2 , 0 , 2*Math.PI);

ctx.stroke();

ctx.restore();

}

}

就是畫虛線，這個(gè)比較簡(jiǎn)單了，獲取鼠標(biāo)的位置和白球位置，然后在兩者之間隔一段距離畫條線，然后就成虛線了。

【多球碰撞檢測(cè)】

代碼如下:

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 && !b1.inhole && !b2.inhole){

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)){

if(!b1.moving && !b2.moving) return;

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

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;

b1.vy = b1.vy-ay;

b2.vx = b2.vx+ax;

b2.vy = b2.vy+ay;

//修正小球碰撞距離

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;

}

}

}

}

}

對(duì)所有小球進(jìn)行遍歷，計(jì)算兩個(gè)小球的球心距離，如果小于兩小球的半徑和，則說明發(fā)生了碰撞。如果兩個(gè)小球都是靜止的，就不進(jìn)行碰撞檢測(cè)，否則進(jìn)行計(jì)算碰撞后的速度增量，碰撞速度增量的求法可以直接看 小球碰撞的算法設(shè)計(jì) ，里面講的挺詳細(xì)的，綜合起來就得出了上面那一串式子了。

將速度增量賦給碰撞小球。因?yàn)閮蓚€(gè)球碰撞那一幀，兩個(gè)球是有部分重疊的，所以得進(jìn)行位置修正，不然小球會(huì)一直處于碰撞然后就黏在一起了，位置修正的原理也簡(jiǎn)單，算出兩球的球心距離，通過勾股定理計(jì)算出兩球的重疊區(qū)域的寬度，然后把寬度除于2后賦給小球新的位置，新的位置就是兩個(gè)球的半徑剛好等于球心距。

【鼠標(biāo)動(dòng)作】

代碼如下:

canvas.addEventListener("mousedown" , function(){

if(balls[0].moving) return;</p> <p> document.querySelector(".shotPower").style.display = "block";

document.querySelector(".shotPower").style.top = balls[0].y-60 + "px";

document.querySelector(".shotPower").style.left = balls[0].x-40 +"px";

document.getElementById("pow").className = "animate";

var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;

var y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - document.querySelector(".view").offsetTop;

dotline.display = true;

dotline.x0 = balls[0].x;

dotline.y0 = balls[0].y;

dotline.x1 = x;

dotline.y1 = y;</p> <p> window.addEventListener("mouseup" , muHandle , false);

window.addEventListener("mousemove" , mmHandle , false);</p> <p> function mmHandle(){

var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;

var y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - document.querySelector(".view").offsetTop;

dotline.x1 = x;

dotline.y1 = y;

}

function muHandle(){

var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;

var y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - document.querySelector(".view").offsetTop;</p> <p> var angle = Math.atan((y - balls[0].y)/(x - balls[0].x));

var h = document.getElementById("pow").offsetHeight/document.getElementById("powbar").offsetHeight;

var v = 60*h;

document.getElementById("pow").style.height = h*100+"%"</p> <p> balls[0].vx = x - balls[0].x>0 ? v*Math.abs(Math.cos(angle)) : -v*Math.abs(Math.cos(angle)); 

balls[0].vy = y - balls[0].y>0 ? v*Math.abs(Math.sin(angle)) : -v*Math.abs(Math.sin(angle));</p> <p> document.getElementById("pow").className = "";</p> <p> window.removeEventListener("mouseup" , muHandle , false);

window.removeEventListener("mousemove" , muHandle , false);

dotline.display = false;

document.querySelector(".shotPower").style.display = "none";

}

},false);

鼠標(biāo)動(dòng)作也比較簡(jiǎn)單，有js基礎(chǔ)的基本上都沒問題，就是鼠標(biāo)按下后計(jì)算鼠標(biāo)位置，然后產(chǎn)生輔助虛線，鼠標(biāo)移動(dòng)后修改輔助虛線的終點(diǎn)位置。鼠標(biāo)按下的時(shí)候旁邊產(chǎn)生一個(gè)力量計(jì)，我就只用用animation做動(dòng)畫了，然后鼠標(biāo)按鍵抬起時(shí)通過計(jì)算力量計(jì)的大小來確定白球的速度，然后再分解成水平速度以及垂直速度賦給白球。同時(shí)取消鼠標(biāo)移動(dòng)以及鼠標(biāo)抬起的事件綁定，把輔助虛線以及力量計(jì)隱藏。

【動(dòng)畫舞臺(tái)】

代碼如下:

function animate(){

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

var t1 = new Date();

var t = (t1 - t0)/1000;</p> <p> collision();

balls.foreach(function(){

if(!this.inhole) this._run(t);

});

if(dotline.display){

dotline.x0 = balls[0].x;

dotline.y0 = balls[0].y;

dotline._paint();

}</p> <p> t0 = t1;

if(!animateStop){

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

}

else {

setTimeout(animate , 16);

}

}

}

這個(gè)就是游戲每一幀的邏輯處理現(xiàn)場(chǎng)，如果小球進(jìn)洞了，就不再進(jìn)行繪制，如果輔助虛線的display屬性設(shè)成false，就不進(jìn)行輔助虛線的繪制，還有就是計(jì)算每一幀的時(shí)間?！境Ａ颗c初始化】

代碼如下:

var canvas = document.getElementById("cas");

var ctx = canvas.getContext('2d');

var mcl = 1 , collarg = 0.8 , ballRadius = 15 , t0 = 0 , balls=[] , tbw = 32 , animateStop = true , powAnimation = false;

var dotline;

pxpm = canvas.width/20;</p> <p> window.onload = function(){

var myball = new Ball(202 , canvas.height/2 , true);

balls.push(myball);

for(var i=0;i<6;i++){

for(var j=0;j<i;j++){

var other = new Ball(520+i*(ballRadius-2)*2 , (canvas.height-i*2*ballRadius)/2+ballRadius+2*ballRadius*j , false);

balls.push(other);

}

}

t0 = new Date();

dotline = new dotLine(0,0,0,0);</p> <p> animateStop = false;

animate();

}

實(shí)例化所有小球，把小球全部按照規(guī)律擺好，然后獲取當(dāng)前時(shí)間，實(shí)例化輔助虛線，動(dòng)畫開始。