Web-Frontend
H5-Tutorial
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
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
SVM-Beispiele in Python
Jun 11, 2023 pm 08:42 PM
Support Vector Machine (SVM) in Python ist ein leistungsstarker überwachter Lernalgorithmus, der zur Lösung von Klassifizierungs- und Regressionsproblemen verwendet werden kann. SVM eignet sich gut für den Umgang mit hochdimensionalen Daten und nichtlinearen Problemen und wird häufig in den Bereichen Data Mining, Bildklassifizierung, Textklassifizierung, Bioinformatik und anderen Bereichen eingesetzt. In diesem Artikel stellen wir ein Beispiel für die Verwendung von SVM zur Klassifizierung in Python vor. Wir werden das SVM-Modell aus der scikit-learn-Bibliothek verwenden
Was bedeutet h5?
Aug 02, 2023 pm 01:52 PM
H5 bezieht sich auf HTML5, die neueste Version von HTML. H5 ist eine leistungsstarke Auszeichnungssprache, die Entwicklern mehr Auswahlmöglichkeiten und kreativen Raum bietet. Ihr Aufkommen fördert die Entwicklung der Web-Technologie und macht die Interaktion und Wirkung von Webseiten noch besser Wenn es allmählich reift und populär wird, glaube ich, dass es in der Internetwelt eine immer wichtigere Rolle spielen wird.
Wie unterscheidet man zwischen H5, WEB-Front-End, Big-Front-End und WEB-Full-Stack?
Aug 03, 2022 pm 04:00 PM
Dieser Artikel hilft Ihnen dabei, schnell zwischen H5, WEB-Front-End, großem Front-End und WEB-Full-Stack zu unterscheiden. Ich hoffe, er wird Freunden in Not helfen!
VUE3-Erste-Schritte-Beispiel: Erstellen eines einfachen Videoplayers
Jun 15, 2023 pm 09:42 PM
Da die neue Generation von Front-End-Frameworks weiter auf dem Vormarsch ist, erfreut sich VUE3 als schnelles, flexibles und benutzerfreundliches Front-End-Framework großer Beliebtheit. Als Nächstes lernen wir die Grundlagen von VUE3 kennen und erstellen einen einfachen Videoplayer. 1. VUE3 installieren Zuerst müssen wir VUE3 lokal installieren. Öffnen Sie das Befehlszeilentool und führen Sie den folgenden Befehl aus: npminstallvue@next Erstellen Sie dann eine neue HTML-Datei und führen Sie VUE3 ein: <!doctypehtml>
So verwenden Sie die Position in h5
Dec 26, 2023 pm 01:39 PM
In H5 können Sie das Positionsattribut verwenden, um die Positionierung von Elementen über CSS zu steuern: 1. Relative Positionierung, die Syntax lautet „style="position: relative;"; 2. Absolute Positionierung, die Syntax lautet „style="position: absolute;“ „; 3. Feste Positionierung, die Syntax lautet „style="position: Fixed;" und so weiter.
Beispiel für einen VAE-Algorithmus in Python
Jun 11, 2023 pm 07:58 PM
VAE ist ein generatives Modell. Der vollständige Name lautet VariationalAutoencoder, was ins Chinesische als Variational Autoencoder übersetzt wird. Es handelt sich um einen unbeaufsichtigten Lernalgorithmus, der zur Generierung neuer Daten wie Bilder, Audio, Text usw. verwendet werden kann. Im Vergleich zu herkömmlichen Autoencodern sind VAEs flexibler und leistungsfähiger und können komplexere und realistischere Daten generieren. Python ist eine der am weitesten verbreiteten Programmiersprachen und eines der wichtigsten Werkzeuge für Deep Learning. In Python gibt es viele hervorragende und tiefe maschinelle Lernmethoden
Erfahren Sie Best-Practice-Beispiele für die Zeigerkonvertierung in Golang
Feb 24, 2024 pm 03:51 PM
Golang ist eine leistungsstarke und effiziente Programmiersprache, mit der sich verschiedene Anwendungen und Dienste entwickeln lassen. In Golang sind Zeiger ein sehr wichtiges Konzept, das uns helfen kann, Daten flexibler und effizienter zu verwalten. Die Zeigerkonvertierung bezieht sich auf den Prozess der Zeigeroperation zwischen verschiedenen Typen. In diesem Artikel werden anhand konkreter Beispiele die Best Practices der Zeigerkonvertierung in Golang erläutert. 1. Grundkonzepte In Golang hat jede Variable eine Adresse, und die Adresse ist der Speicherort der Variablen im Speicher.
So implementieren Sie h5, um auf der Webseite nach oben zu schieben und die nächste Seite zu laden
Mar 11, 2024 am 10:26 AM
Implementierungsschritte: 1. Überwachen Sie das Scroll-Ereignis der Seite. 2. Stellen Sie fest, ob die Seite nach unten gescrollt wurde. 3. Laden Sie die nächste Seite mit Daten. 4. Aktualisieren Sie die Scroll-Position der Seite.
