話說這只是一個簡單的DEMO。遊戲性，遊戲規則什麼的我都沒怎麼考慮，如果有興趣細化的朋友可以細化一下，比如細化一下規則，遊戲開關，加個聲音，細化一下進球檢測，更嚴謹甚至可以去查下擊球力度、桌上真實摩擦力等來把遊戲弄的更像遊戲。我只是給個程式思路哈，隨便坐個DEMO而已，玩起來估計還是不會很爽快的~~
桌球遊戲
整個桌球遊戲就兩個類，一個是球，一個是輔助瞄準線。如果想把改遊戲弄的更複雜，還可以再抽像一個形狀類，用來偵測球與角落的碰撞以及進球。我做的這個遊戲採取了最簡單的牆壁碰撞檢測，所以沒有進行球與不規則形狀的碰撞檢測，如果想玩更複雜的碰撞，可以戳關於簡單的碰撞檢測 岑安大大講的還是很好的。好，接下來就一步一步來：
【球】
先貼代碼：
[/code]var Ball = function(x , y , ismine){
this.ismine = ismine;
this.oldx = x;
this.vy = 0;
this.radius = ballRadius;
this.inhole = false;this.moving = true;
}
all,
_paint:function(){
?document.getElementById("wb") : document.getElementById("yb")
ctx.drawImage(b , this.x-this.radius , this.y-this .radius , 2*this.radius , 2*this.radius);
}
b.onload = function(){
.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? this.v -mcl*t : 0.vx mcl) this.vy = Math.abs(this.vy)0? this.vy-mcl*t : this.vy mcl*t);
? -mcl*t : mcl*t;
// this.vy = this.vy>0? -mcl*t : mcl*t;
this.x = t * this.vx * pxpm;
if((this.x370 && this.x490) || (這個.x>377 && 這個.x490) || (這個.x>758 && 這個.y>490)){
this.inhole = true;
if(this.ismine){
var that = this;
setTimeout(function(){
那個。 x = 202;
that that.vx = 0;
that.inhole = false;
🎜> }
document.getElementById("shotNum").innerHTML = parseInt(document.getElementById("shotNum") .in nerHT 🎜> }
if(this.y > canvas.height - (ballRadius tb this.y = this.y this.derectionY = !this.derectionY;
this.vy = -this.vy*0.6;
}
如果(this.x > canvas.width - (ballRadius tbw) || this.x this.x = this.x > }
paint();
ving = false;
}
this .moving = true;
}
,vy球的水平速度以及求垂直速度，ismine代表是白球還是其他球（不同球在_paint方法中繪製的圖片不一樣），oldx,oldy用於保存球的上一幀位置，不過暫時還沒用上，應該有用吧。 _paint方法沒什麼好說的，_run方法就是追蹤小球位置，根據小球每一幀的時間來算出小球的位移增量以及速度增量，mcl和pxpm都是常量，mcl是摩擦力，pxpm是大概算個像素和現實轉換比例。 。 。 。然後就是碰撞偵測，這個很容易理解了，就計算小球的位置有沒有超過邊界，超過了就反彈。不過這種碰撞偵測很不嚴謹，如果真要做遊戲建議用更複雜一些的。還有就是根據小球的速度讓小球靜止。
複製程式碼
this.y1 = this.y1;
this .dotlength = 3;
this.display = false;
}
dotLine.prototype = {
constructor:dotLine,
_ready:function(){
Math .length = Math.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 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();
}
}
就是畫虛線，這個比較簡單了，取得滑鼠的位置和白球位置，然後在兩者之間隔一段距離畫條線，然後就成虛線了。
【多球碰撞偵測】
複製程式碼
