【发布时间】：2014-10-19 22:48:37
【问题描述】：
我是 JS 菜鸟。我正在进入浏览器游戏编程，并想制作一个球掉落和弹跳的快速示例，只是为了学习。出于某种原因，当我创建一个 jsfiddle 时，我的代码实际上没有工作，我的 div id="ball" 的 onclick 事件似乎没有附加，但是当我在浏览器中运行它时它会附加。但这不是我的问题。
在这段代码中，用户点击了球，它只是一个带有黑色背景的 div。然后 div 跟随用户光标，当用户第二次单击时，div 开始向窗口底部下降。当它到达底部时，它应该反弹回来，顶点距离它最初下降的位置的 y 坐标和窗口底部之间的距离的一半。因此，如果它被放置在 y 位置 600 并且页面底部为 800，那么第一次反弹的顶点应该是 700。第二次反弹，顶点应该是 750。第三次反弹，775。你明白了。有人可以在这里帮助我吗？我猜每次球落到底部时我都需要增加一个计数器？
<html>
<head>
<style>
#ball {
width: 50px;
height: 50px;
background-color: black;
position: absolute;
}
</style>
<script>
window.onload = function() {
var ballClicked = false;
var ballFalling = false;
var ballX = 100;
var ballY = 100;
var timesBounced = 0;
var bounceApex = 0;
var startingDropHeight = 0;
var intervalVar;
var ball = document.getElementById("ball");
ball.style.left = ballX;
ball.style.top = ballY;
ball.onclick = function() {
if (ballClicked == false) {
ballClicked = true;
} else {
ballClicked = false;
ballFalling = true;
startingDropHeight = ballY;
intervalVar = setInterval(function(){dropBall()} , 5);
}
};
document.onmousemove = function(e) {
if (ballClicked == true) {
ballX = e.pageX;
ballY = e.pageY;
ball.style.left = ballX;
ball.style.top = ballY;
}
};
function dropBall() {
if (ballFalling == true) {
ballY = ballY + 1;
ball.style.top = ballY;
if (ballY == window.innerHeight - 50) {
timesBounced = timesBounced + 1;
bounceApex = (startingDropHeight + (window.innerHeight - 50)) / 2;
ballFalling = false;
if (bounceApex > window.innerHeight - 50) {
clearInterval(intervalVar);
}
};
} else {
ballY = ballY - 1;
ball.style.top = ballY;
if (ballY == bounceApex) {
ballFalling = true;
};
}
};
};
</script>
</head>
<body>
<div id="ball"></div>
</body>
</html>
【问题讨论】：
标签： javascript html