JavaScript zur Implementierung der Webversion des Schlangenspiels

In diesem Artikel wird der spezifische Code für JavaScript zur Implementierung des Schlangenspiels auf der Webseite zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html>
<head><title>Schlange</title>
</Kopf>
<Text>
<canvas id="canvas" width="400" height="400"></canvas>
<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");
Variable Punktzahl = 0;
//Definieren Sie einen Blockkonstruktor var Block = Funktion (Spalte, Zeile, Größe)
{
  diese.col=col;
  diese.Zeile=Zeile;
  diese.Größe=Größe;
    };
//Definieren Sie die Prototypmethode „draw“ der Blockfunktion.
Block.prototype.draw = Funktion()
{
  ctx.fillRect(diese.Spalte*diese.Größe, diese.Zeile*diese.Größe, diese.Größe, diese.Größe)
   }
//Objekt Schlange definieren var snake = {
  Körper:[
    neuer Block(20,20,10),
    neuer Block(20,21,10),
    neuer Block(20,22,10)
   ],
  Richtung: „rechts“,
  };

//Definiere die Funktion zum Zeichnen einer Schlange snake.draw=function()
{
   für (var i = 0; i < this.body.length; i++)
  {
     dies.body[i].draw();
        }
   };

Schlange.Bewegen = Funktion()
         {
          var Kopf = dieser.Body[0];

wenn(snake.direction=="rechts")
     {    
     var newhead = neuer Block (head.col + 1, head.row, head.size)
            }
  
  wenn(snake.direction == "links")
   
     { 
     var newhead = neuer Block(Kopf.Spalte-1,Kopf.Zeile,Kopf.Größe); 
           }  
 wenn(snake.direction=="nach oben")
     {
     var newhead = neuer Block (Kopf.Spalte, Kopf.Zeile-1, Kopf.Größe)
           }
    wenn(snake.direction=="nach unten")
     {
     var newhead = neuer Block (Kopf.Spalte, Kopf.Zeile+1, Kopf.Größe)
           } 
          wenn(newhead.col<0 || newhead.col>39 )
          {
           Intervall löschen(Intervall-ID);
           Spiel vorbei();
          }
          
          wenn(neuerKopf.Zeile<0 || neuerKopf.Zeile>39 )
          {
           Intervall löschen(Intervall-ID);
           Spiel vorbei();
          }
 für (var i = 0; i < this.body.length; i++)
{
    wenn(dieser.body[i].col==newhead.col &&dieser.body[i].row==newhead.row)
  {
    Intervall löschen(Intervall-ID);
    Spiel vorbei();
      }
          }         
     dies.body.unshift(neuer Kopf);
     wenn(newhead.col==apple.posX &&newhead.row==apple.posY)
{  
    Punktzahl = Punktzahl + 100;
    während(wahr)
  {
     var checkApple =false;
     apple.posX=Math.floor(Math.random()*40);
     apple.posY=Math.floor(Math.random()*40);
     für (var i = 0; i < this.body.length; i++)
   {
     wenn(dieser.body[i].col==apple.posX &&dieser.body[i].row==apple.posY)
          Überprüfen Sie, ob der Apple-Name richtig ist.
                        }
       wenn(!checkApple)
       brechen;
      }  
  }
anders{
     dies.body.pop();
        }         
         };
//Erstelle ein Apple-Objekt var apple={
    posX:Math.floor(Math.random()*40),
    posY:Math.floor(Math.random()*40),
    GrößeR:5
}
//Apfel zeichnen-Funktion apple.draw=function()
{
  ctx.fillStyle="Grün";
  ctx.beginPath();
  ctx.arc(diese.posX*10+5,diese.posY*10+5,5,0,Math.PI*2,false);
  ctx.fill();
  ctx.fillStyle="Schwarz";
     };
//Ende var gameover = function()
{
  ctx.font="60px Comic Sans MS";
  ctx.textAlign="zentriert";
  ctx.textBaseline="Mitte";
  ctx.fillText("SPIEL VORBEI!",200,200)
    };
// Zeitfunktion var intervalId = setInterval (Funktion ()
{
   ctx.clearRect(0,0,400,400);
   ctx.font="20px Arial";
   ctx.fillText("Punktzahl:"+score,5,15);
   Schlange.zeichnen();
   Schlange.bewegen();
   Apfel.Zeichnen();
   ctx.strokeRect(0,0,400,400);
    },200);
//Snake-Tastensteuerung $("body").keydown(function(event)
{
   Konsole.log(Ereignis.Schlüsselcode);
    wenn(event.keyCode==37 &&snake.direction!="rechts")
     {
    Schlange.Richtung="links";
         }
    wenn(event.keyCode==38 &&snake.direction!="nach unten")
     {
    Schlange.Richtung="nach oben";
        }
    wenn(event.keyCode==39 &&snake.direction!="links")
     {
     Schlange.Richtung="rechts";
         }
     wenn(event.keyCode==40 &&snake.direction!="nach oben")
     {
     Schlange.Richtung="nach unten";
         }
              }
);
</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: