用HTML5制作一个简单的桌球游戏的教程HTML5 audio标签使用js进行播放控制实例HTML5全屏(Fullscreen)API详细介绍HTML5 video播放器全屏(fullScreen)方法实例

话说这只是一个简单的DEMO。游戏性，游戏规则什么的我都没怎么考虑，如果有兴趣细化的朋友可以细化一下，比如细化一下规则，游戏开关，加个声音，细化一下进球检测，更严谨甚至可以去查下击球力度、桌面真实摩擦力等来把游戏弄的更像游戏。我只是给个编程思路哈，随便坐个DEMO而已，玩起来估计还是不会很爽快的~~

桌球游戏
　整个桌球游戏就两个类，一个是球，一个是辅助瞄准线。如果想把改游戏弄的更复杂，还可以再抽象一个形状类，用于检测球与边角的碰撞以及进球。我做的这个游戏采取了最简单的墙壁碰撞检测，所以没有进行球与不规则形状的碰撞检测，如果想玩更复杂的碰撞，可以戳 关于简单的碰撞检测 岑安大大讲的还是很好的。好，接下来就一步一步来：

　　【球】

　　先贴代码：
[/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;
     

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！