const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');

// 设置游戏初始状态
const boxSize = 10;
let snake = [{ x: 100, y: 50 }, { x: 90, y: 50 }, { x: 80, y: 50 }];
let food = { x: Math.floor(Math.random() * (canvas.width / boxSize)) * boxSize, y: Math.floor(Math.random() * (canvas.height / boxSize)) * boxSize };
let direction = 'RIGHT';
let changingDirection = false;
let score = 0;
let speed = 140; // 控制速度，100ms刷新一次

// 绘制蛇
function drawSnake() {
    snake.forEach(part => {
        ctx.fillStyle = 'green';
        ctx.fillRect(part.x, part.y, boxSize, boxSize);
    });
}

// 绘制食物
function drawFood() {
    ctx.fillStyle = 'white';
    ctx.fillRect(food.x, food.y, boxSize, boxSize);
}


    $(document).ready(function () {
        // 从 localStorage 获取语言设置，如果没有则默认使用 'en-us'
        let lang = localStorage.getItem('lang') || 'en-us';

        // 动态加载语言文件
        function loadLanguage(lang) {
            $.getJSON(`/static/lang/${lang}.json`, function (langData) {
                $('[data-lang-key]').each(function () {
                    const key = $(this).data('lang-key');
                    if (langData[key]) {
                        $(this).text(langData[key]);
                    }
                });
            }).fail(function () {
                console.error(`Failed to load language file: ${lang}.json`);
            });
        }

        // 初次加载语言
        loadLanguage(lang);

        // 设置下拉菜单的默认选项
        $('#language-dropdown').val(lang);

        // 监听语言切换下拉菜单
        $('#language-dropdown').on('change', function () {
            lang = $(this).val();
            localStorage.setItem('lang', lang);
            loadLanguage(lang);
        });

        // 滑动屏幕控制小蛇移动
        let touchStartX = 0;
        let touchStartY = 0;

        document.addEventListener('touchstart', function (event) {
            touchStartX = event.touches[0].clientX;
            touchStartY = event.touches[0].clientY;
        });

        document.addEventListener('touchend', function (event) {
            const touchEndX = event.changedTouches[0].clientX;
            const touchEndY = event.changedTouches[0].clientY;

            const deltaX = touchEndX - touchStartX;
            const deltaY = touchEndY - touchStartY;

            if (Math.abs(deltaX) > Math.abs(deltaY)) {
                // 水平方向滑动
                if (deltaX > 0) {
                    changeDirection('right'); // 向右滑动
                } else {
                    changeDirection('left'); // 向左滑动
                }
            } else {
                // 垂直方向滑动
                if (deltaY > 0) {
                    changeDirection('down'); // 向下滑动
                } else {
                    changeDirection('up'); // 向上滑动
                }
            }
        });

        // 改变小蛇方向
        function changeDirection(direction) {
            // 假设 snake.js 中有一个全局变量 `snakeDirection` 用于控制小蛇方向
            if (direction === 'up' && snakeDirection !== 'down') {
                snakeDirection = 'up';
            } else if (direction === 'down' && snakeDirection !== 'up') {
                snakeDirection = 'down';
            } else if (direction === 'left' && snakeDirection !== 'right') {
                snakeDirection = 'left';
            } else if (direction === 'right' && snakeDirection !== 'left') {
                snakeDirection = 'right';
            }
        }
    });


// 更新蛇的位置
function moveSnake() {
    const head = { x: snake[0].x, y: snake[0].y };

    if (direction === 'UP') head.y -= boxSize;
    if (direction === 'DOWN') head.y += boxSize;
    if (direction === 'LEFT') head.x -= boxSize;
    if (direction === 'RIGHT') head.x += boxSize;

    snake.unshift(head);

    // 如果蛇吃到食物
    if (head.x === food.x && head.y === food.y) {
        score += 1;
        scoreElement.innerHTML = `Score: ${score}`;
        food = {
            x: Math.floor(Math.random() * (canvas.width / boxSize)) * boxSize,
            y: Math.floor(Math.random() * (canvas.height / boxSize)) * boxSize
        };
    } else {
        snake.pop(); // 没有吃到食物就移除蛇尾
    }
}

// 检查游戏是否结束
function checkCollision() {
    const head = snake[0];

    // 碰到墙壁
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
        return true;
    }

    return false;
}

// 处理方向变更
function changeDirection(event) {
    if (changingDirection) return;

    const keyPressed = event.keyCode;
    const goingUp = direction === 'UP';
    const goingDown = direction === 'DOWN';
    const goingRight = direction === 'RIGHT';
    const goingLeft = direction === 'LEFT';

    if (keyPressed === 37 && !goingRight) {
        direction = 'LEFT';
    }
    if (keyPressed === 38 && !goingDown) {
        direction = 'UP';
    }
    if (keyPressed === 39 && !goingLeft) {
        direction = 'RIGHT';
    }
    if (keyPressed === 40 && !goingUp) {
        direction = 'DOWN';
    }

    changingDirection = true;
}

// 游戏循环
function gameLoop() {
    if (checkCollision()) {
        alert(`Game Over! Your score: ${score}`);
        document.location.reload();
        return;
    }

    changingDirection = false;
    setTimeout(function onTick() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawFood();
        moveSnake();
        drawSnake();
        gameLoop();
    }, speed);
}

// 启动游戏
document.addEventListener('keydown', changeDirection);
gameLoop();