Native JS-Canvas zum Erzielen einer einfachen Schlange

<canvas id="kann"></canvas>

#dürfen{
 Hintergrund: #000000;
 Höhe: 400px;
 Breite: 850px;
}

//Öffentlicher Abschnitt var blockSize = 10;
//Höhe und Breite der Karte var mapW = 300;
var mapH = 150;
//historische Lebensmittel var
var historyfood = neues Array();
//Lebensmittel-Array var img = neues Bild()
var arrFood = ["ananas.png","hamburg.png","wassermelone.png"]
Geschichteessen = [{x: 0,y:0}];
//Standardwert von Greedy Snake var snake = [{x:3,y:0},{x:2,y:0},{x:1,y:0}]

//Schlangenrichtung var directionX = 1;
var RichtungY = 0;
//Fügen Sie eine Flagge hinzu, um zu markieren, ob das Essen gegessen wurde //Standardwert: nicht gegessen var isFood = false;
//Spielstatus beurteilen //Standardspiel wird fortgesetzt var gameState = false;

//Beschränken Sie die Bewegungsrichtung der Schlange, sodass sie nicht umgekehrt wird. var lockleft = true;
var lockright = true;
var Sperre = true;
var lockdown = true;

//Snake-Punktzahl var count = 0;
//Schlangengeschwindigkeit var Geschwindigkeit = 1000 - (Anzahl + 5);
$(Funktion () {
 $("#divContainer").Höhe($("#can").Höhe());
 //1, hole das Canvas-Objekt var can = document.getElementById("can");
 //2. Holen Sie sich die Zeichen-Toolbox. var tools = can.getContext('2d');
 tools.beginPath();
 //Standardwerte für Lebensmittel festlegen var XY = Randomfood();
 konsole.log(XY);
 var x1 = ZufälligesEssen().x;
 var y1 = ZufälligesEssen().y;
 img.src = "/aimless/img/GluttonousSnakeFood/" + arrFood[Math.floor(Math.random() * arrFood.length)];
 //Steuere die Bewegung der Schlange document.addEventListener('keydown',function (e){
  Schalter (e.keyCode) {
   Fall 38:
    wenn (Sperre){
     RichtungX = 0;
     RichtungY = -1;
     Sperrung = falsch;
     Sperren Sie links = wahr;
     Sperrrecht = wahr;
    }
    brechen;
   Fall 40:
    wenn (Sperre){
     RichtungX = 0;
     RichtungY = 1;
     Sperre = falsch;
     Sperren Sie links = wahr;
     Sperrrecht = wahr;
    }
    brechen;
   Fall 37:
    wenn (links sperren){
     RichtungX = - 1;
     RichtungY = 0;
     Sperrrecht = falsch;
     Sperre = wahr;
     Sperrung = wahr;
    }
    brechen;
   Fall 39:
    wenn (rechts sperren){
     RichtungX = 1;
     RichtungY = 0;
     Sperren Sie links = falsch;
     Sperre = wahr;
     Sperrung = wahr;
    }
    brechen;
  }
 })
 setzeIntervalSnake(Werkzeuge, x1, y1);
 //4, finde den Standort})


Funktion setIntervalSnake(Tools,x1,y1){
 setzeIntervall(Funktion (){
  wenn (Spielstatus) {
   zurückkehren;
  }
  //1, Zeichenbrett löschentools.clearRect(0,0,850,420);
  var alterKopf = Schlange[0];

  wenn (alterKopf.x < 0 || alterKopf.y < 0 || alterKopf.x * Blockgröße >= MapW || alterKopf.y * Blockgröße >= MapH){
   Spielstatus = wahr;
   Alarm("Spiel vorbei");
  }anders {
   //Schlange bewegt sich, wenn (Schlange[0].x * Blockgröße === x1 und Schlange[0].y * Blockgröße === y1){
    istEssen = wahr;
   } anders {
    Schlange.pop()
   }
   var neuerKopf = {
    x: alterKopf.x + RichtungX,
    y: alterKopf.y + RichtungY
   }
   snake.unshift(neuerKopf);
  }
  //2. Bestimme, ob das Essen gegessen wurde. Aktualisiere, wenn es gegessen wurde. Aktualisiere nicht, wenn es nicht gegessen wurde. if (isFood) {
   Anzahl = Anzahl + 1;
   $("#Anzahl").html(Anzahl);
   x1 = ZufälligesEssen().x;
   y1 = ZufälligesEssen().y;
   img.src = "/aimless/img/GluttonousSnakeFood/" + arrFood[Math.floor(Math.random() * arrFood.length)];
   istEssen = falsch;
  }
  tools.drawImage(img,x1,y1,blockGröße,blockGröße);
  //Snake-Body-Array var Thesnakebody = neues Array();
  //3, zeichne eine Schlange für (var i = 0; i < snake.length; i++){
   wenn (i == 0){
    tools.fillStyle = "#9933CC";
   } anders {
    var neuerKopf1 = {
     x: Schlange[i].x,
     y: Schlange[i].y
    }
    Der Schlangenkörper.unshift(neuerKopf1);
    tools.fillStyle = "#33adcc";
   }
   tools.fillRect(snake[i].x * Blockgröße,snake[i].y * Blockgröße,Blockgröße,Blockgröße);
  }
  // //Beurteilen Sie, ob der Schlangenkopf den Schlangenkörper gebissen hat Thesnakebody.forEach(item=>{
   wenn(item.x == snake[0].x && item.y == snake[0].y){
    Spielstatus = wahr;
    setzeIntervalSnake(Werkzeuge, x1, y1);
   }
  })
  //4, zeichne die Karte var width = Math.round($("#can").width() / blockSize);
  var Höhe = Math.round($("#can").Höhe() / Blockgröße);
  für (var i = 1; i < Breite; i++){
   tools.moveTo(0,Blockgröße * i);
   tools.lineTo($("#can").width(),blockSize * i);
  }
  für (var i = 1; i < Höhe; i++){
   tools.moveTo(blockGröße * i,0);
   tools.lineTo(blockSize * i,$("#can").height());
  }
  tools.strokeStyle = "#FFFFFF";
  //5, Zeichenwerkzeuge.Stroke();
 },Geschwindigkeit / 3);
}


//Zufälliges Essen Funktion Randomfood() {
 var RandomX = Math.floor(Math.random() * mapW / Blockgröße) * Blockgröße;
 var RandomY = Math.floor(Math.random() * mapH / Blockgröße) * Blockgröße;
 setzeIntervall(Funktion (){
  Schlange.fürJedes(item=>{
   console.log(ZufälligX/Blockgröße, ZufälligY/Blockgröße);
   // Konsole.log(Element.x, Element.y);
   wenn (item.x == RandomX / Blockgröße und item.y == RandomY / Blockgröße) {
    returniere Randomfood();
   } anders {
    zurückkehren ;
   }
  })
 }, 10 / 3);
 var neuZufällig = {
  x: ZufälligesX,
  y: ZufälligY
 }
 gibt newRandom zurück;
}