如何实现点击目标按钮使其在指定gameboard div内移动？

当然可以通过调整目标的位置属性来实现点击后的移动效果，这是最直接且高效的方案。下面是完整的实现代码，同时优化了定位逻辑避免目标超出游戏区域：

第一步：修正CSS定位逻辑 #

首先需要修改游戏区域的定位属性，让目标的绝对定位相对于游戏区域而非整个页面：

#gameboard {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;

    width: 500px;
    height: 500px;
    background-color: darkgray;
    position: relative; /* 新增：让内部绝对定位元素以该容器为基准 */
}

#target {
    width: 75px;
    height: 75px;

    position: absolute;
    cursor: pointer; /* 新增：提示用户可点击 */
    /* 移除原有的left和transform，由JS动态控制位置 */
}

第二步：实现moveTarget函数 #

在JavaScript中编写moveTarget函数，生成合法的随机位置并赋值给目标：

function targetClicked() {
    score++;
    document.getElementById("scoreLabel").innerHTML = score;

    moveTarget();
}

function moveTarget() {
    const gameboard = document.getElementById("gameboard");
    const target = document.getElementById("target");

    // 计算目标可移动的最大范围（确保目标完全在游戏区域内）
    const maxX = gameboard.offsetWidth - target.offsetWidth;
    const maxY = gameboard.offsetHeight - target.offsetHeight;

    // 生成0到最大范围之间的随机整数坐标
    const randomX = Math.floor(Math.random() * maxX);
    const randomY = Math.floor(Math.random() * maxY);

    // 设置目标的位置
    target.style.left = `${randomX}px`;
    target.style.top = `${randomY}px`;
}

可选优化：让目标中心居中定位 #

如果希望目标的中心点落在随机位置（而非左上角），可以调整moveTarget函数如下：

function moveTarget() {
    const gameboard = document.getElementById("gameboard");
    const target = document.getElementById("target");

    const maxX = gameboard.offsetWidth - target.offsetWidth;
    const maxY = gameboard.offsetHeight - target.offsetHeight;

    const randomX = Math.floor(Math.random() * maxX) + target.offsetWidth / 2;
    const randomY = Math.floor(Math.random() * maxY) + target.offsetHeight / 2;

    target.style.left = `${randomX}px`;
    target.style.top = `${randomY}px`;
    target.style.transform = "translate(-50%, -50%)"; // 让目标自身居中
}

关键说明 #

• 游戏区域设置position: relative是核心，确保目标的位置计算始终基于游戏区域，不会受页面其他元素影响。
• 计算maxX和maxY时减去目标的宽高，能保证目标不会超出游戏区域边界，用户始终可以完整点击到目标。
• 使用Math.random()结合Math.floor()生成整数坐标，确保位置计算精准且符合CSS像素单位要求。

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