html 防止玩家“飞”

ecfsfe2w  于 2023-03-21  发布在  其他
关注(0)|答案(1)|浏览(95)

我目前正在尝试做一个无尽的跑步游戏,我刚刚完成了跳跃机制。但是,如果玩家按住向上箭头键,或按下它之前,他们接触到地面,他们能够模仿的能力“飞”。我不知道如何防止他们“飞”,如果他们还没有接触到地面。如果有人有任何想法,请让我知道。我的代码如下:

let ctx = document.querySelector("canvas").getContext("2d");

// Screen
ctx.canvas.height = 512;
ctx.canvas.width = 512;

// Images
let bg = new Image;
bg.src = "./Background.png";

let fl = new Image;
fl.src = "./Floor.png";

// Player
let y = 256;
let speed = 2.5;

let pl = new Image;
pl.src = "./Idle.png";
pl.onload = function() {
  ctx.drawImage(pl, 0, y);
};

// Jumping
let UP = false;

// Ducking
let DOWN = false;

document.onkeydown = function(e) {
  if (e.keyCode == 38) UP = true;
  if (e.keyCode == 40) DOWN = true;
};

document.onkeyup = function(e) {
  if (e.keyCode == 38) UP = false;
  if (e.keyCode == 40) DOWN = false;
};

// Frames
function update() {

  // Clear
  ctx.clearRect(0, 0, 512, 512);

  // Background
  ctx.drawImage(bg, 0, 0);

  // Floor
  ctx.drawImage(fl, 0, 384);
  ctx.drawImage(fl, 128, 384);
  ctx.drawImage(fl, 256, 384);
  ctx.drawImage(fl, 384, 384);

  // UP
  if (UP) {
    if (y > 100) {
      ctx.drawImage(pl, 0, y -= speed);
    } else {
      UP = false;
    };
  } else if (!UP) {
    if (y < 256) {
      ctx.drawImage(pl, 0, y += speed);
    } else {
      ctx.drawImage(pl, 0, y);
    };
  };

  // DOWN
  if (DOWN) {
    pl.src = "./Duck.png";
  } else if (!DOWN) {
    pl.src = "./Idle.png";
  };
};

setInterval(update, 10);
qacovj5a

qacovj5a1#

你需要检查球员是否碰撞(接触)地面,可能通过pixeldata,如果它等于地板的像素数据,那么onGround = true;,如果这个条件成立,那么你可以设置allowJump = true,当pixeldata不等于地面时,比如当你已经跳跃时,它将不再允许你跳跃。

相关问题