我正在尝试移动上的图像以跳转。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ball Jump</title>
</head>
<body>
<img src="./assets/ball.png" height="0px" width="0px" id="ball">
<br>
<br>
<canvas height="210px" width="350px" id="paper" onclick="play()"></canvas>
<script type="text/javascript" src="./main.js"></script
</body>
</html>
main.js
'use strict'
var paper = document.getElementById('paper');
var ball = document.getElementById('ball');
var brush = paper.getContext('2d');
brush.drawImage(dino, 0, 150, 70, 50);
var y = 150;
function play() {
up();
function up() {
if (y > 50) {
brush.clearRect(0, y-1, 70, y+50);
brush.drawImage(ball, 0, y, 70, 50);
y--;
}
else { clearInterval(jump); }
}
var jump = setInterval(up, 10);
function down() {
if (y < 150) {
brush.clearRect(0, y-1, 70, y+50);
brush.drawImage(ball, 0, y, 70, 50);
y++;
}
else { clearInterval(fall); }
}
var fall = setInterval(down, 10);
}
但问题是，球是滞后的，需要更多的时间上升，然而，它下来很好，即使两个功能都设置为10ms。 请帮帮我！！！
对于在浏览器上顺利运行的动画，您应该真正使用requestAnimationFrame循环而不是setInterval
查看以下示例:https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/basic_animations
原因如下:为什么requestAnimationFrame比setInterval或SetTimeout更好。
同样，像这样的问题以前被问过，所以下次请确保你在发布前搜索，以防止重复。
