利用html5实现炮弹自由落体的案例

  介绍

这篇文章主要介绍了利用html5实现炮弹自由落体的案例,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

html5仿大炮炮弹的自由落体实现

html5的魅力相信大家不会陌生,希望各位大大浏览器们早点支持这个特性哦,,还有先吐槽一句,微信的那个兄弟简直弱爆了就简单的动画,比如滑动,就jquery的显示(1000),隐藏(1000)都卡的不行,还是qq浏览器的内核,qq浏览器,,,算的了,,我先冷静下....

利用html5实现炮弹自由落体的案例“> <br/> </p> <p>都不支持要他干嘛? ? ? ? ? </p> <h5>回归主题大炮</h5> <blockquote> <p>整体思路就是将每个打出来的炮弹看做一个对象,他的x, y转换成画布的x, y,其中vecior就是个控制力度的一个选项后文会提到。</p> </引用> <pre class= var炮弹=function (x, y,向量){   var重力=0,   ,={   x: x,   y: y,   removeMe:假的,   移动:函数(){   向量。v +=重力;   重力+=0.1;//模拟加速度   that.x +=vector.vx;   that.y +=vector.vy;   如果(。y比;画布。身高-150){   that.removeMe=true;   }   },   画:函数(){   ctx.beginPath ();   ctx.arc (that.x that.y 5 0,数学。π* 2);   ctx.fill ();   ctx.closePath ();   }   };

其中大炮炮弹的对象势必涉及到了向量计算,自己封装了个个方法,,有现成的向量。js,但觉得太重(对于我们后端每次前端说不用模板,说太重,我们心里都默想重你妹呀,,哈哈哈),很简单,实现简单功能可以,大型游戏强烈建议使用现成的。

 var vector2d=function (x, y) {
  vec={var
  vx: x,
  v: y,
  规模:函数(规模){
  vec.vx *=规模;
  vec.vy *=规模;
  },
  添加:函数(vec2) {
  vec.vx +=vec2.vx;
  vec.vy +=vec2.vy;
  },
  子:函数(vec2) {
  vec.vx -=vec2.vx;
  vec.vy -=vec2.vy;
  },
  否定:函数(){
  vec.vx=-vec.vx;
  vec.vy=-vec.vy;
  },
  长度:函数(){
  返回Math.sqrt(矢量。vx *矢量。vx +矢量。v * vec.vy);
  },
  规范化:函数(){
  var len=this.length ();
  如果(len) {
  矢量。vx/=兰;
  矢量。v/=兰;
  }
  返回兰;
  },
  旋转:函数(角){
  var vx=vec.vx;
  var v=vec.vy;
  矢量。vx=vx * Math.cos(角)- v * sin(角)
  矢量。v=vx * sin(角)+ v * Math.cos(角);
  },
  toString:函数(){
  返回& # 39;(& # 39;+ vec.vx.toFixed (3) + & # 39;, & # 39;+ vec.vy.toFixed (3) + & # 39;) & # 39;;
  }
  };
  返回矢量;
  };

好了,接着就是个计算角度再加上setInterval了,,其他没啥说的,这里我着重说下canvas.save();和canvas.restore();这里稍微解释一下,
,当我们对画布进行旋转,缩放,平移等操作的时候其实我们是想对特定的元素进行操作,比如图片,一个矩形等,但是当你用帆布的方法来进行这些操作的时候,其实是对整个画布进行了操作,那么之后在画布上的元素都会受到影响,所以我们在操作之前调用canvas.save()来保存画布当前的状态,当操作之后取出之前保存过的状态,这样就不会对其他的元素进行影响

全部代码
& lt; !doctype html>   & lt; html lang=癳n"祝辞   & lt; head>   & lt;元charset=癠TF-8"祝辞   & lt;元作者=& # 39;gongbangwei& # 39;比;   & lt; title>大炮& lt;/title>   & lt;/head>   & lt; body>   & lt; p id=& # 39; lidu& # 39;比;   & lt; span>选择大炮的& lt;/span>   & lt;输入类型=皉adio"=& # 39;检查检查# 39;值=https://www.yisu.com/zixun/' 25 '>大   小   

     <帆布id=翱梢浴笨矶?=" 480 "风格=" 640 "高度"边境:2 px固体">不支持html5画布