Snake game with ants via ChatGPT 2023 13 01

<!DOCTYPE html>
<html>
  <head>
    <title>🐜 Snake Game</title>
    <style>
      #game-canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="game-canvas" width="400" height="400"></canvas>
    <script>
      // Initialize the game
      const canvas = document.getElementById("game-canvas");
      const ctx = canvas.getContext("2d");
      let snake = [{x: 150, y: 150}];
      let food = {x: 300, y: 300};
      let dx = 0;
      let dy = 0;
      let score = 0;
      const FOOD_RADIUS = 20;
      const SNAKE_SIZE = 20;
      let newSegment = null;
      let newFood = true;

      // Draw the game on the canvas
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < snake.length; i++) {
          ctx.fillStyle = "black";
          ctx.font = "bold 20px Arial";
          ctx.fillText("🐜",snake[i].x,snake[i].y);
        }
        if (newFood) {
          ctx.fillStyle = "red";
          ctx.font = "bold 20px Arial";
          ctx.fillText("🧂",food.x,food.y);
        }
        ctx.fillStyle = "black";
        ctx.font = "20px Arial";
        ctx.fillText(`Score: ${score}`, 10, 25);
        if (newSegment) {
          ctx.fillText("🐜", newSegment.x, newSegment.y);
        }
      }

      // Move the snake
      function move() {
        const head = {x: snake[0].x + dx, y: snake[0].y + dy};
        snake.unshift(head);
        const didEatFood = Math.abs(snake[0].x - food.x) <= FOOD_RADIUS && Math.abs(snake[0].y - food.y) <= FOOD_RADIUS;
        if (didEatFood) {
          score++;
          newFood = false; // food is removed
          // Add new 🐜
          const edge = Math.floor(Math.random() * 4);
          let newX, newY;
          if (edge === 0) {
            newX = -SNAKE_SIZE;
            newY = Math.floor(Math.random() * canvas.height);
          } else if (edge === 1) {
            newX = canvas.width + SNAKE_SIZE;
            newY = Math.floor(Math.random() * canvas.height);
          } else if (edge === 2) {
            newX = Math.floor(Math.random() * canvas.width);
            newY = -SNAKE_SIZE;
          } else {
            newX = Math.floor(Math.random() * canvas.width);
            newY = canvas.height + SNAKE_SIZE;
          }
          newSegment = {x: newX, y: newY, targetX: snake[snake.length - 1].x, targetY: snake[snake.length - 1].y};
        } else {
          snake.pop();
        }
      }

      // Move the new 🐜 segment towards the end of the snake
      function moveNewSegment() {
        if (newSegment) {
          const speed = 150; // increase the speed of the new 🐜
          const distX = newSegment.targetX - newSegment.x;
          const distY = newSegment.targetY - newSegment.y;
          if (Math.abs(distX) > speed || Math.abs(distY) > speed) {
            newSegment.x += distX / 10;
            newSegment.y += distY / 10;
          } else {
            snake.push(newSegment);
            newSegment = null;
            newFood = true; //only add new food when new segment has joined the snake
            //Generate new food in a different position
            do {
              food = {x: Math.floor(Math.random() * canvas.width), y: Math.floor(Math.random() * canvas.height)};
            } while (snake.some(segment => segment.x === food.x && segment.y === food.y));
          }
        }
      }

      // Handle arrow key presses to move the snake
      document.addEventListener("keydown", event => {
        if (event.keyCode === 37) {
          dx = -5;
          dy = 0;
        } else if (event.keyCode === 38) {
          dx = 0;
          dy = -5;
        } else if (event.keyCode === 39) {
          dx = 5;
          dy = 0;
        } else if (event.keyCode === 40) {
          dx = 0;
          dy = 5;
        }
      });

      // Main game loop
      setInterval(() => {
        move();
        moveNewSegment();
        draw();
      }, 100);
    </script>
  </body>
</html>


This isn't complete, but feel free to complete it