作者:阵风阿斯顿 | 来源:互联网 | 2020-07-28 05:56
html5仿大炮炮弹的自由落体实现html5的魅力相信大家不会陌生,希望各位大大浏览器们早点支持这个特性哦,,还有先吐槽一句,微信的那个broser简直弱爆了就简单的动画,比如滑动,就jquery的show(1000),hide(1000)都卡的不行,还是qq浏览器的内核,qq浏览器,,,算了,,我先冷静下。。。。还有就是前几天看到的这个!!!都不支持要他干嘛?????回归主题大炮整体思路就...
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()来保存画布当前的状态,当操作之后取出之前保存过的状态,这样就不会对其他的元素进行影响
全部代码
选择大炮的
大
中
小
no support html5
结束语 一个真正的前端绝不是ui,一个前端游戏工程师也绝对是个数学家。
【