AI game creator

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

No:46346

3140

←

Prev Next

→

Snake Game
Developer anonymous｜Date and time 70/1/1 9:49:53
Build time unknown sec｜Game capacity 2.993KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Game Ular</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

let snake = {
      x: 10,
      y: 10,
      dx: 10,
      dy: 0,
      cells: [{x: 10, y: 10}],
      cellSize: 10,
      length: 1
    };

let food = {
      x: 0,
      y: 0
    };

function drawSnake(cellSize) {
      ctx.fillStyle = 'green';
      snake.cells.forEach(cell => {
        ctx.fillRect(cell.x * cellSize, cell.y * cellSize, cellSize, cellSize);
      });
    }

function drawFood(cellSize) {
      ctx.fillStyle = 'red';
      ctx.fillRect(food.x * cellSize, food.y * cellSize, cellSize, cellSize);
    }

function generateFood() {
      food.x = Math.floor(Math.random() * (canvas.width / snake.cellSize));
      food.y = Math.floor(Math.random() * (canvas.height / snake.cellSize));
    }

function checkCollision() {
      if (snake.x < 0 || snake.x >= canvas.width / snake.cellSize || snake.y < 0 || snake.y >= canvas.height / snake.cellSize) {
        return true;
      }

for (let i = 1; i < snake.cells.length; i++) {
        if (snake.x === snake.cells[i].x && snake.y === snake.cells[i].y) {
          return true;
        }
      }

return false;
    }

function checkEat() {
      if (snake.x === food.x && snake.y === food.y) {
        snake.length++;
        generateFood();
      }
    }

function gameLoop() {
      if (checkCollision()) {
        alert('Game Over! Skor: ' + snake.length);
        location.reload();
      }

ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawSnake(snake.cellSize);
      drawFood(snake.cellSize);
      checkEat();
      updateSnake();

setTimeout(() => {
        requestAnimationFrame(gameLoop);
      }, 100);
    }

generateFood();
    gameLoop();
  </script>
</body>
</html>