SOURCE

// 分数
const score = document.querySelector('.score');
// 时间
const time = document.querySelector('.time');
// 中间的字
const main = document.querySelector('.main');
// 下面五个字
const optionArray = document.querySelectorAll('.options');
//悬浮层
// const over = document.querySelector(".over");
//重新开始
// const restartEl = document.querySelector(".restart");
// 颜色
const colorArray = ['red', 'yellow', 'blue', 'green', 'purple'];
// 字
const textArray = ['红', '黄', '蓝', '绿', '紫'];
// 中英文匹配
const matchObj = {
    red: '红',
    yellow: '黄',
    blue: '蓝',
    green: '绿',
    purple: '紫',
}
//倒计时
let timer;
//随机数
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
//打乱数组
const randomSortArray = arr => arr.sort((a, b) => randomNum(0, 1) - 0.5)
// 随机文字和颜色
const randomTextAndColor = () => {
    main.innerHTML = textArray[randomNum(0, textArray.length - 1)];
    main.style.color = colorArray[randomNum(0, colorArray.length - 1)];
    randomSortArray(colorArray);
    randomSortArray(textArray)
    for (let i = 0; i < optionArray.length; i++) {
        optionArray[i].innerHTML = textArray[i]
        optionArray[i].style.color = colorArray[i]
    }
}
//倒计时
const countDown = () => {
    timer = setInterval(() => {
        time.innerHTML -= 1;
        if (time.innerHTML == 0) {
            clearInterval(timer);
            // over.style.display = 'block';
        }
    }, 1000)
}
//开始
const start = () => {
    for (let i = 0; i < optionArray.length; i++) {
        optionArray[i].onclick = function () {
            if (matchObj[main.style.color] === this.innerHTML) {
                score.innerHTML = score.innerHTML - 0 + 1;

                if (score.innerHTML == 1) {
                    countDown();
                }
                if (time.innerHTML <1) {
                    this.onclick = null;
                }
                randomTextAndColor();
            }
        }
    }
}
//重新开始
const restart = () => {
    score.innerHTML = 0;
    time.innerHTML = 30;
    // over.style.display = 'none';
    start()
}
//按钮点击
// restartEl.onclick = restart;
start()
randomTextAndColor()

<h1>选字游戏</h1>
<div class="root">
	<header class="header">
		<ul>
			<li>
				分数： <span class="score">0</span>
			</li>
			<li>
				时间： <span class="time">30</span>s
			</li>
		</ul>
	</header>
	<main class="main"></main>
    <!-- <section class="over">
        <h2>游戏结束</h2>
        <h4>你的分数是: <span class="endScore">0</span></h4>
        <button class="restart">重新开始</button>
    </section> -->
	<footer class="footer">
		<ul>
			<li class="options"></li>
			<li class="options"></li>
			<li class="options"></li>
			<li class="options"></li>
			<li class="options"></li>
		</ul>
	</footer>
</div>

*{
    margin: 0;
    padding: 0;
    user-select: none;
}
h1{
    text-align: center;
}
ul{
    list-style: none;
}
.root{
    width: 350px;
    height: 400px;
    background-color: white;
    margin: 40px auto;
    border: 1px solid lightcoral;
    position: relative;
}
.header ul{
    height:  70px;
    line-height: 70px;
    font-size: 20px;
    display: flex;
    justify-content: space-around;
}
.main{
    height: 250px;
    line-height: 250px;
    text-align: center;
    font-size: 100px;
}
.footer ul{
    height: 80px;
    line-height: 80px;
    display: flex;
    justify-content: space-around;
    font-size: 40px;
    text-align: center;
}
.footer ul li{
    cursor: pointer;
}
.over{
    width: 100%;
    background-color: rgb(222, 232, 247);
    text-align: center;
    font-size: 20px;
    height: 120px;
    position: absolute;
    left: 0;
    top: 150px;
    display: none;
}