用HTML5制作一个简单的桌球游戏的教程_html5教程技巧_HTML/Xhtml_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML/Xhtml

    当前位置:主页 > 网页制作 > HTML/Xhtml >

    用HTML5制作一个简单的桌球游戏的教程_html5教程技巧

    时间:2019-08-13|栏目:HTML/Xhtml|点击:
  • 这篇文章主要介绍了用HTML5制作一个简单的桌球游戏的教程,主要利用到了HTML5的Canvas API,需要的朋友可以参考下

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

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

      【球】

      先贴代码:
    [/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();

    上一篇:利用HTML5绘制点线面组成的3D图形的示例_html5教程技巧

    栏    目:HTML/Xhtml

    下一篇:用HTML5制作一个简单的弹力球游戏_html5教程技巧

    本文标题:用HTML5制作一个简单的桌球游戏的教程_html5教程技巧

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML_Xhtml/20200.html

    您可能感兴趣的文章

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号