时间戳

首页 > 解决方案 > 如何给跳跃系统增加限制？

javascript - 如何给跳跃系统增加限制？

问题描述

我正在尝试为我的学校项目重新创建 I Wanna Be the Guy。我想给重力系统添加一个限制，所以角色在空中被限制了几秒钟，只有当它到达地面时才会再次跳跃。我找到了很多教程，但我的仍然无法正常工作。（问题是当你按住W时，角色会升到画面的顶部，松开键时会下降）

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var img = document.getElementById("kid");
var playerW = 30;
var playerH = 40;
var playerX = 5 + 40;
var playerY = canvas.height - 40 - playerH + 5;
var right = false;
var left = false;
var up = false;
var rightup = false;
var leftup = false;
var onGround = true;
var dy = 10;
var userchoice = false;
var velocity = 10;

document.addEventListener("keydown", press);
document.addEventListener("keyup", release);

function press(event) {
  if (event.keyCode == 68) {
    right = true
  }
  if (event.keyCode == 65) {
    left = true
  }
  if (event.keyCode == 87) {
    up = true;
  }
  if (event.keyCode == 68 && event.keyCode == 87) {
    rightup = true;
  }
  if (event.keyCode == 65 && event.keyCode == 87) {
    leftup = true;
  }

}

function release(event) {
  if (event.keyCode == 68) {
    right = false
  }
  if (event.keyCode == 65) {
    left = false
  }
  if (event.keyCode == 87) {
    up = false
  }
  if (event.keyCode == 68 && event.keyCode == 87) {
    rightup = false
  }
  if (event.keyCode == 65 && event.keyCode == 87) {
    leftup = false
  }
}

function Gravity() {
  if (playerY <= canvas.height - 80) {
    playerY += dy;
    playerY += velocity;
    velocity *= 0.9
  }

}


function background() {
  var backgroundX = 40;
  var backgroundY = 40;
  for (var a = 0; a < canvas.width / 40; a++) {
    c.moveTo(backgroundX, backgroundY);
    c.lineTo(backgroundX, 0); //verticle
    c.moveTo(backgroundX, backgroundY);
    backgroundX += 40;
    c.lineTo(backgroundX, backgroundY);
    c.stroke();
  }
  backgroundX = 40;
  for (var a = 0; a < canvas.height / 40; a++) {
    c.moveTo(backgroundX, backgroundY);
    c.lineTo(0, backgroundY);
    c.moveTo(backgroundX, backgroundY);
    backgroundY += 40;
    c.lineTo(backgroundX, backgroundY);
    c.stroke();
  }
  backgroundY = canvas.height - 40;
  for (var a = 0; a < canvas.width / 40; a++) {
    c.moveTo(backgroundX, backgroundY);
    c.lineTo(backgroundX, canvas.height);
    c.moveTo(backgroundX, backgroundY);
    backgroundX += 40;
    c.lineTo(backgroundX, backgroundY);
    c.stroke();
  }
  backgroundX = canvas.width - 40;
  for (var a = 0; a < canvas.height / 40; a++) {
    c.moveTo(backgroundX, backgroundY);
    c.lineTo(canvas.width, backgroundY);
    c.moveTo(backgroundX, backgroundY);
    backgroundY -= 40;
    c.lineTo(backgroundX, backgroundY);
    c.stroke();
  }
}


function Player() {
  c.beginPath();
  c.drawImage(img, playerX, playerY, playerW, playerH);
  c.closePath();
}

function Sprites() {
  c.beginPath();
  c.moveTo();

  c.closePath();
}

function draw() {
  c.clearRect(0, 0, canvas.width, canvas.height);
  Player();
  background();
  if (right && playerX < canvas.width - 40 - playerW) {
    playerX += 10
  }
  if (left && playerX > 40) {
    playerX -= 5
  }
  if (up && onGround === false) {
    onGround === true
    if (up && playerY < canvas.height - 40) {
      playerY -= 20
    }
    if (rightup && playerX < canvas.width - 40 - playerW && playerY < canvas.height - 40 - playerH) {
      playerX += 5;
      playerY -= 20
    }
    if (leftup && playerX > 40 && playerY < canvas.height - 40 - playerH) {
      playerX += 5;
      playerY -= 20
    }
  }
  playerY += dy;
  playerY += velocity;
  velocity *= 0.9;
  if (playerY >= canvas.height - 80) {
    onGround = false;
    playerY = canvas.height - 80;
    velocity = 0;

  }
}

var interval = setInterval(draw, 30);
body {
  background: #2b2b2b;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

h1 {
  color: #bdbdbd;
  font-weight: 300;
}
<canvas id="canvas" width="800" height="600" style="border:1px solid black;"></canvas>
<div style="display:none;">
  <img id="kid" src="https://vignette.wikia.nocookie.net/smash-bros-lelle/images/7/79/The_kid.png/revision/latest?cb=20180424233943">
</div>

标签： javascripthtmlcss

解决方案

此代码看起来不正确

  if(up && onGround===false){
    onGround===true
    if(up && playerY<canvas.height-40){playerY-=20}
    if(rightup && playerX<canvas.width-40-playerW && playerY<canvas.height-40-playerH){playerX+=5; playerY-=20}
    if(leftup && playerX>40 && playerY<canvas.height-40-playerH){playerX+=5; playerY-=20}
  }

对于初学者来说， onGround===true 是一个比较，而不是一个赋值，所以这有一个没有 opp 的效果。

在其他地方，你有

  if(event.keyCode== 68 && event.keyCode==87){rightup=true; }
  if(event.keyCode== 65 && event.keyCode==87){leftup=true;}

event.keyCode 可以是 68、65 或 87。但永远不能是 68 和 87。它是一个值：key 的 keyCode 值

尝试这些更正，看看它是否能让你更接近你所追求的

推荐阅读