AI game creator

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

No:27661

←

Prev Next

→

Snake game
Developer User13727｜Date and time 23/12/8 2:15:06
Build time 44.05 sec｜Game capacity 4.547KB｜

Script

Sure! Here's an example of a simple snake game implemented as a single HTML file using JavaScript. The game is playable on a smartphone and uses pictograms to represent the snake and food.

To use this code, create an HTML file, copy and paste the code into the file, and save it. Additionally, you need to download an image file named "emozi_himawari.png" and place it in the same directory as the HTML file for the fruit picture. When you open the HTML file in a browser or on a smartphone, the snake game will start automatically. You can control the snake using the arrow keys on your keyboard or by swiping on a smartphone screen. The goal is to eat the fruit while avoiding collisions with the edges of the screen or the snake's own tail.

←

Prev　Next

→ 　

Back　

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

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. The game is playable on a smartphone and uses pictograms to represent the snake and food.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      const scale = 10;
      const rows = canvas.height / scale;
      const columns = canvas.width / scale;
      let snake;

function setup() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        document.body.appendChild(canvas);
        snake = new Snake();
        snake.draw();
        fruit = new Fruit();
        fruit.pickLocation();

window.setInterval(() => {
          context.clearRect(0, 0, canvas.width, canvas.height);
          snake.update();
          snake.draw();
          fruit.draw();

if (snake.eat(fruit)) {
            fruit.pickLocation();
          }

snake.checkCollision();
        }, 100);
      }

function Snake() {
        this.x = 0;
        this.y = 0;
        this.xSpeed = scale;
        this.ySpeed = 0;
        this.total = 0;
        this.tail = [];

this.draw = function() {
          context.fillStyle = "#39ac39";

for (let i = 0; i < this.tail.length; i++) {
            context.fillRect(this.tail[i].x, this.tail[i].y, scale, scale);
          }

context.fillRect(this.x, this.y, scale, scale);
        }

this.update = function() {
          for (let i = 0; i < this.tail.length - 1; i++) {
            this.tail[i] = this.tail[i + 1];
          }

this.tail[this.total - 1] = { x: this.x, y: this.y };

this.x += this.xSpeed;
          this.y += this.ySpeed;

if (this.x > canvas.width) {
            this.x = 0;
          }

if (this.y > canvas.height) {
            this.y = 0;
          }

if (this.x < 0) {
            this.x = canvas.width;
          }

if (this.y < 0) {
            this.y = canvas.height;
          }
        }

this.changeDirection = function(direction) {
          switch (direction) {
            case "Up":
              this.xSpeed = 0;
              this.ySpeed = -scale;
              break;
            case "Down":
              this.xSpeed = 0;
              this.ySpeed = scale;
              break;
            case "Left":
              this.xSpeed = -scale;
              this.ySpeed = 0;
              break;
            case "Right":
              this.xSpeed = scale;
              this.ySpeed = 0;
              break;
          }
        }

this.eat = function(fruit) {
          if (this.x === fruit.x && this.y === fruit.y) {
            this.total++;
            return true;
          }

return false;
        }

this.checkCollision = function() {
          for (let i = 0; i < this.tail.length; i++) {
            if (this.x === this.tail[i].x && this.y === this.tail[i].y) {
              this.total = 0;
              this.tail = [];
            }
          }
        }
      }

function Fruit() {
        this.x;
        this.y;

this.pickLocation = function() {
          this.x = (Math.floor(Math.random() * rows - 1) + 1) * scale;
          this.y = (Math.floor(Math.random() * columns - 1) + 1) * scale;
        }

this.draw = function() {
          const foodImg = new Image();
          foodImg.src = "food.png";
          context.drawImage(foodImg, this.x, this.y, scale, scale);
        }
      }

document.body.addEventListener("keydown", function(event) {
        const direction = event.key.replace("Arrow", "");
        snake.changeDirection(direction);
      });

setup();
    });
  </script>
</body>
</html>
```

To use this code, create an HTML file, copy and paste the code into the file, and save it. Additionally, you need to download an image file named "food.png" and place it in the same directory as the HTML file for the fruit picture.

When you open the HTML file in a browser or on a smartphone, the snake game will start automatically. You can control the snake using the arrow keys on your keyboard or by swiping on a smartphone screen. The goal is to eat the fruit while avoiding collisions with the edges of the screen or the snake's own tail.