シンプルなスネークを実現するためのネイティブjsキャンバス

<canvas id="can"></canvas>

＃できる{
 背景: #000000;
 高さ: 400px;
 幅: 850ピクセル;
}

//パブリックセクション var blockSize = 10;
//マップの高さと幅 var mapW = 300;
var mapH = 150;
// 歴史的な食べ物 var
var historyfood = 新しい配列();
// 食べ物配列 var img = new Image()
var arrFood = ["ananas.png","hamburg.png","watermelon.png"]
履歴フード = [{x: 0,y:0}];
//Greedy Snake のデフォルト値 var snake = [{x:3,y:0},{x:2,y:0},{x:1,y:0}]

// ヘビの方向 var directionX = 1;
var 方向Y = 0;
// 食べ物が食べられたかどうかを示すフラグを追加します // デフォルト値: 食べられていない var isFood = false;
// ゲームの状態を判断します // デフォルトのゲームは続行されます var gameState = false;

// ヘビの移動方向が反転しないように制限します var lockleft = true;
var lockright = true;
var ロックアップ = true;
var ロックダウン = true;

//スネークスコア var count = 0;
// ヘビの速度 var speed = 1000 - (count + 5);
$(関数() {
 $("#divContainer").height($("#can").height());
 //1、キャンバス オブジェクトを取得します。var can = document.getElementById("can");
 //2、描画ツールボックスを取得します。var tools = can.getContext('2d');
 ツールのbeginPath();
 //食品のデフォルト値を設定する var XY = Randomfood();
 コンソールログ(XY);
 var x1 = Randomfood().x;
 var y1 = Randomfood().y;
 img.src = "/aimless/img/GluttonousSnakeFood/" + arrFood[Math.floor(Math.random() * arrFood.length)];
 //スネークの動きを制御する document.addEventListener('keydown',function (e){
  スイッチ (e.keyCode) {
   ケース38:
    if (ロックアップ){
     方向X = 0;
     方向Y = -1;
     ロックダウン = false;
     ロック左 = true;
     ロックライト = true;
    }
    壊す;
   ケース40:
    （ロックダウン）の場合{
     方向X = 0;
     方向Y = 1;
     ロックアップ = false;
     ロック左 = true;
     ロックライト = true;
    }
    壊す;
   ケース37:
    (ロック左){
     方向X = - 1;
     方向Y = 0;
     ロックライト = false;
     ロックアップ = true;
     ロックダウン = true;
    }
    壊す;
   ケース39:
    if (lockright){
     方向X = 1;
     方向Y = 0;
     ロック左 = false;
     ロックアップ = true;
     ロックダウン = true;
    }
    壊す;
  }
 })
 setIntervalSnake(ツール、x1、y1);
 //4、場所を見つける})


関数setIntervalSnake(ツール,x1,y1){
 setInterval(関数(){
  if (ゲーム状態){
   戻る;
  }
  //1、描画ボードを消去しますtools.clearRect(0,0,850,420);
  var oldHead = ヘビ[0];

  (oldHead.x < 0 || oldHead.y < 0 || oldHead.x * ブロックサイズ >= mapW || oldHead.y * ブロックサイズ >= mapH){
   ゲーム状態 = true;
   alert("ゲームオーバー");
  }それ以外 {
   //Snakeが動く if (snake[0].x * blockSize === x1 && snake[0].y * blockSize === y1){
    isFood = true;
   } それ以外 {
    スネーク.ポップ()
   }
   var newHead = {
    x: oldHead.x + directionX、
    y: oldHead.y + directionY
   }
   snake.unshift(newHead);
  }
  //2、食べ物が食べられたかどうかを判断し、食べられた場合は更新し、食べられなかった場合は更新しない if (isFood) {
   カウント = カウント + 1;
   $("#count").html(カウント);
   x1 = ランダムフード().x;
   y1 = ランダムフード().y;
   img.src = "/aimless/img/GluttonousSnakeFood/" + arrFood[Math.floor(Math.random() * arrFood.length)];
   isFood = false;
  }
  tools.drawImage(画像、x1、y1、ブロックサイズ、ブロックサイズ);
  // スネークボディ配列 var Thesnakebody = new Array();
  //3、ヘビを描く for (var i = 0; i < snake.length; i++){
   (i == 0)の場合{
    tools.fillStyle = "#9933CC";
   } それ以外 {
    var newHead1 = {
     x: ヘビ[i].x,
     y: ヘビ[i].y
    }
    ヘビの体。unshift(newHead1);
    tools.fillStyle = "#33adcc";
   }
   tools.fillRect(snake[i].x * blockSize,snake[i].y * blockSize,blockSize,blockSize);
  }
  // //蛇の頭が蛇の体を噛んだかどうかを判定する Thesnakebody.forEach(item=>{
   if(item.x == snake[0].x && item.y == snake[0].y){
    ゲーム状態 = true;
    setIntervalSnake(ツール、x1、y1);
   }
  })
  //4、マップを描画します var width = Math.round($("#can").width() / blockSize);
  var height = Math.round($("#can").height() / blockSize);
  (var i = 1; i < 幅; i++){
   ツールを0に移動する。ブロックサイズ*i;
   tools.lineTo($("#can").width(),blockSize * i);
  }
  (var i = 1; i < 高さ; i++){
   ツールを移動先(ブロックサイズ * i,0);
   tools.lineTo(ブロックサイズ * i,$("#can").height());
  }
  tools.strokeStyle = "#FFFFFF";
  //5、描画ツール.stroke();
 },速度 / 3);
}


//ランダムフード関数 Randomfood() {
 var RandomX = Math.floor(Math.random() * mapW / blockSize) * blockSize;
 var RandomY = Math.floor(Math.random() * mapH / blockSize) * blockSize;
 setInterval(関数(){
  スネーク.forEach(item=>{
   console.log(ランダムX/ブロックサイズ、ランダムY/ブロックサイズ);
   // console.log(item.x,item.y);
   if (item.x == RandomX / blockSize && item.y == RandomY / blockSize) {
    Randomfood() を返します。
   } それ以外 {
    戻る ;
   }
  })
 }, 10 / 3);
 var 新しいランダム = {
  x: ランダムX、
  y: ランダムY
 }
 newRandom を返します。
}