Meqxs

// Snake Game Implementation
class Snake {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.gridSize = 20;
        this.snake = [{x: 5, y: 5}];
        this.direction = 'right';
        this.food = this.generateFood();
        this.score = 0;
        this.gameLoop = null;
    }

    generateFood() {
        return {
            x: Math.floor(Math.random() * (this.canvas.width / this.gridSize)),
            y: Math.floor(Math.random() * (this.canvas.height / this.gridSize))
        };
    }

    draw() {
        // Clear canvas
        this.ctx.fillStyle = '#000';
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        // Draw snake
        this.ctx.fillStyle = '#0f0';
        this.snake.forEach(segment => {
            this.ctx.fillRect(
                segment.x * this.gridSize,
                segment.y * this.gridSize,
                this.gridSize - 2,
                this.gridSize - 2
            );
        });

        // Draw food
        this.ctx.fillStyle = '#f00';
        this.ctx.fillRect(
            this.food.x * this.gridSize,
            this.food.y * this.gridSize,
            this.gridSize - 2,
            this.gridSize - 2
        );
    }

    move() {
        const head = {...this.snake[0]};

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

        // Check collision with walls
        if (head.x < 0 || head.x >= this.canvas.width / this.gridSize ||
            head.y < 0 || head.y >= this.canvas.height / this.gridSize) {
            this.gameOver();
            return;
        }

        // Check collision with self
        if (this.snake.some(segment => segment.x === head.x && segment.y === head.y)) {
            this.gameOver();
            return;
        }

        this.snake.unshift(head);

        // Check if food is eaten
        if (head.x === this.food.x && head.y === this.food.y) {
            this.score += 10;
            document.getElementById('score').textContent = this.score;
            this.food = this.generateFood();
        } else {
            this.snake.pop();
        }
    }

    gameOver() {
        clearInterval(this.gameLoop);
        alert(`Game Over! Score: ${this.score}`);
        this.reset();
    }

    reset() {
        this.snake = [{x: 5, y: 5}];
        this.direction = 'right';
        this.food = this.generateFood();
        this.score = 0;
        document.getElementById('score').textContent = this.score;
    }

    start() {
        if (this.gameLoop) clearInterval(this.gameLoop);
        this.gameLoop = setInterval(() => {
            this.move();
            this.draw();
        }, 100);
    }
}

// Initialize game
const canvas = document.getElementById('snakeGame');
const game = new Snake(canvas);

// Event listeners
document.getElementById('startGame').addEventListener('click', () => game.start());

document.addEventListener('keydown', (e) => {
    switch(e.key) {
        case 'ArrowUp': if (game.direction !== 'down') game.direction = 'up'; break;
        case 'ArrowDown': if (game.direction !== 'up') game.direction = 'down'; break;
        case 'ArrowLeft': if (game.direction !== 'right') game.direction = 'left'; break;
        case 'ArrowRight': if (game.direction !== 'left') game.direction = 'right'; break;
        case ' ': 
            if (game.gameLoop) {
                clearInterval(game.gameLoop);
                game.gameLoop = null;
            } else {
                game.start();
            }
            break;
    }
});