分享一个用html5实现炮弹自由落体的实例代码

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

还有就是前几天看到的这个！！！

都不支持要他干嘛？？？？？

整体思路就是将每个打出来的炮弹看做一个对象，他的x，y转换成canvas的x，y,其中vecior就是个控制力度的一个选项后文会提到。

var cannonBall = function (x,y,vector){ var gravity=0, that={ x: x, y: y, removeMe:false, move: function (){ vector.vy += gravity; gravity += 0.1; //模拟加速度 that.x+=vector.vx; that.y+=vector.vy; if(that.y canvas.height -150){ that.removeMe=true; draw: function (){ ctx.beginPath(); ctx.arc(that.x,that.y,5,0,Math.PI * 2); ctx.fill(); ctx.closePath(); };

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

var vector2d= function (x,y){ var vec={ vx:x, vy:y, scale: function (scale){ vec.vx*=scale; vec.vy*=scale; add:function (vec2){ vec.vx+=vec2.vx; vec.vy+=vec2.vy; sub:function (vec2){ vec.vx-=vec2.vx; vec.vy-=vec2.vy; negate: function(){ vec.vx=-vec.vx; vec.vy=-vec.vy; length:function (){ return Math.sqrt(vec.vx * vec.vx + vec.vy * vec.vy); normalize:function (){ var len=this.length(); if(len){ vec.vx /=len; vec.vy /=len; return len; rotate:function (angle){ var vx = vec.vx; var vy = vec.vy; vec.vx = vx * Math.cos(angle) - vy * Math.sin(angle) vec.vy = vx * Math.sin(angle) + vy * Math.cos(angle); toString:function(){ return ( + vec.vx.toFixed(3) + , + vec.vy.toFixed(3) + )  return vec;};

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

 !doctype html  html lang= en  head  meta charset= UTF-8  meta author= gongbangwei  title 大炮 /title  /head  body  p id= lidu  span 选择大炮的 /span  input type= radio checked= checked value= 25 大 input type= radio value= 20 中 input type= radio value= 15 小 canvas id= can width= 640 height= 480 >结束语
一个真正的前端绝不是ui，一个前端游戏工程师也绝对是个数学家。
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
3. VeVb.com原创html5视频教程
以上就是分享一个用html5实现炮弹自由落体的实例代码的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。