A protoyype of snake's game

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

No:15598

111

←

Prev Next

→

A protoyype of snake
Developer User5586｜Date and time 23/9/10 3:25:32
Build time 40.541 sec｜Game capacity 5.034KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Serpiente</title>
  <style>
    body {
      background-color: #f8f8f8;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #game-board {
      background-color: #d6e6f2;
      border: 1px solid #a1c2e2;
      box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.15);
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Snake variables
      const snakeInitialSize = 4;
      let snake = [];
      let snakeDirection = "right";
      let snakeMovement;
      let snakeFood;

// Game board element
      const gameBoard = document.getElementById("game-board");

// Create game board grid
      for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
          const cell = document.createElement("div");
          cell.style.width = `${cellSize}px`;
          cell.style.height = `${cellSize}px`;
          cell.style.border = "1px solid #a1c2e2";
          gameBoard.appendChild(cell);
        }
      }

// Initialize game
      function initGame() {
        createSnake();
        createFood();
        startGame();
      }

// Create initial snake
      function createSnake() {
        for (let i = snakeInitialSize - 1; i >= 0; i--) {
          snake.push({ x: i, y: 0 });
        }
      }

// Create food at random position
      function createFood() {
        const food = document.createElement("div");
        food.classList.add("food");
        food.style.width = `${cellSize}px`;
        food.style.height = `${cellSize}px`;
        food.style.backgroundImage = "url('pictogram_food.png')";

let randomX, randomY;
        do {
          randomX = Math.floor(Math.random() * boardSize);
          randomY = Math.floor(Math.random() * boardSize);
        } while (isSnakeCollision(randomX, randomY));

food.style.gridColumn = randomX + 1;
        food.style.gridRow = randomY + 1;

gameBoard.appendChild(food);
        snakeFood = { x: randomX, y: randomY };
      }

// Check if snake collides with food or itself
      function isSnakeCollision(x, y) {
        for (let i = 0; i < snake.length; i++) {
          if (snake[i].x === x && snake[i].y === y) {
            return true;
          }
        }
        return false;
      }

// Start game loop
      function startGame() {
        snakeMovement = setInterval(moveSnake, 150); // Adjust snake movement speed here
      }

// Move snake
      function moveSnake() {
        const headX = snake[0].x;
        const headY = snake[0].y;

// Update snake direction
        switch (snakeDirection) {
          case "up":
            snake.unshift({ x: headX, y: headY - 1 });
            break;
          case "down":
            snake.unshift({ x: headX, y: headY + 1 });
            break;
          case "left":
            snake.unshift({ x: headX - 1, y: headY });
            break;
          case "right":
            snake.unshift({ x: headX + 1, y: headY });
            break;
        }

// Check collision with food
        if (headX === snakeFood.x && headY === snakeFood.y) {
          gameBoard.removeChild(gameBoard.lastChild); // Remove food
          createFood();
        } else {
          snake.pop(); // Remove tail
        }

// Check collision with game board boundaries or itself
        if (
          headX === -1 ||
          headX === boardSize ||
          headY === -1 ||
          headY === boardSize ||
          isSnakeCollision(headX, headY)
        ) {
          clearInterval(snakeMovement);
          alert("¡Has perdido!"); // You lost!
        }

// Update snake position on the game board
        for (let i = 0; i < gameBoard.children.length; i++) {
          const cell = gameBoard.children[i];
          const cellX = parseInt(cell.style.gridColumn) - 1;
          const cellY = parseInt(cell.style.gridRow) - 1;

if (isSnakeCollision(cellX, cellY)) {
            cell.style.backgroundColor = "#333333"; // Snake color
          } else {
            cell.style.backgroundColor = "#d6e6f2"; // Empty cell color
          }
        }
      }

// Handle key press events
      document.addEventListener("keydown", function(event) {
        const key = event.key;
        if (key === "ArrowUp" && snakeDirection !== "down") {
          snakeDirection = "up";
        } else if (key === "ArrowDown" && snakeDirection !== "up") {
          snakeDirection = "down";
        } else if (key === "ArrowRight" && snakeDirection !== "left") {
          snakeDirection = "right";
        } else if (key === "ArrowLeft" && snakeDirection !== "right") {
          snakeDirection = "left";
        }
      });

// Start the game
      initGame();
    });
  </script>
</body>
</html>