Snake but made under one hour You’re's game

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

No:38099

←

Prev Next

→

Snake but made under one hour You’re
Developer User17003｜Date and time 24/1/22 12:26:48
Build time 14.699 sec｜Game capacity 3.976KB｜

Script

in luck! I can definitely help you create a simple version of the classic game Snake using JavaScript and HTML. Here's an example implementation that you can try out in a single HTML file:

To play the game, you can simply copy the code above and paste it into a new HTML file. When you open the file in a web browser, you will see the Snake game displayed on the screen. Use the arrow keys to control the snake and try to eat the red food while avoiding collisions with the boundaries and the snake itself. Please note that this is a basic implementation created within one hour, so you may modify and enhance it as per your requirements. Enjoy playing!

←

Prev　Next

→ 　

Back　

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

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

in luck! I can definitely help you create a simple version of the classic game Snake using JavaScript and HTML. Here's an example implementation that you can try out in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

gameBoard.style.height = gameBoard.offsetWidth + 'px';

const ctx = gameBoard.getContext('2d');

let snake = [{ x: 10, y: 10 }]; // Initial snake position
      let food = { x: 5, y: 5 }; // Initial food position
      let direction = { x: 0, y: 0 }; // Movement direction

function clearCanvas() {
        ctx.clearRect(0, 0, gameBoard.offsetWidth, gameBoard.offsetHeight);
      }

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

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

function update() {
        clearCanvas();
        updateSnake();
        checkCollision();
        drawSnake();
        drawFood();

setTimeout(update, 100); // Control the game speed here (100ms = 10 FPS)
      }

function updateSnake() {
        const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
        snake.unshift(head); // Add the new head to the snake

if (head.x === food.x && head.y === food.y) {
          // If the snake eats the food, generate a new food
          food = {
            x: Math.floor(Math.random() * canvasSize),
            y: Math.floor(Math.random() * canvasSize),
          };
        } else {
          // Otherwise, remove the tail segment
          snake.pop();
        }
      }

function checkCollision() {
        const head = snake[0];

// Check if the snake goes out of bounds
        if (head.x < 0 || head.x >= canvasSize || head.y < 0 || head.y >= canvasSize) {
          alert('Game Over!'); // Show a simple alert message
          snake = [{ x: 10, y: 10 }];
          direction = { x: 0, y: 0 };
          return;
        }

// Check if the snake crashes into itself
        if (snake.some((segment, index) => index !== 0 && segment.x === head.x && segment.y === head.y)) {
          alert('Game Over!'); // Show a simple alert message
          snake = [{ x: 10, y: 10 }];
          direction = { x: 0, y: 0 };
          return;
        }
      }

update();
    });
  </script>
</body>
</html>
```

Please note that this is a basic implementation created within one hour, so you may modify and enhance it as per your requirements. Enjoy playing!