AI game creator

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

No:52410

←

Prev Next

→

Snake Game
Developer User21925｜Date and time 24/3/22 4:54:31
Build time 13.608 sec｜Game capacity 3.919KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Snake Game</title>
<style>
    canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const scale = 20;
const rows = canvas.height / scale;
const columns = canvas.width / scale;
let snake;
let fruit;
let score;

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

score = 0;

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

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

snake.draw();
        document.getElementById("score").innerText = "Score: " + score;

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

class Snake {
    constructor() {
        this.x = 0;
        this.y = 0;
        this.xSpeed = scale * 1;
        this.ySpeed = 0;
        this.tail = [];
    }

draw() {
        ctx.fillStyle = "green";
        ctx.fillRect(this.x, this.y, scale, scale);

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

this.tail.push({ x: this.x, y: this.y });
        while (this.tail.length > score) {
            this.tail.shift();
        }
    }

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

if (score > 0) {
            this.tail[0] = { x: this.x, y: this.y };
        }

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

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

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

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

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

changeDirection(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;
        }
    }

eat(fruit) {
        if (this.x === fruit.x && this.y === fruit.y) {
            return true;
        } else {
            return false;
        }
    }

checkCollision() {
        for (let i = 0; i < this.tail.length; i++) {
            if (this.x === this.tail[i].x && this.y === this.tail[i].y) {
                alert("Game Over! Your score was: " + score);
                window.location.reload();
            }
        }
    }
}

class Fruit {
    constructor() {
        this.x = 0;
        this.y = 0;
    }

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

draw() {
        ctx.fillStyle = "red";
        ctx.fillRect(this.x, this.y, scale, scale);
    }
}

document.addEventListener("keydown", e => {
    const direction = e.key.replace("Arrow", "");
    snake.changeDirection(direction);
});

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