AI game creator

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

No:20377

←

Prev Next

→

Snake Game
Developer User8958｜Date and time 23/10/9 9:06:28
Build time 22.081 sec｜Game capacity 6.186KB｜

Script

Here's an example of a Snake game implemented as a single HTML file with JavaScript, enclosed in script tags:

This implementation uses the HTML5 canvas element to draw the game and handles keyboard controls for the snake movement. The game starts automatically when the page is loaded and ends when the snake collides with itself or goes out of bounds. The score is displayed on the canvas, and the game over message is shown when the game ends. The snake's movement speed can be adjusted by changing the interval duration in the game loop.

←

Prev　Next

→ 　

Back　

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

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

Here's an example of a Snake game implemented as a single HTML file with JavaScript, enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #gameCanvas {
      border: 1px solid #000;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    // Initialize game variables
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");
    var blockSize = 20;
    var widthInBlocks = canvas.width / blockSize;
    var heightInBlocks = canvas.height / blockSize;
    var score = 0;
    var snake;
    var apple;
    
    // Block constructor
    function Block(col, row) {
      this.col = col;
      this.row = row;
    }
    
    // Draw a square at a specific block
    Block.prototype.drawSquare = function(color) {
      var x = this.col * blockSize;
      var y = this.row * blockSize;
      ctx.fillStyle = color;
      ctx.fillRect(x, y, blockSize, blockSize);
    };
    
    // Draw the score on canvas
    function drawScore() {
      ctx.font = "20px Arial";
      ctx.fillStyle = "black";
      ctx.textAlign = "left";
      ctx.textBaseline = "top";
      ctx.fillText("Score: " + score, blockSize, blockSize);
    }
    
    // Check if the block is out of bounds
    Block.prototype.outsideBounds = function() {
      return (
        this.col < 0 ||
        this.col >= widthInBlocks ||
        this.row < 0 ||
        this.row >= heightInBlocks
      );
    };
    
    // Check if the block intersects with another block
    Block.prototype.equal = function(otherBlock) {
      return this.col === otherBlock.col && this.row === otherBlock.row;
    };
    
    // Snake constructor
    function Snake() {
      this.segments = [new Block(7, 5), new Block(6, 5), new Block(5, 5)];
      this.direction = "right";
      this.nextDirection = "right";
    }
    
    // Draw the snake on canvas
    Snake.prototype.draw = function() {
      for (var i = 0; i < this.segments.length; i++) {
        this.segments[i].drawSquare("blue");
      }
    };
    
    // Move the snake
    Snake.prototype.move = function() {
      var head = this.segments[0];
      var newHead;
    
      this.direction = this.nextDirection;
    
      if (this.direction === "right") {
        newHead = new Block(head.col + 1, head.row);
      } else if (this.direction === "down") {
        newHead = new Block(head.col, head.row + 1);
      } else if (this.direction === "left") {
        newHead = new Block(head.col - 1, head.row);
      } else if (this.direction === "up") {
        newHead = new Block(head.col, head.row - 1);
      }
    
      if (this.checkCollision(newHead)) {
        gameOver();
        return;
      }
    
      this.segments.unshift(newHead);
    
      if (newHead.equal(apple.position)) {
        score++;
        apple.move();
      } else {
        this.segments.pop();
      }
    };
    
    // Handle keyboard input
    Snake.prototype.setDirection = function(newDirection) {
      if (this.direction === "up" && newDirection === "down") {
        return;
      } else if (this.direction === "right" && newDirection === "left") {
        return;
      } else if (this.direction === "down" && newDirection === "up") {
        return;
      } else if (this.direction === "left" && newDirection === "right") {
        return;
      }
    
      this.nextDirection = newDirection;
    };
    
    // Check if the snake collides with itself or out of bounds
    Snake.prototype.checkCollision = function(head) {
      var selfCollision = false;
    
      if (head.outsideBounds()) {
        return true;
      }
    
      for (var i = 0; i < this.segments.length; i++) {
        if (head.equal(this.segments[i])) {
          selfCollision = true;
          break;
        }
      }
    
      return selfCollision;
    };
    
    // Apple constructor
    function Apple() {
      this.position = new Block(10, 10);
    }
    
    // Draw the apple on canvas
    Apple.prototype.draw = function() {
      this.position.drawSquare("red");
    };
    
    // Move the apple to a random position
    Apple.prototype.move = function() {
      var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
      var randomRow = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
      this.position = new Block(randomCol, randomRow);
    };
    
    // Initialize the game
    function init() {
      score = 0;
      snake = new Snake();
      apple = new Apple();
    
      // Game loop
      var intervalId = setInterval(function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawScore();
        snake.move();
        snake.draw();
        apple.draw();
        if (snake.checkCollision(snake.segments[0])) {
          clearInterval(intervalId);
          gameOver();
        }
      }, 100);
    }
    
    // Game over
    function gameOver() {
      ctx.font = "30px Arial";
      ctx.fillStyle = "black";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2);
    }
    
    // Handle keyboard controls
    document.addEventListener("keydown", function(e) {
      var newDirection;
      switch (e.keyCode) {
        case 37:
          newDirection = "left";
          break;
        case 38:
          newDirection = "up";
          break;
        case 39:
          newDirection = "right";
          break;
        case 40:
          newDirection = "down";
          break;
        default:
          return;
      }
      snake.setDirection(newDirection);
    });
    
    // Start the game
    init();
  </script>
</body>
</html>
```