html5仿大炮炮彈的自由落體實(shí)現(xiàn)
??html5的魅力相信大家不會(huì)陌生票罐，希望各位大大瀏覽器們?cè)琰c(diǎn)支持這個(gè)特性哦笑旺，量承，還有先吐槽一句题禀，微信的那個(gè)broser簡直弱爆了就簡單的動(dòng)畫鞋诗，比如滑動(dòng)，就jquery的show(1000)迈嘹，hide(1000)都卡的不行削彬，還是qq瀏覽器的內(nèi)核全庸，qq瀏覽器，融痛，壶笼，算了，雁刷，我先冷靜下覆劈。。安券。墩崩。
還有就是前幾天看到的這個(gè)！：蠲恪鹦筹！
都不支持要他干嘛？址貌？铐拐？？练对？
回歸主題大炮
整體思路就是將每個(gè)打出來的炮彈看做一個(gè)對(duì)象遍蟋，他的x，y轉(zhuǎn)換成canvas的x螟凭，y,其中vecior就是個(gè)控制力度的一個(gè)選項(xiàng)后文會(huì)提到虚青。
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();
}
};
其中大炮炮彈的對(duì)象勢(shì)必涉及到了向量計(jì)算，自己封裝了個(gè)個(gè)方法螺男，棒厘，有現(xiàn)成的Vector.js,但覺得太重（對(duì)于我們后端每次前端說不用模板，說太重下隧，我們心里都默想重你妹呀奢人，，哈哈哈）淆院，很簡單何乎，實(shí)現(xiàn)簡單功能可以，大型游戲強(qiáng)烈建議使用現(xiàn)成的土辩。
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;
};
好了支救，接著就是個(gè)計(jì)算角度再加上setInterval了，拷淘，其他沒啥說的搂妻，這里我著重說下canvas.save();和canvas.restore();這里稍微解釋一下，
當(dāng)我們對(duì)畫布進(jìn)行旋轉(zhuǎn)辕棚，縮放，平移等操作的時(shí)候其實(shí)我們是想對(duì)特定的元素進(jìn)行操作，比如圖片逝嚎，一個(gè)矩形等扁瓢，但是當(dāng)你用canvas的方法來進(jìn)行這些操作的時(shí)候，其實(shí)是對(duì)整個(gè)畫布進(jìn)行了操作补君，那么之后在畫布上的元素都會(huì)受到影響引几，所以我們?cè)诓僮髦罢{(diào)用canvas.save()來保存畫布當(dāng)前的狀態(tài)，當(dāng)操作之后取出之前保存過的狀態(tài)挽铁，這樣就不會(huì)對(duì)其他的元素進(jìn)行影響
全部代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta author='gongbangwei'>
<title>大炮</title>
</head>
<body>
<div id='lidu'>
<span>選擇大炮的</span>
<input type="radio" checked='checked' value='25'>大
<input type="radio" value='20'>中
<input type="radio" value='15'>小
</div>
<canvas id='can' width="640" height="480" style=" border:2px solid">no support html5</canvas>
<script src='vector2d.js'></script>
<script src='jquery/jquery-1.7.2.min.js'></script>
<script>
var gameObj=[],
canvas=document.getElementById('can'),
ctx=canvas.getContext('2d');
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,8,0,Math.PI * 2);
ctx.fill();
ctx.closePath();
}
};
return that;
}
var cannon= function (x,y,lidu){
var mx=0,
my=0,
angle=0,
that={
x: x,
y: y,
lidu:lidu,
angle:0,
removeMe:false,
move:function (){
angle=Math.atan2(my-that.y,mx-that.x);
},
draw:function(){
ctx.save();
ctx.lineWidth=2;
ctx.translate(that.x,that.y);
//平移伟桅，將畫布的坐標(biāo)原點(diǎn)向左右方向移動(dòng)x，向上下方向移動(dòng)y.canvas的默認(rèn)位置是在（0,0）
ctx.rotate(angle);
//畫布旋轉(zhuǎn)
ctx.strokeRect(0,-5,50,10);
ctx.moveTo(0,0);
ctx.beginPath();
ctx.arc(0,0,15,0,Math.PI * 2 );
ctx.fill();
ctx.closePath();
ctx.restore();
}
};//end that
canvas.onmousedown = function(){
//在這里調(diào)用向量的那個(gè)js
var vec = vector2d(mx-that.x,my-that.y);
vec.normalize();
//console.log(lidu);
vec.scale(lidu);
gameObj.push(cannonBall(that.x,that.y,vec));
}
canvas.onmousemove = function (event){
var bb= canvas.getBoundingClientRect();
mx=(event.clientX - bb.left);
my=(event.clientY - bb.top);
};
return that;
};
//畫藍(lán)田和草地
var drawSkyAndGrass = function (){
ctx.save();
ctx.globalAlpha= 0.4;
var linGrad=ctx.createLinearGradient(0,0,0,canvas.height);
linGrad.addColorStop(0,'#00BFFF');
linGrad.addColorStop(0.5,'white');
linGrad.addColorStop(0.5,'#55dd00');
linGrad.addColorStop(1,'white');
ctx.fillStyle=linGrad;
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.restore();
}
///////main/////////////
var lidu=$('#lidu').find("input:checked").val();
gameObj.push(cannon(50,canvas.height-150,lidu));
$('#lidu').click(function (event){
var cl=event.target;
$(this).find('input').each(function(){
$(this).attr('checked',false)
});
$(cl).attr('checked',true);
lidu=$(cl).val();
gameObj.splice(0,gameObj.length);
gameObj.push(cannon(50,canvas.height-150,lidu));
})
setInterval( function (){
drawSkyAndGrass();
var gameObj_fresh=[];
for (var i = 0; i < gameObj.length; i++) {
gameObj[i].move();
gameObj[i].draw();
if(gameObj[i].removeMe === false){
gameObj_fresh.push(gameObj[i]);
}
}
gameObj=gameObj_fresh;
},50);
</script>
</body>
</html>
結(jié)束語
一個(gè)真正的前端絕不是ui叽掘，一個(gè)前端游戲工程師也絕對(duì)是個(gè)數(shù)學(xué)家楣铁。
