javascript 跳跃角色无效

javascript jumping character not working

我的代码有一些问题。无法让我的立方体跳跃。看看我的代码,如果你能帮忙请告诉我。

我的左手、右手和鸭子能力目前都可以正常工作,但我无法让我的立方体跳跃。我已经试了三天了,在网上找不到任何东西。我的 javascript 嵌入在 html 页面的标签中。

var canvas = document.getElementById("gameCanvas");

var ctx = canvas.getContext("2d");

var coinRad = 8;
var coinX = 40;
var coinY = 80;

var x = 20;
var y = 510;
var w = 30;
var h = 50;

var rightPressed = false;
var leftPressed = false;

var ducked = false;
var jumping = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = true;
  } else if (e.keyCode == 37) {
    leftPressed = true;
  } else if (e.keyCode == 40) {
    ducked = true;
  } else if (e.keycode == 32) {
    jumping = true;
  }
}


function keyUpHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = false;
  } else if (e.keyCode == 37) {
    leftPressed = false;
  } else if (e.keyCode == 40) {
    ducked = false;
  } else if (e.keycode == 32) {
    jumping = false;
  }
}

function drawCube() {
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = "Green";
  ctx.fill();
  ctx.closePath();
}

function run() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (leftPressed) {
    if (x > 0) {
      x -= 2.5;
    }
  } else if (rightPressed) {
    if (x < canvas.width - w) {
      x += 2.5;
    }
  }
  if (jumping) {
    y -= 10;
    h -= 10;
  }
  if (ducked) {
    y = 535;
    h = 25;
  } else {
    y = 510;
    h = 50;
  }
  drawCube();
}

setInterval(run, 10);
<canvas id="gameCanvas"></canvas>

因为当运行方法结束时,你这样做。

if (jumping) {
    y -= 10;
    h -= 10;
}
if (ducked) {
    y = 535;
    h = 25;
} else {
    y = 510;
    h = 50;
}

即使您更改 Y 和 H 的值,它们的值也总是分别更改为 510 和 50,因为 else 处于闪避状态

Remove this else or find another logic to do the same

此外,对于跳跃条件,您的 keyCode 检查大写不正确。

else if (e.keyCode == 40) {
   ducked = false;
} else if (e.keycode == 32) {  //should be keyCode
   jumping = false;
}