Type error- cannot read property x of undefined

I have an infinite runner game that I'm coding, and I keep getting the same error that has nothing to do with the line it says the error is on, any idea what is going on? my code is below. I have no idea where to even start debugging this, so even a point in the right direction as to why this is happening would be greatly appreciated.

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>



Read more here: https://stackoverflow.com/questions/67376014/type-error-cannot-read-property-x-of-undefined

Content Attribution

This content was originally published by LlamaButt at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: