Javascript 元素为'；他走得并不顺利
我现在只学了4天JavaScript，我想创建pacman:D 现在我的吃豆人（目前只是一个按钮）应该每100毫秒移动2个像素，但它在1秒内只移动20个像素 在我的脚本中有两个嵌套的Javascript 元素为'；他走得并不顺利,javascript,setinterval,pacman,Javascript,Setinterval,Pacman,我现在只学了4天JavaScript，我想创建pacman:D 现在我的吃豆人（目前只是一个按钮）应该每100毫秒移动2个像素，但它在1秒内只移动20个像素 在我的脚本中有两个嵌套的setInterval（）。也许这就是问题所在 有人能帮我吗？提前谢谢 无论如何，这是我的代码： <html lang="de"> <head> <title>Pac Man</title> <meta
setInterval（）。也许这就是问题所在
有人能帮我吗？提前谢谢
无论如何，这是我的代码：
<html lang="de">
<head>
<title>Pac Man</title>
<meta charset="UTF-8">
<style>
#pacman {
margin: 10px;
top: 0;
position: absolute;
}
td {
background-color: green;
height: 50px;
width: 50px;
}
table {
border-spacing: 0;
margin: 200px;
}
td.wall {
background-color: darkgreen;
}
</style>
<script>
walls = document.querySelectorAll(".wall");
positionX = 10;
positionY = 10;
movingX = 0;
movingY = 0;
document.addEventListener("keydown", function(event) {
if (event.keyCode == 87) { // W
movingX = 0;
movingY = -2;
}
if (event.keyCode == 83) { // S
movingX = 0;
movingY = 2;
}
if (event.keyCode == 65) { // A
movingX = -2;
movingY = 0;
}
if (event.keyCode == 68) { // D
movingX = 2;
movingY = 0;
}
if (event.keyCode == 27) { // ESCAPE
movingX = 0;
movingY = 0;
}
});
</script>
</head>
<body>
<table>
<tr>
<td class="wall">
</td>
<td>
</td>
<td class="wall">
</td>
</tr>
<tr>
<td>
</td>
<td class="wall">
</td>
</tr>
</table>
<button id="pacman">Top</button>
</body>
<script>
let walls = document.querySelectorAll(".wall");
setInterval(function() {
checkAndMove();
}, 1000);
function checkAndMove() {
if (checkWalls() == 1) {
for (i = 0; i < 10; i++){
setTimeout(function() {
move();
}, 100);
}
}
}
function checkWalls() {
for (i = 0; i < walls.length; i++) {
rect = walls[i].getBoundingClientRect();
if ((positionX + (movingX * 30)) > rect.left &&
(positionX + (movingX * 30)) < rect.right &&
(positionY + (movingY * 30)) > rect.top &&
(positionY + (movingY * 30)) < rect.bottom) {
return false;
}
}
return 1;
}
function move() {
document.getElementById("pacman").style.marginTop = (positionY += movingY) + "px";
document.getElementById("pacman").style.marginLeft = (positionX += movingX) + "px";
}
</script>
</html>```
吃豆人
#吃豆人{
利润率：10px；
排名：0；
位置：绝对位置；
}
运输署{
背景颜色：绿色；
高度：50px；
宽度：50px；
}
桌子{
边界间距：0；
利润率：200px；
}
墙{
背景色：暗绿色；
}
墙=document.queryselectoral（“.wall”）；
位置x=10；
位置y=10；
movingX=0；
movingY=0；
文档.添加的事件列表器（“键控”，函数（事件）{
如果（event.keyCode==87）{//W
movingX=0；
movingY=-2；
}
如果（event.keyCode==83）{//S
movingX=0；
movingY=2；
}
如果（event.keyCode==65）{//A
movingX=-2；
movingY=0；
}
如果（event.keyCode==68）{//D
movingX=2；
movingY=0；
}
如果（event.keyCode==27）{//ESCAPE
movingX=0；
movingY=0；
}
});
顶部
设walls=document.queryselectoral（“.wall”）；
setInterval（函数（）{
checkAndMove（）；
}, 1000);
函数checkAndMove（）{
如果（checkWalls（）==1）{
对于（i=0；i<10；i++）{
setTimeout（函数（）{
move（）；
}, 100);
}
}
}
函数checkWalls（）{
对于（i=0；irect.left&&
（位置X+（移动X*30））rect.top&&
（位置Y+（移动Y*30））<垂直底部）{
返回false；
}
}
返回1；
}
函数move（）{
document.getElementById（“pacman”）.style.marginTop=（positionY+=movingY）+“px”；
document.getElementById（“pacman”）.style.marginLeft=（positionX+=movingX）+“px”；
}
```
您在检查和移动中缺少一个100*i
通过添加100*i
将setTimeout
设置为100ms间隔：0ms、100ms、200ms、300ms、400ms、500ms、600ms、700ms、800ms和900ms
函数checkAndMove（）{
如果（checkWalls（）==1）{
对于（i=0；i<10；i++）{
setTimeout（函数（）{
move（）；
}，100*i）；//100*i我加在这里
}
}
}
但是，我建议将setTimeout
设置在setInterval
之外。您可以有一个setInterval
，每隔100ms运行一次move（）
。有更高级的方法可以做到这一点，但如果您正在进行实验，我相信这就足够了。如果您想执行精确计时的动画，应该使用requestAnimationFrame
而不是依赖setTimeout
。文档中有一个关于如何使用RAF插值的示例：谢谢您的帮助！当然，它将同时运行整个for循环。