Heim > Artikel > Web-Frontend > Teilen Sie einen Beispielcode, der HTML5 verwendet, um den freien Fall von Kanonenkugeln zu realisieren
Teilen Sie einen Beispielcode, der HTML5 verwendet, um den freien Fall von Kanonenkugeln zu realisieren
- 零下一度Original
- 2017-05-06 11:51:251853Durchsuche
html5Nachahmung des freien Falls von Kanonengranaten
Ich glaube, jeder kennt den Charme von HTML5, ich hoffe, dass alle Browser diese Funktion bald unterstützen, und lass es Ich beschwere mich zuerst, der WeChat-Broker ist so schwach. Einfache Animationen wie Sliding, Show(1000) und Hide(1000) von jquery bleiben hängen. Der Kern des QQ-Browsers, QQ-Browser, vergessen Sie es, ich werde mich zuerst beruhigen. . . .
Und dieses hier habe ich vor ein paar Tagen gesehen! ! !
Warum willst du ihn, wenn du es nicht unterstützt? ? ? ? ?
Zurück zum Thema Kanone
Die Gesamtidee besteht darin, jede abgefeuerte Kanonenkugel als Objekt zu behandeln und ihre x, y in umzuwandeln x, y der Leinwand , wobei vecior eine Option zur Steuerung der Stärke ist, die später erwähnt wird.
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();
}
};Die Objekte der Kanonenkugeln beinhalten zwangsläufig Vektorberechnungen. Ich habe jede Methode selbst gekapselt.js, Aber ich denke, es ist zu schwer (für unser Back-End, jedes Mal, wenn das Front-End sagt, dass keine Vorlagen erforderlich sind und es zu schwer ist, denken wir alle in unserem Herzen, dass es zu schwer ist, hahaha), das ist es sehr einfach und kann einfache Funktionen umsetzen. Es wird dringend empfohlen, für große Spiele vorgefertigte Vorlagen zu verwenden.
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;
};Okay, der nächste Schritt besteht darin, den Winkel zu berechnen und setInterval hinzuzufügen. Hier werde ich mich auf Canvas.save(); und Canvas konzentrieren .restore(); Hier ist eine kleine Erklärung:
Wenn wir Operationen wie Drehung, Skalierung und Übersetzung auf der Leinwand ausführen, möchten wir tatsächlich bestimmte Elemente bearbeiten, z. B. Bild usw. Wenn Sie diese Vorgänge jedoch mit der Canvas-Methode ausführen, bearbeiten Sie tatsächlich die gesamte Leinwand und sind dann alle Elemente auf der Leinwand betroffen. Daher rufen wir vorab Canvas.save () auf, um die aktuelle Leinwand zu speichern Status, entfernen Sie nach dem Vorgang den zuvor gespeicherten Status, damit er keine Auswirkungen auf andere Elemente hat
Alle 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>Fazit
Ein echtes Frontend ist definitiv keine Benutzeroberfläche, und ein Frontend-Spieleentwickler ist definitiv ein Mathematiker.
[Verwandte Empfehlungen]
1. Kostenloses h5-Online-Video-Tutorial
3. php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode, der HTML5 verwendet, um den freien Fall von Kanonenkugeln zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen