Maison > Article > interface Web > Partagez un exemple de code pour réaliser la chute libre de boulets de canon en utilisant HTML5
Partagez un exemple de code pour réaliser la chute libre de boulets de canon en utilisant HTML5
- 零下一度original
- 2017-05-06 11:51:251853parcourir
html5Imitation de la chute libre des obus de canon
Je pense que tout le monde connaît le charme du html5, j'espère que tous les navigateurs prendront bientôt en charge cette fonctionnalité, et laissez Je me plains d'abord, le courtier WeChat est si faible que les animations simples, telles que slide, show(1000) et hide(1000) de jquery sont bloquées, et elles sont toujours bloquées. Le noyau du navigateur qq, le navigateur qq, oubliez ça, je vais d'abord me calmer. . . .
Et celui-là, je l'ai vu il y a quelques jours ! ! !
Pourquoi le veux-tu si tu ne le soutiens pas ? ? ? ? ?
Retour au thème canon
L'idée générale est de traiter chaque boulet de canon tiré comme un objet, et ses x, y sont convertis en Canvas 's x, y, où vecior est une option pour contrôler la force, qui sera mentionnée plus tard.
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();
}
};Les objets des boulets de canon impliquent forcément des calculs vectoriels. J'ai moi-même encapsulé chaque méthode. Il existe un vecteur prêt à l'emploi.js, mais je pense que c'est trop Lourd (pour notre back-end, à chaque fois que le front-end dit qu'il n'y a pas besoin de templates et que c'est trop lourd, on pense tous dans notre cœur que c'est trop lourd, hahaha), c'est très simple et peut implémenter des fonctions simples. Il est fortement recommandé d'utiliser des fonctions prêtes à l'emploi pour les grands jeux.
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;
};D'accord, la prochaine étape consiste à calculer l'angle et à ajouter setInterval. Il n'y a pas grand chose d'autre à dire. Ici, je vais me concentrer sur canvas.save(); .store(); Voici une petite explication,
Lorsque nous effectuons des opérations telles que la rotation, la mise à l'échelle et le panoramique du canevas, nous voulons en fait opérer sur des éléments spécifiques, tels que image, un rectangle. , etc., Mais lorsque vous utilisez la méthode canvas pour effectuer ces opérations, vous opérez en fait sur l'ensemble du canevas, puis tous les éléments du canevas seront affectés plus tard, nous appelons donc canvas.save() pour enregistrer le canevas actuel. avant l'opération. État, après l'opération, supprimez l'état précédemment enregistré, afin qu'il n'affecte pas les autres éléments
Tous les codes
<!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'>小
</p>
<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);
//平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）
ctx.rotate(angle);
//画布旋转
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(){
//在这里调用向量的那个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;
};
//画蓝田和草地
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>Conclusion
Un vrai front-end n'est certainement pas une interface utilisateur, et un ingénieur de jeu front-end est définitivement un mathématicien.
[Recommandations associées]
1 Tutoriel vidéo en ligne h5 gratuit
2. Manuel de la version complète HTML5.
3. Tutoriel vidéo html5 original php.cn
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!