因此，我正在尝试编写一个有球追逐玩家的游戏，而目前我正在对玩家的物理进行编码。由于某种原因，随着玩家来回走动，它变得越来越快，但是我不知道为什么。我认为这可能与我将PhysicalX变量乘以.85有关，但是我不知道这会如何影响它。这是我的代码-
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var baseX = 100;
var baseY = 50;
var physicsY = 0;
var physicsX = 0;
function coronavirus() {
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(50, 50, 5, 0, 2 * Math.PI, false);
ctx.fill();
}
function ground() {
ctx.beginPath();
ctx.fillStyle = "green";
ctx.rect(0, 140, screen.width, 10);
ctx.fill();
}
function person() {
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.arc(baseX, baseY, 5, 0, 2 * Math.PI, false); //head
ctx.stroke();
ctx.moveTo(baseX, baseY + 5); //body
ctx.lineTo(baseX, baseY + 20);
ctx.stroke();
ctx.moveTo(baseX, baseY + 20); //left leg
ctx.lineTo(baseX - 3, baseY + 27);
ctx.stroke();
ctx.moveTo(baseX, baseY + 20); //right leg
ctx.lineTo(baseX + 3, baseY + 27);
ctx.stroke();
ctx.moveTo(baseX - 5, baseY + 10); //arms
ctx.lineTo(baseX + 5, baseY + 10);
ctx.stroke();
}
function personHitbox() {
ctx.beginPath();
ctx.strokeStyle = "black"
ctx.rect(baseX - 5, baseY - 5, 10, 32);
ctx.stroke();
}
function personTouchingGround() {
var personHitbox = {y: baseY - 5, height: 32}
var ground = {y: 140}
if (personHitbox.y + personHitbox.height < ground.y) {
touchingGround = false;
} else {
touchingGround = true;
}
}
function personMoving() {
if (touchingGround == false) {
physicsY++;
baseY = baseY + physicsY;
}
physicsX = 0;
window.addEventListener('keydown', (e) => {
if (e.key == "ArrowRight") {
physicsX = physicsX + 0.001;
}
if (e.key == "ArrowLeft") {
physicsX = physicsX - 0.001;
}
physicsX = physicsX * 0.85
baseX = baseX + physicsX;
});
}
function gameloop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
new coronavirus();
new person();
new personHitbox();
new personTouchingGround();
new personMoving();
new ground();
requestAnimationFrame(gameloop);
}
gameloop();canvas {
width: 100%;
height: 100%;
margin: 0%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>playerX变量每次按键仅减少15％（0.15）。要解决此问题，只需将该行移出keypress事件侦听器之外，进入游戏循环（就在循环的每次迭代中将其运行的位置）。
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var baseX = 100;
var baseY = 50;
var physicsY = 0;
var physicsX = 0;
function coronavirus() {
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(50, 50, 5, 0, 2 * Math.PI, false);
ctx.fill();
}
function ground() {
ctx.beginPath();
ctx.fillStyle = "green";
ctx.rect(0, 140, screen.width, 10);
ctx.fill();
}
function person() {
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.arc(baseX, baseY, 5, 0, 2 * Math.PI, false); //head
ctx.stroke();
ctx.moveTo(baseX, baseY + 5); //body
ctx.lineTo(baseX, baseY + 20);
ctx.stroke();
ctx.moveTo(baseX, baseY + 20); //left leg
ctx.lineTo(baseX - 3, baseY + 27);
ctx.stroke();
ctx.moveTo(baseX, baseY + 20); //right leg
ctx.lineTo(baseX + 3, baseY + 27);
ctx.stroke();
ctx.moveTo(baseX - 5, baseY + 10); //arms
ctx.lineTo(baseX + 5, baseY + 10);
ctx.stroke();
}
function personHitbox() {
ctx.beginPath();
ctx.strokeStyle = "black"
ctx.rect(baseX - 5, baseY - 5, 10, 32);
ctx.stroke();
}
function personTouchingGround() {
var personHitbox = {
y: baseY - 5,
height: 32
}
var ground = {
y: 140
}
if (personHitbox.y + personHitbox.height < ground.y) {
touchingGround = false;
} else {
touchingGround = true;
}
}
function personMoving() {
if (touchingGround == false) {
physicsY++;
baseY = baseY + physicsY;
}
physicsX = 0.1;
window.addEventListener('keydown', (e) => {
if (e.key == "ArrowRight") {
physicsX = Math.abs(physicsX);
}
if (e.key == "ArrowLeft") {
physicsX = Math.abs(physicsX)*-1;
}
baseX = baseX + physicsX;
});
//moving the line here will guarantee physicsX decreases on each
//iteration of the loop.
physicsX = physicsX * 0.85
}
function gameloop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
new coronavirus();
new person();
new personHitbox();
new personTouchingGround();
new personMoving();
new ground();
requestAnimationFrame(gameloop);
}
gameloop();<canvas id="canvas"></canvas>此外，使用+ =可以简化您的代码。例如：playerX = playerX + 15;与playerX += 15;相同>
因为您不断添加physicsX，所以它移动的距离不断增加。只需保持PhysicalX不变即可移动相同的量。