利用html5实现炮弹自由落体的案例-创新互联
这篇文章主要介绍了利用html5实现炮弹自由落体的案例,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
创新互联公司公司2013年成立,先为颍上等服务建站,颍上等地企业,进行企业商务咨询服务。为颍上企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。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()来保存画布当前的状态,当操作之后取出之前保存过的状态,这样就不会对其他的元素进行影响
结束语大炮 选择大炮的 大 中 小
一个真正的前端绝不是ui,一个前端游戏工程师也绝对是个数学家。
感谢你能够认真阅读完这篇文章,希望小编分享利用html5实现炮弹自由落体的案例内容对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站制作公司行业资讯频道,遇到问题就找创新互联建站,详细的解决方法等着你来学习!
网站名称:利用html5实现炮弹自由落体的案例-创新互联
URL地址:http://ybzwz.com/article/hgich.html