мы добавили в змейке, изображение на ее голову вместо обычного квадрата, как сделать заменение картинки при нажатии на движение в право? javascripts

Мы в змейку добавили на ее голову изображение, вместо обычного квадрата, она смотрит постоянно влево, как сделать чтоб при вправо, картинка заменялась на другую?

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

const ground = new Image();
ground.src = "img/ground.png";

const foodImg = new Image();
foodImg.src = "img/brain32.png";

const suchImg = new Image();
suchImg.src = "img/such1.png";

const fiveImg = new Image();
fiveImg.src = "img/5.png";

const tailImg = new Image();
tailImg.src = "img/tail.png";

const such2Img = new Image();
such2Img.src = "img/such3.jpg"

let box = 32;

let score = 0;



let food = {
  x: Math.floor((Math.random() * 12 + 1)) * box,
  y: Math.floor((Math.random() * 10 + 3)) * box,
};

let snake = [];
snake[0] = {
  x: 12 * box,
  y: 10 * box
};

document.addEventListener("keydown", direction);

let dir;

function direction(event) {
  if(event.keyCode == 37 && dir != "right")
    dir = "left";
  else if(event.keyCode == 38 && dir != "down")
    dir = "up";
  else if(event.keyCode == 39 && dir != "left")
    dir = "right";
  else if(event.keyCode == 40 && dir != "up")
    dir = "down";
 }

 document.addEventListener("keydown", direction);

 function changeImage() {

 if(event.keyCode == 37 && dir != "img/such3.png")
   dir = "img/such3.png";
 if (src === "img/such1.png") {
   image.src = "img/such3.png";
 } else if (src === "img/such1.png") {
 image.src = "img/such3.png";
 }
}

function eatTail(head, arr) {
  for(let i = 0; i < arr.length; i++) {
if(head.x == arr[i].x && head.y == arr[i].y)  {
  clearInterval(game);
  alert("проебал");
      }
  }
}

function drawGame() {
 ctx.drawImage(ground, 0, 0);

ctx.drawImage(foodImg, food.x, food.y);

for(let i = 0; i < snake.length; i++) {
ctx.fillStyle = "black";
    ctx.fillStyle = i == 0 ? ctx.drawImage (suchImg, snake[i].x, snake[i].y, box , box) : 
ctx.drawImage (tailImg, snake[i].x, snake[i].y, box , box)
}

ctx.fillStyle = "blue";
ctx.font = "50px Arial";
ctx.fillText(score, box * 2.7, box * 2.3);

let snakeX = snake[0].x;
let snakeY = snake[0].y;

if(snakeX == food.x && snakeY == food.y) {
clearInterval(game);
game = setInterval(drawGame, time = time - 7);
score++;
food = {
  x: Math.floor((Math.random() * 17 + 1)) * box,
  y: Math.floor((Math.random() * 15 + 3)) * box,
   };
} else {
 snake.pop();
}

if(snakeX < box || snakeX > box * 17
|| snakeY < 3 * box || snakeY > box * 17) {
  clearInterval(game);
  alert("проебал");
}


if(dir == "left") snakeX -= box;
if(dir == "right") snakeX += box;
if(dir == "up") snakeY -= box;
if(dir == "down") snakeY += box;



let newHead = {
x: snakeX,
y: snakeY
 };



  eatTail(newHead, snake);

  snake.unshift(newHead);
  }

  let time = 170;
  let game = setInterval(drawGame, time);

Ответы (0 шт):