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

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

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

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

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画布