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

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

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

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

    学canvas学了有一个多礼拜了,觉得canvas真心好玩。学canvas的人想法估计都跟我差不多,抱着写游戏的态度去学canvas的。所以运动学啊、碰撞检测啊、一些简单的算法神马的是基础啊。以前没做过游戏的我学起来还真心吃力。今天就来说下用canvas写个最简单的弹力球游戏,就运用了最简单的重力作用以及碰撞检测。

      先上DEMO:弹力球DEMO (鼠标点击canvas里的空白区域会给与小球新速度)

      【创建小球对象】

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

    复制代码代码如下:
    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就是速度变化量。 
    后面长长的公式就是这个:
    2015512173816364.png (334×192)

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

    栏    目:HTML/Xhtml

    下一篇:用HTML5制作视频拼图的教程_html5教程技巧

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

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

    您可能感兴趣的文章

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

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

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

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

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