正方形随时间变化速度
所以我刚开始在JS上做游戏，我一直在遵循这个网站的书籍、说明和一些问题。我成功地制作了一个简单的html画布站点，其中有一个小方块。我有正方形不能离开边界。
但我的问题是，我的方块增加了它的速度，经过一些测试，所以它从按右箭头8次，得到从左到右到4次。我一直在搜索谷歌，试图找到一个没有结果的答案。
这是我的JS Fiddle (我见过人们在这里使用这个，所以我想我也会这么做)；
正方形没有出现在小提琴(懒惰，为什么)，但当我把它放在网络风暴，它似乎工作时，加载谷歌铬。
提前谢谢。
它说我需要用一些代码来证明jsfille的内容，所以这里是我的jsfiddle的开始。
var Game = {
canvas : undefined,
canvasContext : undefined,
rectanglePositionX : 50,
rectanglePositionY: 50,
};回答 1
Stack Overflow用户
发布于 2019-01-20 04:27:19
在Game.update()函数中可以找到平方不稳定响应的原因。因为您要在每秒调用60次的函数中添加侦听器，所以每次都会添加监听器，这就是为什么您的位置被更改到实际距离的1/1000的原因--看起来您希望这个方格移动。这可以通过只设置事件侦听器一次，在游戏循环之外，因为这会被反复调用来解决。
这里有一个工作代码片段，代码来自您的小提琴(不确定什么不工作)，在这里，我已经完全放弃了Game.update()函数，并将所有的逻辑放在事件侦听器中。当按下箭头键时，矩形位置现在只会被设置一次，尽管每次按下任何键时，该函数都会运行。因为游戏循环不断地重新绘制画布，所以每次都会出现变化。
或者，您也可以在事件侦听器中呈现和绘制画布(我在其中编写了画布并将其注释掉)，而不是在递归setTimeout中重新构建它，但我不确定您要实现的其他游戏逻辑是什么，也许您需要它。但是为了演示的目的，尝试在Game.start()中注释掉Game.start()调用，并取消键下侦听器底部的方法注释。
希望这能帮到你。
var Game = {
canvas: undefined,
canvasContext: undefined,
rectanglePositionX: 50,
rectanglePositionY: 50,
};
Game.start = function() {
Game.canvas = document.getElementById("myCanvas");
Game.canvasContext = Game.canvas.getContext("2d");
// comment this out to instead invoke the clearCanvas and draw methods inside the listener:
Game.mainLoop();
};
Game.clearCanvas = function() {
Game.canvasContext.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
};
Game.mainLoop = function() {
Game.clearCanvas();
Game.draw();
window.setTimeout(Game.mainLoop, 1000 / 60);
};
Game.draw = function() {
Game.canvasContext.fillStyle = "blue";
Game.canvasContext.fillRect(Game.rectanglePositionX, Game.rectanglePositionY, 10, 10);
};
document.addEventListener('DOMContentLoaded', Game.start);
document.addEventListener("keydown", function() {
var d = new Date();
console.log(Game.rectanglePositionX, Game.rectanglePositionY, d);
const key = event.key;
if (key == "ArrowUp") {
if (Game.rectanglePositionY > 1) {
Game.rectanglePositionY -= 10;
} else {
Game.rectanglePositionY += 10;
}
}
if (key == "ArrowDown") {
if (Game.rectanglePositionY < 470) {
Game.rectanglePositionY += 10;
} else {
Game.rectanglePositionY -= 10;
}
}
if (key == "ArrowLeft") {
if (Game.rectanglePositionX > 1) {
Game.rectanglePositionX -= 10;
} else {
Game.rectanglePositionX += 10
}
}
if (key == "ArrowRight") {
if (Game.rectanglePositionX < 790) {
Game.rectanglePositionX += 10;
} else {
Game.rectanglePositionX -= 10;
}
}
// Game.clearCanvas();
// Game.draw();
});canvas {
background-color: chartreuse;
border: solid 10px gold;
}<html>
<head>
<title>MovingSquare</title>
<script src="BasicGame.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gameArea">
<canvas id="myCanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
干杯!
https://stackoverflow.com/questions/54271236
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号