AI game creator

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

No:12504

←

Prev Next

→

Snake
Developer User5043｜Date and time 23/8/18 20:37:50
Build time 34.234 sec｜Game capacity 4.417KB｜

Script

Sure! Here's a simple implementation of the classic game Snake, using JavaScript, HTML, and pictograms:

To play the game, you can copy and paste the code above into a single HTML file (e.g., "snake.html"). Open the file in a web browser, and you should be able to control the snake using the arrow keys or "W", "A", "S", "D" keys. The goal is to eat the red apples and avoid colliding with the snake's own body or the boundaries of the canvas. Note: This implementation uses the HTML canvas element to draw the game graphics.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's a simple implementation of the classic game Snake, using JavaScript, HTML, and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

canvas {
      background-color: #fff;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

let snake = [{ x: 0, y: 0 }];
    let apple = { x: 0, y: 0 };
    let score = 0;
    let gameSpeed = 200;
    let currentDirection = direction.RIGHT;

function generateApple() {
      const maxBoxes = canvasSize / boxSize - 1;
      apple.x = Math.floor(Math.random() * maxBoxes) * boxSize;
      apple.y = Math.floor(Math.random() * maxBoxes) * boxSize;

for (let i = 0; i < snake.length; i++) {
        if (snake[i].x === apple.x && snake[i].y === apple.y) {
          generateApple();
          break;
        }
      }
    }

function drawSnake() {
      for (let i = 0; i < snake.length; i++) {
        context.fillStyle = i === 0 ? "#2ecc71" : "#27ae60";
        context.fillRect(snake[i].x, snake[i].y, boxSize, boxSize);
      }
    }

function drawApple() {
      context.fillStyle = "#e74c3c";
      context.fillRect(apple.x, apple.y, boxSize, boxSize);
    }

function moveSnake() {
      const head = { x: snake[0].x, y: snake[0].y };

switch (currentDirection) {
        case direction.UP:
          head.y -= boxSize;
          break;
        case direction.DOWN:
          head.y += boxSize;
          break;
        case direction.LEFT:
          head.x -= boxSize;
          break;
        case direction.RIGHT:
          head.x += boxSize;
          break;
      }

snake.unshift(head);

if (head.x === apple.x && head.y === apple.y) {
        score++;
        generateApple();
      } else {
        snake.pop();
      }
    }

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

if (
        head.x < 0 ||
        head.x >= canvasSize ||
        head.y < 0 ||
        head.y >= canvasSize ||
        checkSnakeCollision()
      ) {
        gameOver();
      }
    }

function checkSnakeCollision() {
      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 false;
    }

function gameOver() {
      clearInterval(gameInterval);
      alert("Game Over! Your score: " + score);
      snake = [{ x: 0, y: 0 }];
      score = 0;
      currentDirection = direction.RIGHT;
      generateApple();
      gameInterval = setInterval(gameLoop, gameSpeed);
    }

function gameLoop() {
      context.clearRect(0, 0, canvasSize, canvasSize);
      drawSnake();
      drawApple();
      moveSnake();
      checkCollision();
    }

generateApple();
    let gameInterval = setInterval(gameLoop, gameSpeed);

document.addEventListener("keydown", function (event) {
      const key = event.code.replace("Key", "");

if (
        (key === "W" || key === "ArrowUp") &&
        currentDirection !== direction.DOWN
      ) {
        currentDirection = direction.UP;
      } else if (
        (key === "S" || key === "ArrowDown") &&
        currentDirection !== direction.UP
      ) {
        currentDirection = direction.DOWN;
      } else if (
        (key === "A" || key === "ArrowLeft") &&
        currentDirection !== direction.RIGHT
      ) {
        currentDirection = direction.LEFT;
      } else if (
        (key === "D" || key === "ArrowRight") &&
        currentDirection !== direction.LEFT
      ) {
        currentDirection = direction.RIGHT;
      }
    });
  </script>
</body>
</html>
```

Note: This implementation uses the HTML canvas element to draw the game graphics.