玩家有时会在无限跑酷游戏的原型中逐步通过平台？

Question

我正在使用 html5 canvas 在 javascript 中编写一个无限跑酷游戏，到目前为止进展顺利，但我一直在使用跳跃机制放置，有时玩家会逐步通过他们登陆的平台，这是他们不应该做的，因为我有适当的代码来防止这种情况发生。顺便说一下，虽然玩家无法在完成的游戏中通过平台的两侧，但我还没有适当的代码来阻止它。这只发生在平台一个对象上。知道为什么要这样做吗？我的代码在这里-

const canvas = document.getElementById('gameframe')
const ctx = canvas.getContext('2d')
var player = {
  y: 250,
  x: 250,
  w: 30,
  h: 30
}

var plat1 = {
  x: 250,
  y: 350,
  w: 250,
  h: 300
}
var plat2 = {
  x: 50,
  y: 400,
  w: 250,
  h: 300
}
var plat3 = {
  x: -200,
  y: 375,
  w: 250,
  h: 300
}
var currentPlat = {
  x: 1,
  y: 1,
  w: 1,
  h: 1
}

function renderPlatforms() {
  ctx.fillStyle = 'black';
  ctx.rect(plat1.x, plat1.y, plat1.w, plat1.h);
  ctx.rect(plat2.x, plat2.y, plat2.w, plat2.h);
  ctx.rect(plat3.x, plat3.y, plat3.w, plat3.h);
  ctx.fill();
  plat1.x--;
  plat2.x--;
  plat3.x--;
  if (plat1.x === 0 - plat1.w) {
    plat1.x = 500;
  }
  if (plat2.x === 0 - plat2.w) {
    plat2.x = 500;
  }
  if (plat3.x === 0 - plat3.w) {
    plat3.x = 500;
  }

}

function renderPlayer() {
  ctx.rect(player.x, player.y, player.w, player.h)
  ctx.fill();
}

function draw() {
  getCurrentPlat();
  doGravity();
  ctx.beginPath();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  renderPlayer();
  renderPlatforms();
  ctx.fill();
  setTimeout(draw, 3)


}
draw();

function getCurrentPlat() {
  if (player.x + player.w >= plat1.x && player.x <= plat1.x + plat1.w) {
    currentPlat.x = plat1.x;
    currentPlat.y = plat1.y;
    currentPlat.w = plat1.w;
    currentPlat.h = plat1.h;
    console.log('on platform one')
    console.log()
  }
  if (player.x + player.w >= plat2.x && player.x <= plat2.x + plat2.w) {

    currentPlat.x = plat2.x;
    currentPlat.y = plat2.y;
    currentPlat.w = plat2.w;
    currentPlat.h = plat2.h;
  }
  if (player.x + player.w >= plat3.x && player.x <= plat3.x + plat3.w) {

    currentPlat.x = plat3.x;
    currentPlat.y = plat3.y;
    currentPlat.w = plat3.w;
    currentPlat.h = plat3.h;
  }
}


function doGravity() {
  if (player.y + 30 < currentPlat.y && jumping === false) {
    player.y++;
  }
}
var cntr = 0
var jumping = false

function jump() {
  jumping = true;
  if (cntr < 90) {
    cntr++;
    player.y--;
    setTimeout(jump, 2);
  } else {
    function fls() {
      jumping = false;
    }
    cntr = 0;
    setTimeout(fls, 50)

  }
}

<!DOCTYPE html>
<html>
<canvas width='500' height='500' id='gameframe' style='border-style: solid;'>Sorry, canvas is not supported for your browser. </canvas>
<button onclick='jump()'>jump</button>
<script src='script.js'></script>

</html>

Answer 1

不确定这是否是故意的，但您的平台确实重叠...
在下面的示例中查看

我确实改进了你的代码，为平台而不是单个项目使用数组，然后我们可以循环 platforms.forEach 这应该会帮助你减少重复代码，并且将来会添加更多平台很简单。

const canvas = document.getElementById('gameframe')
const ctx = canvas.getContext('2d')

var platforms = [
  {x: 250,  y: 50,  w: 250,h: 301},
  {x: 50,   y: 100, w: 250,h: 302},
  {x: -200, y: 75,  w: 250,h: 303}
]

function renderPlatforms() {  
  platforms.forEach(function(p) {
    ctx.beginPath();
    ctx.rect(p.x, p.y, p.w, p.h);
    ctx.fillText(p.x, p.x +5, p.y-5);
    ctx.fillText(p.w + " / " +p.h, p.x +5, p.y+20);
    ctx.stroke();      
    if (p.x-- === 0 - p.w) p.x = canvas.width;      
  })  
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  renderPlatforms();
  setTimeout(draw, 10)
}
draw();

<canvas width='500' height='150' id='gameframe' style='border-style: solid;'></canvas>

如果你要像这样重叠平台，你必须改变你的逻辑并检查玩家是否与任何平台发生碰撞你的方法只检查一个（当前平台）会产生问题。

在对游戏进行故障排除时，我发现 ctx.fillText() 比 console.log() 更有帮助，您可以在屏幕上显示对象的值，而且通常减慢游戏速度可以帮助您查看值是否真的发生变化你希望他们也改变。

玩家有时会在无限跑酷游戏的原型中逐步通过平台？

player will sometimes phase through platforms in prototype of infinite runner game?

html

javascript

game-physics

html5-canvas