snake.html

<canvas id="game" width="400" height="400"></canvas>

<script>
    class snakeGame {
        constructor() {
            this.canvas = document.getElementById('game');
            this.contex = this.canvas.getContext('2d');
            document.addEventListener('keydown', this.onKeyPress.bind(this));
        }
        init() {
            this.posittionX = this.posittionY = 10;
            this.appleX = this.appleY = 5;
            this.trailSize = 5;
            this.trail = [];
            this.gridSize = this.tileCount = 20;
            this.velocityX = this.velocityY = 0;

            this.timer = setInterval(this.loop.bind(this), 1000 / 15);
        }
        reset() {
            clearInterval(this.timer);
            this.init()
        }
        loop() {
            this.update();
            this.draw();
        }
        update() {
            this.posittionX += this.velocityX;
            this.posittionY += this.velocityY;
            if (this.posittionX < 0) {
                this.posittionX = this.tileCount - 1;
            }
            if (this.posittionY < 0) {
                this.posittionY = this.tileCount - 1;
            }
            if (this.posittionX > this.tileCount - 1) {
                this.posittionX = 0;
            }
            if (this.posittionY > this.tileCount - 1) {
                this.posittionY = 0;
            }
            this.trail.forEach(t => {
                if (this.posittionX === t.posittionX && this.posittionY === t.posittionY) {
                    this.reset();
                }
            });
            this.trail.push({ posittionX: this.posittionX, posittionY: this.posittionY });

            while (this.trail.length > this.trailSize) {
                this.trail.shift();
            }

            if (this.appleX === this.posittionX && this.appleY === this.posittionY) {
                this.trailSize++;
                this.appleX = Math.floor(Math.random() * this.tileCount);
                this.appleY = Math.floor(Math.random() * this.tileCount);
            }
        }
        draw() {
            this.contex.fillStyle = 'black';
            this.contex.fillRect(0, 0, this.canvas.width, this.canvas.height);

            this.contex.fillStyle = 'white';
            this.contex.font = '20px Arial';
            this.contex.fillText(this.trailSize - 5, 20, 40);

            this.contex.fillStyle = 'yellow';
            this.trail.forEach(t => {
                this.contex.fillRect(t.posittionX * this.gridSize, t.posittionY * this.gridSize, this.gridSize - 5, this.gridSize - 5);
            });

            this.contex.fillStyle = 'pink';
            this.contex.fillRect(this.appleX * this.gridSize, this.appleY * this.gridSize, this.gridSize - 5, this.gridSize - 5);
        }

        onKeyPress(e) {
            if (e.keyCode === 37 && this.velocityX !== 1) {
                this.velocityX = -1;
                this.velocityY = 0;
            }
            if (e.keyCode === 38 && this.velocityY !== 1) {
                this.velocityX = 0;
                this.velocityY = -1;
            }
            if (e.keyCode === 39 && this.velocityX !== -1) {
                this.velocityX = 1;
                this.velocityY = 0;
            }
            if (e.keyCode === 40 && this.velocityY !== -1) {
                this.velocityX = 0;
                this.velocityY = 1;
            }
        }

    }


    const game = new snakeGame();
    window.onload = () => game.init();
</script>