A game where you are a snake and must collect oranges's game

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

No:8296

271

←

Prev Next

→

A game where you are a snake and must collect oran..ALL
Developer User4164｜Date and time 23/7/14 22:12:16
Build time 44.441 sec｜Game capacity 5.942KB｜

Script

Sure! Here's an example of a simple Snake game implemented as a single HTML file using JavaScript:

To play the game, copy and paste the above code into a single HTML file, save it, and open it in a web browser. The game will be rendered on a canvas element, and you can control the snake using the arrow keys on your keyboard. The goal is to control the snake and make it collect the oranges (represented as green squares) while avoiding collisions with the boundaries and itself. If the snake collides, the game ends with a "Game over!" message. Note: This is a basic example of a Snake game and can be further enhanced with additional features, levels, or visual improvements, based on your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple Snake game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      /* Add some basic styling */
      body {
        font-family: Arial, sans-serif;
      }
      canvas {
        border: 1px solid black;
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <canvas id="game-canvas" width="400" height="400"></canvas>

// Game variables
      var canvas;
      var context;
      var snake;
      var fruit;
      var gameLoop;

// Initialize the game
      function init() {
        canvas = document.getElementById("game-canvas");
        context = canvas.getContext("2d");

snake = new Snake();
        fruit = new Fruit();

// Handle arrow key presses to change the snake's direction
        document.addEventListener("keydown", function (event) {
          snake.changeDirection(event.keyCode);
        });

// Start the game loop
        gameLoop = setInterval(update, 1000 / 10); // 10 frames per second
      }

// Game objects

// Snake object
      function Snake() {
        this.size = 20; // Size of each snake segment
        this.segments = [
          { x: 0, y: 0 }, // Initial position of the snake
        ];
        this.direction = "right"; // Initial direction of the snake

// Method to change the snake's direction
        this.changeDirection = function (keyCode) {
          switch (keyCode) {
            case 38: // Up arrow key
              if (this.direction !== "down") {
                this.direction = "up";
              }
              break;
            case 40: // Down arrow key
              if (this.direction !== "up") {
                this.direction = "down";
              }
              break;
            case 37: // Left arrow key
              if (this.direction !== "right") {
                this.direction = "left";
              }
              break;
            case 39: // Right arrow key
              if (this.direction !== "left") {
                this.direction = "right";
              }
              break;
          }
        };

// Method to move the snake
        this.move = function () {
          var head = {
            x: this.segments[0].x,
            y: this.segments[0].y,
          };

switch (this.direction) {
            case "up":
              head.y -= this.size;
              break;
            case "down":
              head.y += this.size;
              break;
            case "left":
              head.x -= this.size;
              break;
            case "right":
              head.x += this.size;
              break;
          }

this.segments.unshift(head); // Add new head segment
          this.segments.pop(); // Remove the last segment
        };

// Method to check if the snake has collided with the boundaries or itself
        this.checkCollision = function () {
          var head = this.segments[0];

if (
            head.x < 0 ||
            head.y < 0 ||
            head.x >= canvas.width ||
            head.y >= canvas.height
          ) {
            return true; // Snake collided with the boundaries
          }

// Check if the snake collided with itself
          for (var i = 1; i < this.segments.length; i++) {
            if (head.x === this.segments[i].x && head.y === this.segments[i].y) {
              return true; // Snake collided with itself
            }
          }

return false;
        };
      }

// Fruit object
      function Fruit() {
        this.size = 20; // Size of the fruit
        this.position = {
          x: Math.floor(Math.random() * (canvas.width / this.size)) * this.size,
          y: Math.floor(Math.random() * (canvas.height / this.size)) * this.size,
        };

// Method to draw the fruit on the canvas
        this.draw = function () {
          context.fillStyle = "orange";
          context.fillRect(
            this.position.x,
            this.position.y,
            this.size,
            this.size
          );
        };
      }

// Game update function
      function update() {
        snake.move();

if (snake.checkCollision()) {
          clearInterval(gameLoop); // Game over, stop the game loop
          alert("Game over!");
          return;
        }

if (
          snake.segments[0].x === fruit.position.x &&
          snake.segments[0].y === fruit.position.y
        ) {
          // Snake has collected the fruit
          snake.segments.push({ x: 0, y: 0 }); // Add a new segment to the snake
          fruit.position = {
            x: Math.floor(Math.random() * (canvas.width / fruit.size)) *
              fruit.size,
            y: Math.floor(Math.random() * (canvas.height / fruit.size)) *
              fruit.size,
          };
        }

context.clearRect(0, 0, canvas.width, canvas.height);
        fruit.draw();
        snake.segments.forEach(function (segment) {
          context.fillStyle = "green";
          context.fillRect(segment.x, segment.y, snake.size, snake.size);
        });
      }

// Start the game
      init();
    </script>
  </body>
</html>
```

Note: This is a basic example of a Snake game and can be further enhanced with additional features, levels, or visual improvements, based on your requirements.