类型错误 - 无法读取未定义的属性 x

Question

我有一个正在编写的无限跑酷游戏，但我一直收到相同的错误，这与它所说的错误所在的行无关，知道发生了什么吗？我的代码在下面。我什至不知道从哪里开始调试它，所以即使是关于为什么会发生这种情况的正确方向的观点也会非常感激。

var canvas = document.getElementById('infRunnerCanvas');
var ctx = canvas.getContext('2d');

function newfloor(x, y) {
  this.x = x;
  this.y = y;
  this.w = 200;
  this.h = 1000;
}

var gameWorld = {
  platforms: [{
    x: 0,
    y: 200,
    w: 200,
    h: 1000
  }],

  renderPlatforms: function() {
    ctx.fillStyle = 'blue';
    for (var y = 0; y < this.platforms.length; y++) {
      ctx.fillRect(this.platforms[y].x, this.platforms[y].y, this.platforms[y].w, this.platforms[y].h)
    }
  },
  managePlatforms: function() {
    var x = this.platforms[this.platforms.length].x + this.platforms[this.platforms.length].w
    var y = Math.floor(Math.random() * 150) - 75;
    if (x < canvas.width + 50) {
      var plat = new newfloor(x, y);
      this.platforms.push(plat);
    }
  },
  draw: function() {
    this.managePlatforms();
    this.renderPlatforms();
  }
}

function doDraw() {
  gameWorld.draw();
  setTimeout(doDraw, 2);
}

function displayMainMenu() {
  ctx.font = '35px Comic Sans Ms';
  ctx.textAlign = 'center'
  ctx.fillRect(0, 0, 1000, 1000);
  ctx.fillStyle = 'red';
  ctx.fillText('1 button run!', 350, 200);
  ctx.font = '15px Comic Sans Ms';
  ctx.fillText("Any key or click the screen to jump, don't hit the side of a platform.", 350, 250)
  ctx.fillRect(275, 300, 150, 60)
  ctx.fillStyle = 'black';
  ctx.font = '25px Comic Sans Ms';
  ctx.fillText('PLAY', 350, 340);
}
canvas.width = 700;
canvas.height = 500;
var playingGame = false;
console.log(canvas.getBoundingClientRect())
let mouse = {
  x: null,
  y: null,
}
displayMainMenu();

function handleClicks() {
  if (playingGame === false && mouse.x > 275 && mouse.x < 425 && mouse.y > 300 && mouse.y < 360) {
    ctx.fillRect(0, 0, 1000, 1000);
    gameWorld.renderPlatforms();
    gameWorld.draw();
  }
}

canvas.addEventListener('click', function(e) {
  mouse.x = e.x - canvas.getBoundingClientRect().x;
  mouse.y = e.y - canvas.getBoundingClientRect().y;
  handleClicks();
})

window.addEventListener('resize', function(e) {
  displayMainMenu();
})

<!DOCTYPE html>
<html>

<head>

</head>
<div style='text-align: center;'>

  <canvas width='700' height='500' id='infRunnerCanvas'> sorry, looks like your browser doesn't support the canvas element. </canvas>
</div>
<script src='script.js'>
</script>

</html>

Answer 1

错误在这一行：

var x = this.platforms[this.platforms.length].x

数组长度总是比实际可用索引多 1，因为它们的索引是基于 0 的。
你应该做

this.platforms[this.platforms.length - 1]

类型错误 - 无法读取未定义的属性 x

Type error- cannot read property x of undefined

html

javascript

html5-canvas

类型错误 - 无法读取未定义的 属性 x

Type error- cannot read property x of undefined

html

javascript

html5-canvas

类型错误 - 无法读取未定义的属性 x