查看: 7111|回复: 40

用HTML5-Canvas 写一个桌球游戏!

  [复制链接]
发表于 2016-12-24 21:51:00 | 显示全部楼层 |阅读模式
这只是一个简单的DEMO。游戏性、游戏规则没怎么考虑,如果有兴趣细化的朋友可以细化一下,比如细化一下规则,游戏开关,加个声音,细化一下进球检测,更严谨甚至可以去查下击球力度、桌面真实摩擦力等来把游戏弄的更像游戏。我只是给个编程思路,做一个DEMO而已,玩起来估计还是会很爽快的~~
be02ca2f847cb614ab09d8198fa7f399.jpg


55d5c5a3d24f711f0e5dce892127390e.jpg


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

【球】
  1. var Ball = function(x , y , ismine){
  2.             this.x = x;
  3.             this.y = y;
  4.             this.ismine = ismine;
  5.             this.oldx = x;
  6.             this.oldy = y;
  7.             this.vx = 0;
  8.             this.vy = 0;
  9.             this.radius = ballRadius;
  10.             this.inhole = false;this.moving = true;
  11.         }
  12.         Ball.prototype = {
  13.             constructor:Ball,
  14.             _paint:function(){
  15.                 var b = this.ismine?document.getElementById("wb") : document.getElementById("yb")
  16.                 if(b.complete) {
  17.                     ctx.drawImage(b , this.x-this.radius , this.y-this.radius , 2*this.radius , 2*this.radius);
  18.                 }
  19.                 else {
  20.                     b.onload = function(){
  21.                         ctx.drawImage(b , this.x-this.radius , this.y-this.radius , 2*this.radius , 2*this.radius);
  22.                     }
  23.                 }
  24.             },
  25.             _run:function(t){
  26.                 this.oldx = this.x;
  27.                 this.oldy = this.y;
  28.                 this.vx = Math.abs(this.vx)<0.1? 0 : (this.vx>0? this.vx-mcl*t : this.vx+mcl*t);
  29.                  this.vy = Math.abs(this.vy)<0.1? 0 : (this.vy>0? this.vy-mcl*t : this.vy+mcl*t);
  30.                 // this.vx += this.vx>0? -mcl*t : mcl*t;
  31.                 // this.vy += this.vy>0? -mcl*t : mcl*t;
  32.                  this.x += t * this.vx * pxpm;
  33.                  this.y += t * this.vy * pxpm;
  34.                  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)){
  35.                      this.inhole = true;
  36.                      if(this.ismine){
  37.                          var that = this;
  38.                          setTimeout(function(){
  39.                              that.x = 202;
  40.                              that.y = canvas.height/2;
  41.                              that.vx = 0;
  42.                              that.vy = 0;
  43.                              that.inhole = false;
  44.                          } , 500)
  45.                      }
  46.                      else {
  47.                          document.getElementById("shotNum").innerHTML = parseInt(document.getElementById("shotNum").innerHTML)+1
  48.                      }
  49.                  }
  50.                  else {
  51.                      if(this.y > canvas.height - (ballRadius+tbw) || this.y < (ballRadius+tbw)){
  52.                          this.y = this.y < (ballRadius+tbw) ? (ballRadius+tbw) : (canvas.height - (ballRadius+tbw));
  53.                          this.derectionY = !this.derectionY;
  54.                          this.vy = -this.vy*0.6;
  55.                      }
  56.                      if(this.x > canvas.width - (ballRadius+tbw) || this.x < (ballRadius+tbw)){
  57.                          this.x = this.x < (ballRadius+tbw) ? (ballRadius+tbw) : (canvas.width - (ballRadius+tbw));
  58.                          this.derectionX = !this.derectionX;
  59.                          this.vx = -this.vx*0.6;
  60.                      }
  61.                  }
  62.                  this._paint();
  63.                  if(Math.abs(this.vx)<0.1 && Math.abs(this.vy)<0.1){
  64.                      this.moving = false;
  65.                  }
  66.                  else {
  67.                      this.moving = true;
  68.                  }
  69.             }
  70.         }
复制代码

球类的属性:x,y球的位置,vx,vy球的水平速度以及求得垂直速度,ismine代表是白球还是其他球(不同球在_paint方法中绘制的图片不一样),oldx,oldy用于保存球的上一帧位置,不过暂时还没用上,应该有用吧。_paint方法没什么好说的,_run方法就是跟踪小球位置,根据小球每一帧的时间来算出小球的位移增量以及速度增量,mcl和pxpm都是常量,mcl是摩擦力,pxpm是大概算个像素和现实转换比例。。。。然后就是碰撞检测,这个很容易理解了,就计算小球的位置有没有超过边界,超过了就反弹。不过这种碰撞检测很不严谨,如果真要做游戏建议用更复杂一些的。还有就是根据小球的速度来让小球静止。

【辅助线】
  1. var dotLine = function(x0,y0,x1,y1){
  2.             this.x0 = this.x0;
  3.             this.y0 = this.y0;
  4.             this.x1 = this.x1;
  5.             this.y1 = this.y1;
  6.             this.dotlength = 3;
  7.             this.display = false;
  8.         }
  9.         dotLine.prototype = {
  10.             constructor:dotLine,
  11.             _ready:function(){
  12.                 this.length = Math.sqrt(Math.pow(this.y1 - this.y0 , 2)+Math.pow(this.x1 - this.x0 , 2));
  13.                 this.dotNum = Math.ceil(this.length/this.dotlength);
  14.             },
  15.             _paint:function(){
  16.                 this._ready();
  17.                 xadd = this.dotlength*(this.x1 - this.x0)/this.length;
  18.                 yadd = this.dotlength*(this.y1 - this.y0)/this.length;
  19.                 ctx.save();
  20.                 ctx.beginPath();
  21.                 for(var i=1;i<=this.dotNum;i++){
  22.                     if(i%2!==0){
  23.                         ctx.moveTo(this.x0+(i-1)*xadd , this.y0+(i-1)*yadd);
  24.                         ctx.lineTo(this.x0+i*xadd , this.y0+i*yadd);
  25.                     }
  26.                 }
  27.                 ctx.strokeStyle = "#FFF";
  28.                 ctx.stroke();
  29.                 ctx.beginPath();
  30.                 ctx.arc(this.x1 , this.y1 , ballRadius-2 , 0 , 2*Math.PI);
  31.                 ctx.stroke();
  32.                 ctx.restore();
  33.             }
  34.         }
复制代码

就是画虚线,这个比较简单了,获取鼠标的位置和白球位置,然后在两者之间隔一段距离画条线,然后就成虚线了。

【多球碰撞检测】
  1. function collision(){
  2.             for(var i=0;i<balls.length;i++){
  3.                 for(var j=0;j<balls.length;j++){
  4.                     var b1 = balls,b2 = balls[j];
  5.                     if(b1 !== b2 && !b1.inhole && !b2.inhole){
  6.                         var rc = Math.sqrt(Math.pow(b1.x - b2.x , 2) + Math.pow(b1.y - b2.y , 2));
  7.                         if(Math.ceil(rc) < (b1.radius + b2.radius)){
  8.                             if(!b1.moving && !b2.moving) return;
  9.                             //获取碰撞后的速度增量
  10.                             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)
  11.                             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)
  12.                 //将速度增量赋给碰撞小球
  13.                             b1.vx = b1.vx-ax;
  14.                             b1.vy = b1.vy-ay;
  15.                             b2.vx = b2.vx+ax;
  16.                             b2.vy = b2.vy+ay;
  17.                 //修正小球碰撞距离
  18.                             var clength = ((b1.radius+b2.radius)-rc)/2;
  19.                             var cx = clength * (b1.x-b2.x)/rc;
  20.                             var cy = clength * (b1.y-b2.y)/rc;
  21.                             b1.x = b1.x+cx;
  22.                             b1.y = b1.y+cy;
  23.                             b2.x = b2.x-cx;
  24.                             b2.y = b2.y-cy;
  25.                         }
  26.                     }
  27.                 }
  28.             }
  29.         }
复制代码

对所有小球进行遍历,计算两个小球的球心距离,如果小于两小球的半径和,则说明发生了碰撞。如果两个小球都是静止的,就不进行碰撞检测,否则进行计算碰撞后的速度增量,碰撞速度增量的求法可以直接看 小球碰撞的算法设计 ,里面讲的挺详细的,综合起来就得出了上面那一串式子了。

将速度增量赋给碰撞小球。因为两个球碰撞那一帧,两个球是有部分重叠的,所以得进行位置修正,不然小球会一直处于碰撞然后就黏在一起了,位置修正的原理也简单,算出两球的球心距离,通过勾股定理计算出两球的重叠区域的宽度,然后把宽度除于2后赋给小球新的位置,新的位置就是两个球的半径刚好等于球心距。

【鼠标动作】

  1. canvas.addEventListener("mousedown" , function(){
  2.             if(balls[0].moving) return;
  3.             document.querySelector(".shotPower").style.display = "block";
  4.             document.querySelector(".shotPower").style.top = balls[0].y-60 + "px";
  5.             document.querySelector(".shotPower").style.left = balls[0].x-40 +"px";
  6.             document.getElementById("pow").className = "animate";
  7.             var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
  8.             var y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - document.querySelector(".view").offsetTop;
  9.             dotline.display = true;
  10.             dotline.x0 = balls[0].x;
  11.             dotline.y0 = balls[0].y;
  12.             dotline.x1 = x;
  13.             dotline.y1 = y;
  14.             window.addEventListener("mouseup" , muHandle , false);
  15.             window.addEventListener("mousemove" , mmHandle , false);
  16.             function mmHandle(){
  17.                 var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
  18.                 var y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - document.querySelector(".view").offsetTop;
  19.                 dotline.x1 = x;
  20.                 dotline.y1 = y;
  21.             }
  22.             function muHandle(){
  23.                 var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - document.querySelector(".view").offsetLeft;
  24.                 var y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - document.querySelector(".view").offsetTop;
  25.                 var angle = Math.atan((y - balls[0].y)/(x - balls[0].x));
  26.                 var h = document.getElementById("pow").offsetHeight/document.getElementById("powbar").offsetHeight;
  27.                 var v = 60*h;
  28.                 document.getElementById("pow").style.height = h*100+"%"
  29.                 balls[0].vx = x - balls[0].x>0 ? v*Math.abs(Math.cos(angle)) : -v*Math.abs(Math.cos(angle));
  30.                 balls[0].vy = y - balls[0].y>0 ? v*Math.abs(Math.sin(angle)) : -v*Math.abs(Math.sin(angle));
  31.                 document.getElementById("pow").className = "";
  32.                 window.removeEventListener("mouseup" , muHandle , false);
  33.                 window.removeEventListener("mousemove" , muHandle , false);
  34.                 dotline.display = false;
  35.                 document.querySelector(".shotPower").style.display = "none";
  36.             }
  37.         },false);
复制代码
鼠标动作也比较简单,有js基础的基本上都没问题,就是鼠标按下后计算鼠标位置,然后产生辅助虚线,鼠标移动后修改辅助虚线的终点位置。鼠标按下的时候旁边产生一个力量计,我就只用用animation做动画了,然后鼠标按键抬起时通过计算力量计的大小来确定白球的速度,然后再分解成水平速度以及垂直速度赋给白球。同时取消鼠标移动以及鼠标抬起的事件绑定,把辅助虚线以及力量计隐藏。

【动画舞台】

  1.   function animate(){
  2.             ctx.clearRect(0,0,canvas.width,canvas.height)
  3.              var t1 = new Date();
  4.              var t = (t1 - t0)/1000;
  5.              collision();
  6.              balls.foreach(function(){
  7.                  if(!this.inhole) this._run(t);
  8.              });
  9.              if(dotline.display){
  10.                  dotline.x0 = balls[0].x;
  11.                  dotline.y0 = balls[0].y;
  12.                  dotline._paint();
  13.              }
  14.              t0 = t1;
  15.              if(!animateStop){
  16.                  if("requestAnimationFrame" in window){
  17.                      requestAnimationFrame(animate);
  18.                  }
  19.                  else if("webkitRequestAnimationFrame" in window){
  20.                      webkitRequestAnimationFrame(animate);
  21.                  }
  22.                  else if("msRequestAnimationFrame" in window){
  23.                      msRequestAnimationFrame(animate);
  24.                  }
  25.                  else if("mozRequestAnimationFrame" in window){
  26.                      mozRequestAnimationFrame(animate);
  27.                  }
  28.                  else {
  29.                      setTimeout(animate , 16);
  30.                  }
  31.              }
  32.         }
复制代码

这个就是游戏每一帧的逻辑处理现场,如果小球进洞了,就不再进行绘制,如果辅助虚线的display属性设成false,就不进行辅助虚线的绘制,还有就是计算每一帧的时间。

【常量与初始化】

  1. var canvas = document.getElementById("cas");
  2.         var ctx = canvas.getContext('2d');
  3.         var mcl = 1 , collarg = 0.8 , ballRadius = 15 , t0 = 0 , balls=[] , tbw = 32 , animateStop = true , powAnimation = false;
  4.         var dotline;
  5.         pxpm = canvas.width/20;
  6.         window.onload = function(){
  7.             var myball = new Ball(202 , canvas.height/2 , true);
  8.             balls.push(myball);
  9.             for(var i=0;i<6;i++){
  10.                 for(var j=0;j<i;j++){
  11.                     var other = new Ball(520+i*(ballRadius-2)*2 , (canvas.height-i*2*ballRadius)/2+ballRadius+2*ballRadius*j , false);
  12.                     balls.push(other);
  13.                 }
  14.             }
  15.             t0 = new Date();
  16.             dotline = new dotLine(0,0,0,0);
  17.             animateStop = false;
  18.             animate();
  19.         }
复制代码


底部的那两个方法是写两条线相交的判定和交点的获取,实例化所有小球,把小球全部按照规律摆好,然后获取当前时间,实例化辅助虚线,动画开始。


游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2017-1-6 13:29:10 | 显示全部楼层
能下载吗这个代码
回复 支持 反对

使用道具 举报

发表于 2017-1-16 22:28:45 | 显示全部楼层
有兴趣看看的哦
回复 支持 反对

使用道具 举报

发表于 2017-1-18 15:23:29 | 显示全部楼层
gggggggggggggggggggggg
回复 支持 反对

使用道具 举报

发表于 2017-1-18 17:35:40 | 显示全部楼层
1111111111111111111
回复 支持 反对

使用道具 举报

发表于 2017-1-23 16:04:28 | 显示全部楼层
厉害了,word哥
回复 支持 反对

使用道具 举报

发表于 2017-2-2 14:40:33 | 显示全部楼层
好棒啊,好棒啊嘎阿嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎
回复 支持 反对

使用道具 举报

发表于 2017-2-14 15:43:17 | 显示全部楼层
厉害了,word哥
回复 支持 反对

使用道具 举报

发表于 2017-3-30 14:10:28 | 显示全部楼层
也要马币吗
回复 支持 反对

使用道具 举报

发表于 2017-3-30 14:20:09 | 显示全部楼层
学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习学习
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



快速回复 返回顶部 返回列表