AI game creator

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

No:46918

←

Prev Next

→

Snake Game
Developer User20289｜Date and time 24/2/26 13:53:20
Build time 11.674 sec｜Game capacity 3.333KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<style>
  canvas {
    border: 1px solid black;
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>

(function setup() {
  snake = new Snake();
  fruit = new Fruit();
  fruit.pickLocation();

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

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

snake.draw();

snake.checkCollision();

document.querySelector('.score').innerText = snake.total;
  }, 250);
})();

window.addEventListener('keydown', (event) => {
  const direction = event.key.replace('Arrow', '');
  snake.changeDirection(direction);
});

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

this.draw = function() {
    context.fillStyle = 'green';
    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 - scale;
    }

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

this.changeDirection = function(direction) {
    switch(direction) {
      case 'Up':
        if (this.ySpeed !== scale * 1) {
          this.xSpeed = 0;
          this.ySpeed = -scale * 1;
        }
        break;
      case 'Down':
        if (this.ySpeed !== -scale * 1) {
          this.xSpeed = 0;
          this.ySpeed = scale * 1;
        }
        break;
      case 'Left':
        if (this.xSpeed !== scale * 1) {
          this.xSpeed = -scale * 1;
          this.ySpeed = 0;
        }
        break;
      case 'Right':
        if (this.xSpeed !== -scale * 1) {
          this.xSpeed = scale * 1;
          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.x && this.y === this.tail.y) {
        this.total = 0;
        this.tail = [];
      }
    }
  };
}

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

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

this.draw = function() {
    context.fillStyle = 'red';
    context.fillRect(this.x, this.y, scale, scale);
  };
}
</script>
</body>
</html>
```