Javascript implementiert die Webversion des Flipperspiels

Das mit JavaScript-Objekten und -Methoden implementierte Web-Flipperspiel dient Ihnen als Referenz. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html>
<Kopf>
<tilie>Huhuhaheis Web-Flipper</title>
</Kopf>
<Text>
<Leinwand-ID="Leinwand"Breite="400"Höhe="400"></Leinwand>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<Skript>
var canv = document.getElementById("Leinwand");
var ctx = canv.getContext("2d");
//Erstelle ein Ballobjekt var ball={
x: 100,
y: 100,
xGeschwindigkeit: -5,
yGeschwindigkeit: -5
};
//Definiere die Methode zum Zeichnen des Balls ball.draw=function(){
  ctx.beginPath();
  ctx.arc(dieses.x,dieses.y,10,0,Math.PI*2,false);
  ctx.fill();
};
//Definiere die Methode der Ballbewegung ball.move=function(){
 dies.x =dieses.x+dieses.xGeschwindigkeit;
 dies.y =diese.y+diese.yGeschwindigkeit;
};
//Grenzwertbeurteilung ball.checkCanvas=function(panelStart,panelEnd)
{
 wenn(dies.x<0||dies.x>400)
 dies.xSpeed=-diese.xSpeed;
wenn(dies.y<0)
 dies.ySpeed=-diese.ySpeed;
wenn(dies.y>390){
 wenn(dieses.x>panelStart && dieses.x<panelEnd)
   dies.ySpeed=-diese.ySpeed;
 anders{
  Warnung("Spiel vorbei!!!");
  dies.x = 50;
 dies.y=100;
}
}
};
//Die Timing-Funktion lässt den Ball bewegen setInterval(function()
{
  ctx.clearRect(0,0,400,400);
  ball.zeichnen();
  panel.draw();
  ball.bewegen();
  ball.checkCanvas(panel.x,panel.x+panel.xGröße);
  ctx.strokeRect(0,0,400,400);
},30); // Timing-Funktion, führe den Code in den geschweiften Klammern alle 30 ms aus;
//Erstellen Sie das Baffle-Objekt;
var panel = {
 x:200,
 y:390,
 xGröße: 50,
 yGröße: 5
};
//Methode zur Bewegung der Blende panel.draw=function(){
    ctx.fillRect(dieses.x, dieses.y, diese.xGröße, diese.yGröße);
};
//Verwenden Sie jQuery, um eine Tasteninteraktion zu implementieren.
$("body").keydown(Funktion(Ereignis)
{
Konsole.log(Ereignis.Schlüsselcode);
wenn(event.keyCode==37){
  panel.x=panel.x-5;
 wenn(panel.x<0){
panel.x=0;
   }
  }
wenn(event.keyCode==39){
 panel.x=panel.x+5;
wenn(panel.x>400-50){
Panel.x=350;
    }
  }
} 
);
</Skript>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS implementiert ein einfaches Flipperspiel, bei dem Ziegelsteine zerschlagen werden müssen
js implementiert ein kleines Flipperspiel mit Punkten
Beispiel für die Verwendung von nativem JS, um den Effekt mehrerer kollidierender und zurückprallender Bälle zu erzielen
JS realisiert den elastischen Kollisionseffekt des Balls
Nicht-HTML5-Implementierung der JS-Version des Beispielcodes für das Flipperspiel
Natives JS zur Realisierung eines springenden Balls

<<: Detailliertes Tutorial zum Ersetzen von mysql8.0.17 in Windows 10

>>: Verstehen Sie die Implementierung des Nginx-Standortabgleichs in einem Artikel