let scoreEle = document.getElementById("score");
let timeEle = document.getElementById("time");
let time = 60; // 倒计时时间
let score = 0; // 分数
let letterArr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
let interval = null; // 倒计时的定时器
let interval2 = null; // 放置小球的定时器
let dropInterval = 1000; // 放置小球的间隔，间隔越短，难度越大
let cover = document.getElementsByClassName("cover")[0];
let difficult_btn = document.getElementsByClassName("difficult");
for (let difficultBtnEle of difficult_btn) {
    difficultBtnEle.onclick = function () { // 选择游戏难度
        dropInterval = this.dataset.value;
        cover.classList.add("anime2");
        setTimeout(function () {
            countdown();
        },500);
    }
}

// 游戏开始前的倒计时
function countdown() {
    let ready = document.getElementsByClassName("ready")[0];
    let countdownEles = document.getElementsByClassName("countdown");
    setTimeout(function () {
        ready.classList.add("anime2");
        for (let i = 0; i < countdownEles.length; i++) {
            setTimeout(function () {
                countdownEles[i].classList.add("anime2");
            },1000 * (i + 1));
        }
        countdownEles[2].addEventListener("animationend",function () {
            setTimeout(function () {
                startGame();
            },500);
        });
    },500);
}

// 开始游戏
function startGame() {
    createCircle(1);
    interval = setInterval(function () { // 游戏倒计时
        time--;
        timeEle.textContent = time;
        if (time === 0){
            setTimeout(function () {
                document.body.ontouchend = null;
                clearInterval(interval);
                interval = null;
                clearInterval(interval2);
                interval2 = null;
                alert("时间到！游戏结束!");
                alert(`您的得分为${score},再接再厉！`);
                location.reload();
            },500);
        }
    },1000);
    interval2 = setInterval(function () {
        createCircle(1);
    },dropInterval);
}

// 放置小球
function layerCircle() {
    let anime = null;
    let randomSpeed = Math.random() + 1;
    return function addCircle({R,position:{x,y},color:{r,g,b},letter}) {
        let circle = document.createElement("div");
        circle.classList.add("circle");
        circle.style.width = 2 * R + "px";
        circle.style.height = 2 * R + "px";
        circle.style.left = (x - R) + "px";
        circle.style.top = (y - R) + "px";
        circle.style.backgroundColor = `rgb(${r},${g},${b})`;
        circle.textContent = letter;
        circle.style.fontSize = R + "px";
        circle.style.lineHeight = 2 * R + "px";
        circle.classList.add("anime1");
        document.body.appendChild(circle);
        circle.addEventListener("animationend",function (e) {
            if (e.animationName == "appear"){
                anime = requestAnimationFrame(function () {
                    dropdown(circle,R);
                });
            }
        });
        circle.addEventListener("animationend",function (e) {
            if (e.animationName == "disappear"){
                document.body.removeChild(circle);
            }
        });
    }

    // 小球下落
    function dropdown(obj,R) {
        obj.style.top = parseInt(obj.style.top) + randomSpeed + "px";
        if (parseInt(obj.style.top) < document.body.clientHeight - R * 2 + 10){
            anime = requestAnimationFrame(function () {
                dropdown(obj,R);
            });
        }else{
            cancelAnimationFrame(anime);
            if (!obj.dataset.get){
                score--;
                scoreEle.textContent = score;
            }
            obj.classList.add("anime2");
        }
    }
}

// 生成小球
function createCircle(num) {
    for (let i = 0; i < num; i++) {
        let R = document.body.clientHeight / 12 - 20;
        let randomX = Math.floor(Math.random() * (document.body.clientWidth - R * 2)) + R;
        let randomY = Math.random() * 2 + R;
        let randomr = Math.floor(Math.random() * 255);
        let randomg = Math.floor(Math.random() * 255);
        let randomb = Math.floor(Math.random() * 255);
        let randomLetter = letterArr[Math.floor(Math.random() * letterArr.length)];
        let circle = {
            R: R, // 小球的半径
            position: { // 小球圆心的坐标
                x: randomX,
                y: randomY
            },
            color: { // 小球的颜色
                r: randomr,
                g: randomg,
                b: randomb
            },
            letter: randomLetter // 小球上的字母
        }
        layerCircle()(circle);
    }
}

document.onkeydown = function (e) {
    let circles = document.querySelectorAll(".circle");
    let bingo = false; // 是否有和按下的键内容相同的小球
    for (let i = 0; i < circles.length; i++) {
        if (circles[i].textContent == e.key && !circles[i].dataset.get){
            bingo = true;
            score++;
            scoreEle.textContent = score;
            circles[i].dataset.get = true;// 表示该小球已通过按键消除
            circles[i].classList.add("anime2");
            break;// 一次按键只对应一个小球
        }
    }
    if (!bingo){
        // 按键错误，扣分
        score--;
        scoreEle.textContent = score;
    }
}