AI game creator

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

No:43174

←

Prev Next

→

Snake Game
Developer User19122｜Date and time 24/2/14 17:06:19
Build time 14.833 sec｜Game capacity 4.049KB｜

Script

Sure! Here's a simple implementation of the classic Snake Game using JavaScript and HTML. Just copy and paste this code into a single HTML file and open it in a web browser to play:

This HTML file incorporates the Snake Game using JavaScript. The game can be played on a smartphone by controlling the snake's movement using the arrow keys on the virtual keyboard. The game canvas displays the snake, represented by black blocks, and the apple, represented by a red block. The player's score is displayed on the screen. The game ends if the snake collides with the wall or itself, and the final score is shown in an alert box.

←

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 Snake Game using JavaScript and HTML. Just copy and paste this code into a single HTML file and open it in a web browser to play:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Snake Game</title>
  <style>
    #gameCanvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Snake Game
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
    var blockSize = 20;
    var width = canvas.width / blockSize;
    var height = canvas.height / blockSize;
    var score = 0;

var snake = {
      segments: [{x: 5, y: 10}, {x: 4, y: 10}, {x: 3, y: 10}],
      direction: "right"
    };

var apple = {
      x: Math.floor(Math.random() * width),
      y: Math.floor(Math.random() * height)
    };

function drawSnake() {
      for (var i = 0; i < snake.segments.length; i++) {
        var segment = snake.segments[i];
        drawBlock(segment.x, segment.y, "black");
      }
    }

function drawApple() {
      drawBlock(apple.x, apple.y, "red");
    }

function drawBlock(x, y, color) {
      context.fillStyle = color;
      context.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
    }

function updateScore() {
      context.fillStyle = "black";
      context.font = "20px Arial";
      context.fillText("Score: " + score, 10, 30);
    }

function update() {
      var head = {
        x: snake.segments[0].x,
        y: snake.segments[0].y
      };

if (snake.direction === "right") {
        head.x++;
      } else if (snake.direction === "left") {
        head.x--;
      } else if (snake.direction === "up") {
        head.y--;
      } else if (snake.direction === "down") {
        head.y++;
      }

snake.segments.unshift(head);

if (head.x === apple.x && head.y === apple.y) {
        score++;
        apple.x = Math.floor(Math.random() * width);
        apple.y = Math.floor(Math.random() * height);
      } else {
        snake.segments.pop();
      }

if (checkCollision()) {
        clearInterval(gameInterval);
        alert("Game over! Your score: " + score);
      }

context.clearRect(0, 0, canvas.width, canvas.height);

updateScore();
      drawSnake();
      drawApple();
    }

function keydownHandler(event) {
      var keys = {
        37: "left",
        38: "up",
        39: "right",
        40: "down"
      };

if (keys[event.keyCode]) {
        var newDirection = keys[event.keyCode];

if (
          (newDirection === "left" && snake.direction !== "right") ||
          (newDirection === "right" && snake.direction !== "left") ||
          (newDirection === "up" && snake.direction !== "down") ||
          (newDirection === "down" && snake.direction !== "up")
        ) {
          snake.direction = newDirection;
        }

event.preventDefault();
      }
    }

document.addEventListener("keydown", keydownHandler);

var gameInterval = setInterval(update, 100);
  </script>
</body>
</html>
```