基于jQuery的游戏重启与失败后背景显示需求求助

下面是针对你需求的简单实现步骤，每一步都清晰易懂：

1. 修改HTML添加重启按钮 #

在结束弹窗（.end）里添加重启按钮，游戏结束后就能点击重启：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="item item-1"></div>
    <p class="timer">10</p>
    <p class="points">0</p>
    <div class="end">
        <h1></h1>
        <!-- 添加重启按钮 -->
        <button class="restart">Restart</button>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="./script.js"></script>
</body>
</html>

2. 修改CSS美化重启按钮 #

给按钮加基础样式，让它显眼好点击：

* {
    margin: 0;
    padding: 0;
}
.item {
    width: 200px;
    aspect-ratio: 1/1;
    background-color: lightpink;
    position: absolute;
}
.timer {
    font-size: 65px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
}
.points {
    font-size: 65px;
    position: absolute;
    right: 20px;
    z-index: 1;
}
.end {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.497);
    align-items: center;
    justify-content: center;
    display: none;
    /* 让弹窗内容垂直排列 */
    flex-direction: column;
}
.restart {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 24px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
}
.restart:hover {
    background-color: #45a049;
}

3. 修改JavaScript实现两个功能 #

功能1：游戏失败10秒后显示背景 #

用setTimeout函数实现延迟，它的作用是等待指定时间后执行代码，10000毫秒=10秒。

功能2：重启按钮重置游戏状态 #

点击按钮后，把所有游戏数据（计时器、分数）重置，隐藏弹窗，重新启动计时器，重置方块位置。

修改后的完整JS代码：

const width = $(document).width() - 200
const height = $(document).height() - 200
let timer = 10
let points = 0
let isClick = false
// 只声明一次计时器变量，避免重复声明报错
let intervalID

$('.item-1').click(function () {
    setRandomPosition()
    points += 10
    $('.points').text(points)
    if(points == 100) { 
        endGame('你赢了')
        clearInterval(intervalID)
    }
})

// 初始化计时器
intervalID = setInterval(function() {
    if(timer > 0) {
        timer--
        $('.timer').text(timer)
    } else {
        // 游戏失败：延迟10秒显示结束背景
        setTimeout(() => {
            endGame('你输了')
        }, 10000)
        clearInterval(intervalID)
    }
}, 1000)

function setRandomPosition() {
    $('.item-1').css({
        'top' : Math.floor(Math.random() * height),
        'left' : Math.floor(Math.random() * width)
    })
}

function endGame(endText) {
    $('.end').css('display', 'flex')
    $('h1').text(endText)
}

// 重启按钮点击事件
$('.restart').click(function() {
    // 1. 重置游戏数据
    timer = 10
    points = 0
    // 2. 更新页面显示
    $('.timer').text(timer)
    $('.points').text(points)
    // 3. 隐藏结束弹窗
    $('.end').css('display', 'none')
    // 4. 清除旧的计时器，避免多个计时器同时运行
    clearInterval(intervalID)
    // 5. 重新启动计时器
    intervalID = setInterval(function() {
        if(timer > 0) {
            timer--
            $('.timer').text(timer)
        } else {
            setTimeout(() => {
                endGame('你输了')
            }, 10000)
            clearInterval(intervalID)
        }
    }, 1000)
    // 6. 重置方块位置
    setRandomPosition()
})

关键修改说明 #

• 去掉了重复的let intervalID声明，避免控制台报错
• 游戏失败时用setTimeout延迟10秒调用endGame函数
• 给重启按钮绑定点击事件，重置所有游戏状态，包括计时器、分数、弹窗显示、方块位置

内容的提问来源于stack exchange，提问作者Amore Solnce