用HTML5製作一個簡單的桌球遊戲的教學_html5教學技巧

話說這只是一個簡單的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.movi​​ng = 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 .movi​​ng = true;
                 }
           ,vy球的水平速度以及求垂直速度，ismine代表是白球還是其他球（不同球在_paint方法中繪製的圖片不一樣），oldx,oldy用於保存球的上一幀位置，不過暫時還沒用上，應該有用吧。 _paint方法沒什麼好說的，_run方法就是追蹤小球位置，根據小球每一幀的時間來算出小球的位移增量以及速度增量，mcl和pxpm都是常量，mcl是摩擦力，pxpm是大概算個像素和現實轉換比例。 。 。 。然後就是碰撞偵測，這個很容易理解了，就計算小球的位置有沒有超過邊界，超過了就反彈。不過這種碰撞偵測很不嚴謹，如果真要做遊戲建議用更複雜一些的。還有就是根據小球的速度讓小球靜止。
 




複製程式碼

程式碼如下:var dotLine = function(x0y0,x11, ){ 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(){
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();
}
}

 就是畫虛線，這個比較簡單了，取得滑鼠的位置和白球位置，然後在兩者之間隔一段距離畫條線，然後就成虛線了。

 

　　【多球碰撞偵測】

複製程式碼

程式碼如下:

function collision(){
for(var i=0;i for(var j=0;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) if(!b1.movi​​ng && !b2.movi​​ng) 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)
　　　　　　　　　　　　　　　ax　　　　　『　　　ax　//將速度分配到碰撞/ > b1.vy = b1.vy-ay;
b2.vx = b2.vx ax;
b2.vy = b2.vy ay;
　　　　　　　 距離碰撞　　　th = ((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;
}
}
}
}
}

 對所有小球進行遍歷，計算兩個小球的球心距離，如果小於兩小球的半徑和，則表示發生了碰撞。如果兩個小球都是靜止的，就不進行碰撞檢測，否則進行計算碰撞後的速度增量，碰撞速度增量的求法可以直接看
小球碰撞的演算法設計

，裡面講的挺詳細的，綜合起來就得出了上面那一串式子了。
　　將速度增量賦給碰撞小球。因為兩個球碰撞那一幀，兩個球是有部分重疊的，所以得進行位置修正，不然小球會一直處於碰撞然後就黏在一起了，位置修正的原理也簡單，算出兩球的球心距離，用勾股定理計算出兩球的重疊區域的寬度，然後把寬度除於2後賦給小球新的位置，新的位置就是兩球的半徑剛好等於球心距。  

　　【老鼠動作】

複製程式碼

程式碼如下:

canvas.addEventListener("mousedown" , function(){
if(balls[0].movi​​e) return;

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.docentY document.body.scrollTop Element.documentY. .querySelector( ".view").offsetTop;
dotline.display = true;
dotline.x0 = balls[0].x;
dotline.y0 = balls[0].y;
點線。 x1 = x;
點線.y1 = y;

window.addEventListener("mouseup" , muHandle , false);
window.addEventListener("mousemove" , mmHandle , false);

function mmHandle(){
var x = event.clientX document.body.scrollLeft document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
var y = event.clientY document .身體. scrollTop document.documentElement.scrollTop - document.querySelector(".view").offsetTop;
dotline.x1 = x;
dotline.y1 = y;
}
function; 🎜> var x = event.clientX document.body.scrollLeft document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
var y = event.rollentY document.body.rollTdocum - document.querySelector(".view").offsetTop;

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 "%"

球[0].vx = x - 球[0].x>0 ？ v*Math.abs(Math.cos(角度)) : -v*Math.abs(Math.cos(角度));
球[0].vy = y - 球[0].y>0 ? v*Math.abs(Math.sin(角度)) : -v*Math.abs(Math.sin(角度));

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

;

window.removeEventListener("mouseup" , muHandle , false);
window.removeEventListener("mousemove" , muHandle , false);
dotline.display = false;t. shotPower") .style.display = "none";
}
},false);

 滑鼠動作也比較簡單，有js基礎的基本上都沒有問題，就是滑鼠點擊後計算滑鼠位置，然後產生輔助虛線滑鼠，移動後修改輔助虛線的端點位置。大小來決定白球的速度，然後重新劃分成水平以及垂直速度賦予白球。

 
【動畫舞台】

     

複製程式碼

程式碼如下：

function animate(){
ctx.clearRect(0,0,canvas.width,canvas.height)
var t1 = new Date();
var t = (t1 - t0)/ 1000;

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

t0 = t1;
if(!animateStop){
if("requestAnimationFrame" 在視窗中){
requestAnimationFrame(animate);
}
else if("webkitRequestAnimation在視窗中){
webkitRequestAnimationFrame(animate);
}
else if("msRequestAnimationFrame" in window){
msRequestAnimationFrame(animate);
} mozRequestAnimationFrame(animate);
}
else {
setTimeout(animate , 16);
}
}
}
}

}
}
}

這就是遊戲幀的邏輯處理現場，如果小球進洞了，就不再進行不平等，如果輔助虛線的顯示屬性設定為假，不會進行輔助虛線的不平等，還有就是計算每一幀的時間。 【常數與初始化】

 

複製程式碼

程式碼如下：



程式碼如下：



程式碼如下：


程式碼如下： var ctx = canvas.getContext('2d');
var mcl = 1 , colong = 0.8 , ballRadius = 15 , t0 = 0 , balltbs=[] , balltbw =w 32 , animateStop = true , powAnimation = false;
var dotline;
pxpm = canvas.width/20;

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

balls.push(myball);
for(var i=0 ;i for(var j=0;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);

animateStop = false; animate(); } 實例化所有小球，把小球按照全部規律擺好，然後獲取當前時間，實例化輔助虛線，動畫開始。 位址原始碼：https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/snooker