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

【问题标题】：Type error- cannot read property x of undefined类型错误 - 无法读取未定义的属性 x
【发布时间】：2021-05-03 21:25:52
【问题描述】：

我正在编写一个无限奔跑游戏，但我不断收到与错误所在行无关的相同错误，知道发生了什么吗？我的代码如下。我什至不知道从哪里开始调试这个，所以即使是在正确的方向上，为什么会发生这种情况，我们将不胜感激。

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>

【问题讨论】：

告诉我们它说错误在哪一行？
41，但其他弹出我忘记在哪里
好的，但是由于我们没有行号这里，你能告诉我们第41行是哪一行吗？而且，如果您也遇到其他错误，我们需要知道它们是什么以及您在哪里得到它们。来吧，把骨头扔在这里。

标签： javascript html html5-canvas

【解决方案1】：

错误在这一行：

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

数组长度总是比实际可用索引大 1，因为它们的索引是从 0 开始的。
你应该这样做

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

【讨论】：