Pet snake SIM ulater's game

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

No:8967

101

←

Prev Next

→

Pet snake SIM ulater
Developer User4275｜Date and time 23/7/20 0:23:43
Build time 38.903 sec｜Game capacity 4.147KB｜

Script

Sure! Here's a sample game called "Pet Snake SIM-ulater" implemented as a single HTML file:

This HTML file creates a simple pet snake simulation game where you control a snake using arrow keys to eat randomly spawned food. The snake grows in length every time it eats food, and the game ends if the snake hits the boundaries or collides with itself. The game is displayed on a canvas element, and the snake and food are drawn using JavaScript's Canvas API.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's a sample game called "Pet Snake SIM-ulater" implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Pet Snake SIM-ulater</title>
    <style>
      #container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <canvas id="gameCanvas" width="400" height="400"></canvas>
    </div>

// Snake object
      let snake = {
        body: [{ x: 10, y: 10 }],
        direction: { x: 1, y: 0 },
      };

// Food object
      let food = {
        x: Math.floor(Math.random() * numCols),
        y: Math.floor(Math.random() * numRows),
      };

// Game loop
      function gameLoop() {
        clearCanvas();
        moveSnake();
        drawSnake();
        drawFood();
        checkCollision();
      }

// Clear canvas
      function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }

// Move snake
      function moveSnake() {
        const head = { x: snake.body[0].x + snake.direction.x, y: snake.body[0].y + snake.direction.y };
        snake.body.unshift(head);
        snake.body.pop();
      }

// Draw snake
      function drawSnake() {
        ctx.fillStyle = "green";
        snake.body.forEach((segment) => {
          ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
        });
      }

// Draw food
      function drawFood() {
        ctx.fillStyle = "red";
        ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
      }

// Check collision
      function checkCollision() {
        const head = snake.body[0];

// Check if snake hits boundaries
        if (head.x < 0 || head.x >= numCols || head.y < 0 || head.y >= numRows) {
          endGame();
          return;
        }

// Check if snake eats food
        if (head.x === food.x && head.y === food.y) {
          eatFood();
        }

// Check if snake hits itself
        for (let i = 1; i < snake.body.length; i++) {
          if (head.x === snake.body[i].x && head.y === snake.body[i].y) {
            endGame();
            return;
          }
        }
      }

// Eat food
      function eatFood() {
        snake.body.push({});
        updateFoodPosition();
      }

// Update food position
      function updateFoodPosition() {
        food.x = Math.floor(Math.random() * numCols);
        food.y = Math.floor(Math.random() * numRows);
      }

// End game
      function endGame() {
        clearInterval(gameInterval);
        alert("Game Over!");
      }

// Handle key presses
      document.addEventListener("keydown", (event) => {
        const keyPressed = event.key.toLowerCase();

if (keyPressed === "arrowup" && snake.direction.y !== 1) {
          snake.direction = { x: 0, y: -1 };
        } else if (keyPressed === "arrowdown" && snake.direction.y !== -1) {
          snake.direction = { x: 0, y: 1 };
        } else if (keyPressed === "arrowleft" && snake.direction.x !== 1) {
          snake.direction = { x: -1, y: 0 };
        } else if (keyPressed === "arrowright" && snake.direction.x !== -1) {
          snake.direction = { x: 1, y: 0 };
        }
      });

// Start the game
      const gameInterval = setInterval(gameLoop, 100);
    </script>
  </body>
</html>
```