用HTML5制作一個(gè)簡(jiǎn)單的桌球游戲的教程

投稿有獎(jiǎng)

由 金聰采編 分享 時(shí)間：2017-09-05 加入收藏 我要投稿 點(diǎn)贊 侵權(quán)舉報(bào)/版權(quán)申訴

話說這只是一個(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ù)小球的速度來讓小球靜止。
 

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

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

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

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

源碼地址：https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/snooker