点击时用JavaScript实现Div向鼠标坐标移动并缩小的动画

核心问题修复 #

原代码中move函数存在语法错误，且未结合缩放变换，以下是完整的修复方案：

1. 修改JavaScript代码 #

function goal(e){   
    var score = getScore();
    increaseDifficulty(score)
    document.getElementById("score").innerHTML = score + 1 ;
    var b = getShotCordinates(e);
    move(b[0],b[1]);
}

function save(){
    resetScore();
}

function resetScore(){
    document.getElementById("score").innerHTML = 0;
}

function getScore(){
    return parseInt(document.getElementById("score").innerHTML);
}

function move(x,y){
    const ball = document.getElementById("ball");
    // 移除旧的过渡结束监听，避免重复触发
    ball.removeEventListener('transitionend', resetBall);
    // 同时设置移动坐标和缩小比例
    ball.style.transform = `translate(${x}px, ${y}px) scale(0.2)`;
    // 开启平滑过渡动画
    ball.style.transition = "transform 0.5s ease-out";
    // 动画结束后重置球的初始状态
    ball.addEventListener('transitionend', resetBall);
}

// 重置球的位置和大小
function resetBall(){
    const ball = document.getElementById("ball");
    ball.style.transform = "translate(0, 0) scale(1)";
}

function getShotCordinates(e){
    var Cordinates = [e.clientX, e.clientY];
    console.log(Cordinates[0] + " - " + Cordinates[1])
    return Cordinates;
}

2. 更新HTML的点击事件 #

将球门的onclick事件修改为传递event对象，替代旧的window.event写法：

<div id="goals" class="goals" onclick="goal(event)">

3. 补充CSS样式建议 #

确保球元素支持变换动画，添加基础样式：

.ball {
    position: absolute; /* 根据你的布局调整定位方式 */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    transform-origin: center; /* 让缩放以球的中心为原点 */
}

关键修改说明 #

• 把原move函数中错误的translate(x,y)调用改为模板字符串写法，同时添加scale(0.2)实现缩小效果，多个变换属性用空格分隔
• 给球元素设置transition属性，让transform的变化平滑过渡
• 使用函数参数接收event对象，替代非标准的window.event
• 添加transitionend事件监听，动画结束后自动重置球的位置和大小，方便下次操作

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