文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用HTML5制作一个简单的弹力球游戏

2024-04-02 19:55

关注

本篇内容主要讲解“怎么用HTML5制作一个简单的弹力球游戏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用HTML5制作一个简单的弹力球游戏”吧!

  【创建小球对象】

  第一步就是先创建一个小球对象,写好小球的构造函数:

代码如下:


var Ball = function(x , y , r , color){
           this.x = x;
           this.y = y;
           this.oldx = x;
           this.oldy = y;
           this.vx = 0;
           this.vy = 0;this.radius = r;
           this.color = color;
       }

  小球属性很简单,xy是小球的坐标,vx和vy是小球的初始水平速度和初始垂直速度。radius就是小球的半径,color是小球颜色(为了区分不同球),oldx和oldy是记录小球的上一帧的位置,后期球与球之间碰撞后用于位置修正(后面其实没用上,位置修正直接计算了,如果用oldx来设置很不严谨,不过记录一下,难免会用得到)。

  小球属性写好后,就在小球原型中写小球的动作了:

代码如下:


Ball.prototype = {
           paint:function(){
               ctx.save();
               ctx.beginPath();
               ctx.arc(this.x , this.y , this.radius , 0 , Math.PI*2);
               ctx.fillStyle=this.color;
               ctx.fill();
               ctx.restore();
               this.moving = false;
           },
           run:function(t){
               if(!this.candrod) {
                   this.paint();
                   return};
               this.oldx = this.x;
               this.oldy = this.y;</p> <p>                
                if(Math.abs(this.vx) < 0.01){
                    this.vx = 0;
                }
                else this.vx += this.vx>0? -mocali*t : mocali*t;</p> <p>                 this.vy = this.vy + g * t;
               
                this.x += t * this.vx * pxpm;
                this.y += t * this.vy * pxpm;</p> <p>                 if(this.y > canvas.height - ballRadius || this.y < ballRadius){
                    this.y = this.y < ballRadius ? ballRadius : (canvas.height - ballRadius);
                    this.vy = -this.vy*collarg
                }
                if(this.x > canvas.width - ballRadius || this.x < ballRadius){
                    this.x = this.x < ballRadius ? ballRadius : (canvas.width - ballRadius);
                    this.derectionX = !this.derectionX;
                    this.vx = -this.vx*collarg;
                }
                this.paint();
           },</p> <p>        }

  小球的动作方法也很简单,就两个,第一个方法是把自己画出来,第二个方法就是控制小球的运动。t是当前帧与上一帧的时间差。用于计算小球的速度的增量从而得出小球的位移增量,从而计算出小球的新位置并且将小球重绘。得出新位置的同时判断小球的新位置有无超出墙壁,如果超出则进行速度修正让小球反弹。

  第二个方法里的一些常量ballRadius =30, g = 9.8 , mocali = 0.5,balls = [],collarg = 0.8,pxpm = canvas.width/20; 意思很明显:ballradius是球半径,g是重力加速度,mocali是空气阻力引起的水平方向的减速度,balls是一个用于存放小球对象的数组,collarg是弹力系数。pxpm是像素与米之间的映射,把画布当成是20米宽的区域。

  【碰撞检测】

  创建好小球对象后,就开始写碰撞了,小球与小球之间的碰撞:

代码如下:


function collision(){
           for(var i=0;i<balls.length;i++){
               for(var j=0;j<balls.length;j++){
                   var b1 = balls[i],b2 = balls[j];
                   if(b1 !== b2){
                       var rc = Math.sqrt(Math.pow(b1.x - b2.x , 2) + Math.pow(b1.y - b2.y , 2));
                       if(Math.ceil(rc) < (b1.radius + b2.radius)){</p> <p>                            //获得碰撞后速度的增量
                           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)</p> <p>                            //给与小球新的速度
                           b1.vx = (b1.vx-ax)*collarg;
                           b1.vy = (b1.vy-ay)*collarg;
                           b2.vx = (b2.vx+ax)*collarg;
                           b2.vy = (b2.vy+ay)*collarg;</p> <p>                            //获取两球斜切位置并且强制扭转
                           var clength = ((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;
                       }
                   }
               }
           }
       }</p> <p>


  每一帧都进行小球之间碰撞的判断,如果两个小球球心距离小于两球半径之和,则证明两个小球发生了碰撞。然后进行计算两个小球碰撞之后的速度变化量。ax和ay就是速度变化量。 
后面长长的公式就是这个:
怎么用HTML5制作一个简单的弹力球游戏

具体原理我就不说了,想了解原理就直接戳 小球碰撞的算法设计 。 下面那段就是防止小球重复碰撞检测导致无法正常反弹,所以计算两小球的球心距离,然后算出两个小球的斜切位置,并且将两个小球的位置进行更正。

  【运动动画】

  最后一步:

代码如下:

</p> <p>canvas.onclick = function(event){
               event = event || window.event;
               var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - canvas.offsetLeft;
               var y= event.clientY + document.body.scrollTop + document.documentElement.scrollTop - canvas.offsetTop;</p> <p>                balls.forEach(function(){
                   this.vx = (x - this.x)/20; //初速度 m/s
                   this.vy = (y - this.y)/20;
               });
           }</p> <p>            </p> <p>            function animate(){
               ctx.save();
               ctx.fillStyle = "rgba(255,255,255,0.2)";
               ctx.fillRect(0,0,canvas.width,canvas.height)
               ctx.restore();
               // ctx.clearRect(0,0,canvas.width,canvas.height)</p> <p>                 var t1 = new Date();
                var t = (t1 - t0)/1000;
                collision();
                balls.forEach(function(){
                    this.run(t);
                });
               
                t0 = t1;</p> <p>                 if("requestAnimationFrame" in window){
                   requestAnimationFrame(animate);
               }
               else if("webkitRequestAnimationFrame" in window){
                   webkitRequestAnimationFrame(animate);
               }
               else if("msRequestAnimationFrame" in window){
                   msRequestAnimationFrame(animate);
               }
               else if("mozRequestAnimationFrame" in window){
                   mozRequestAnimationFrame(animate);
               }
           }
       }</p> <p>

通过点击画布的位置来给于小球初速度,然后animate就是动画的每一帧运行的方法。上面的 ctx.fillStyle = "rgba(255,255,255,0.2)"; ctx.fillRect(0,0,canvas.width,canvas.height)是给小球添加虚影,我觉得这样会更好看,如果觉得不喜欢,就直接用clearRect清除就行了。然后就是计算每一帧的时间差,然后对小球数组里小球数组进行遍历重绘。然后再加入碰撞检测的collision方法。动画也就做完了。

  至此,就已经写完了,源码地址:

  https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Other-demo/shotBall.html

到此,相信大家对“怎么用HTML5制作一个简单的弹力球游戏”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯