Snake simulator's game | AI game creator

Click here for free DL of the app version that can save data.

No:45528

40

Snake simulator
Developer User19614｜Date and time 24/2/20 19:54:49
Build time 11.433 sec｜Game capacity 2.565KB｜

→ 　

0　

0　

　
　
　
　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

<script>
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const scale = 10;
  const fruitSize = 10;
  
  let gameOver = false;
  let score = 0;
  
  let snake = [
    { x: 20, y: 20 },
    { x: 20, y: 30 },
    { x: 20, y: 40 },
  ];
  
  let fruit = { x: 50, y: 50 };
  
  let directionX = 0;
  let directionY = 0;
  
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(canvas);
  
  function draw() {
    if (gameOver) {
      ctx.fillStyle = 'red';
      ctx.font = '30px Arial';
      ctx.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);
      return;
    }
  
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  
    ctx.fillStyle = 'green';
    snake.forEach((segment) => {
      ctx.fillRect(segment.x, segment.y, scale, scale);
    });
  
    ctx.fillStyle = 'red';
    ctx.fillRect(fruit.x, fruit.y, fruitSize, fruitSize);
  
    const head = snake[0];
    if (head.x === fruit.x && head.y === fruit.y) {
      score++;
      let newHead = { x: head.x + directionX, y: head.y + directionY };
      snake.unshift(newHead);
  
      fruit.x = Math.floor(Math.random() * canvas.width);
      fruit.y = Math.floor(Math.random() * canvas.height);
    }
  
    move();
  
    if (checkCollision()) {
      gameOver = true;
    }
  
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';
    ctx.fillText(`Score: ${score}`, 10, 30);
  
    requestAnimationFrame(draw);
  }
  
  function move() {
    const head = { ...snake[0] };
    const newHead = { x: head.x + directionX, y: head.y + directionY };
    snake.unshift(newHead);
  
    if (head.x === fruit.x && head.y === fruit.y) {
      score++;
    } else {
      snake.pop();
    }
  }
  
  function checkCollision() {
    const head = snake[0];
    for (let i = 1; i < snake.length; i++) {
      if (head.x === snake[i].x && head.y === snake[i].y) {
        return true;
      }
    }
  
    return (
      head.x < 0 ||
      head.x >= canvas.width ||
      head.y < 0 ||
      head.y >= canvas.height
    );
  }
  
  window.addEventListener('keydown', (event) => {
    switch (event.key) {
      case 'ArrowUp':
        directionX = 0;
        directionY = -scale;
        break;
      case 'ArrowDown':
        directionX = 0;
        directionY = scale;
        break;
      case 'ArrowLeft':
        directionX = -scale;
        directionY = 0;
        break;
      case 'ArrowRight':
        directionX = scale;
        directionY = 0;
        break;
    }
  });

draw();
</script>