Snake. When I want to start I push the start button.'s game

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

No:10554

←

Prev Next

→

Snake. When I want to start I push the start butto..ALL
Developer Micah｜Date and time 23/8/1 1:58:34
Build time 46.064 sec｜Game capacity 5.802KB｜

Script

Sure, I can create a simple Snake game for you using HTML and JavaScript. Here's an example implementation as a single HTML file:

To run the game, simply copy and save the code above into a new HTML file (e.g., `snake_game.html`), and open the file in a web browser. You will see a "Start" button, and once you click it, the game will start, and you can control the snake using the arrow keys on your smartphone. The objective is to eat the red apples while avoiding collision with the walls or the snake's own body. The game will end when the snake collides with something, and you will see your final score in an alert box. Please note that this is a basic implementation, and you can modify and enhance it further based on your preferences.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure, I can create a simple Snake game for you using HTML and JavaScript. Here's an example implementation as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: lightgray;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <button onclick="startGame()">Start</button>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Function to initialize the game
    function startGame() {
      snake = new Snake();
      apple = new Apple();
      score = 0;

// Main game loop
      var gameLoop = setInterval(function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawScore();
        snake.move();
        snake.draw();
        apple.draw();

if (snake.checkCollision()) {
          clearInterval(gameLoop);
          alert("Game Over! Your final score: " + score);
        }

if (snake.isEatingApple(apple)) {
          snake.grow();
          apple.move();
          score++;
        }
      }, 100);

// Listen for arrow key presses to control the snake
      document.addEventListener("keydown", function(event) {
        var direction = event.key.replace("Arrow", "");
        snake.changeDirection(direction);
      });
    }

// Snake object
    function Snake() {
      this.segments = [[6, 4], [5, 4], [4, 4]];
      this.direction = "right";

// Function to draw the snake on the canvas
      this.draw = function() {
        for (var i = 0; i < this.segments.length; i++) {
          drawBlock(this.segments[i], "green");
        }
      };

// Function to move the snake
      this.move = function() {
        var head = this.segments[0].slice();
        switch (this.direction) {
          case "up":
            head[1] -= 1;
            break;
          case "down":
            head[1] += 1;
            break;
          case "left":
            head[0] -= 1;
            break;
          case "right":
            head[0] += 1;
            break;
        }
        this.segments.unshift(head);
        if (!this.isEatingApple(apple)) {
          this.segments.pop();
        }
      };

// Function to change the snake's direction
      this.changeDirection = function(newDirection) {
        var allowedDirections;
        if (this.direction === "up" || this.direction === "down") {
          allowedDirections = ["left", "right"];
        } else {
          allowedDirections = ["up", "down"];
        }
        if (allowedDirections.includes(newDirection)) {
          this.direction = newDirection;
        }
      };

// Function to check if the snake has collided with the walls or itself
      this.checkCollision = function() {
        var head = this.segments[0];
        var leftCollision = (head[0] < 0);
        var topCollision = (head[1] < 0);
        var rightCollision = (head[0] >= widthInBlocks);
        var bottomCollision = (head[1] >= heightInBlocks);
        var selfCollision = false;
        for (var i = 1; i < this.segments.length; i++) {
          if (head[0] === this.segments[i][0] && head[1] === this.segments[i][1]) {
            selfCollision = true;
            break;
          }
        }
        return leftCollision || topCollision || rightCollision || bottomCollision || selfCollision;
      };

// Function to check if the snake has eaten the apple
      this.isEatingApple = function(appleToEat) {
        var head = this.segments[0];
        return (head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1]);
      };

// Function to make the snake grow
      this.grow = function() {
        var tail = this.segments[this.segments.length - 1];
        this.segments.push(tail);
      };
    }

// Apple object
    function Apple() {
      this.position = [10, 10];

// Function to randomly move the apple to a new position within the canvas
      this.move = function() {
        var newX = Math.floor(Math.random() * widthInBlocks);
        var newY = Math.floor(Math.random() * heightInBlocks);
        this.position = [newX, newY];
      };

// Function to draw the apple on the canvas
      this.draw = function() {
        drawBlock(this.position, "red");
      };
    }

// Function to draw a single block on the canvas
    function drawBlock(position, color) {
      var x = position[0] * blockSize;
      var y = position[1] * blockSize;
      context.fillStyle = color;
      context.fillRect(x, y, blockSize, blockSize);
    }

// Function to draw the score on the canvas
    function drawScore() {
      context.font = "20px Arial";
      context.fillStyle = "black";
      context.textAlign = "left";
      context.fillText("Score: " + score, blockSize, blockSize - 5);
    }
  </script>
</body>
</html>
```

Please note that this is a basic implementation, and you can modify and enhance it further based on your preferences.