Uncaught TypeError: Cannot set property 'frame' of undefined

[Qzlmnrk]

I'm working on a game and need help with an error (Uncaught TypeError: Cannot set property 'frame' of undefined) that appears when I run code inside a function.  Here's the full game code, with the error at line 60:

function getRandom(min, max) {	return Math.floor((Math.random() * (max - (min - 1))) + min);}var game = new Phaser.Game(480, 360, Phaser.AUTO, '', { preload: preload, create: create, update: update });var colorPosition = [0, 1, 2, 3];function preload() {	game.stage.disableVisibilityChange = true;	game.stage.backgroundColor = '#393837';	game.load.image('collide', 'assets/collide.png');	game.load.spritesheet('bucket-front', 'assets/bucket-front.png', 112, 82, 4);	game.load.spritesheet('square', 'assets/square.png', 20, 20, 4);	game.load.image('arrow', 'assets/arrow.png');	game.load.spritesheet('bucket', 'assets/bucket.png', 112, 82, 4);}function create() {	collide = game.add.sprite(0, 317, 'collide');	game.physics.enable(collide, Phaser.Physics.ARCADE);	arrow = game.add.sprite(175, 230, 'arrow');	for (var x = 0; x < 4; x++) {		this['bucket' + x] = game.add.sprite((x * 120) + 4, 278, 'bucket', x)	}	squares = game.add.group();	function addSquare() {		square = squares.create((getRandom(0, 3) * 120 + 50), -20, 'square', getRandom(0, 3));		game.physics.enable(square, Phaser.Physics.ARCADE);		square.body.velocity.y=100;	}	for (var x = 0; x < 4; x++) {		this['bucketFront' + x] = game.add.sprite((x * 120) + 4, 278, 'bucket-front', x)	}	game.time.events.loop(Phaser.Timer.SECOND * 1, addSquare, this);}function update() {	if ((game.input.x - 120) > 0 && (game.input.x + 120) <= 480) {		arrow.x = ((Math.round((game.input.x - 120) / 120)) * 120) + 55;	}	function removeSquare(collide, square) {		//square.kill();			}	game.physics.arcade.overlap(collide, squares, removeSquare, null, this);	//if (game.input.activePointer.isDown) {	game.input.onDown.add(swap(), this)	function swap() {		//alert(colorPosition)		//alert((arrow.x - 55) / 120 + 1)		var swap = colorPosition[(arrow.x - 55) / 120]		colorPosition[(arrow.x - 55) / 120] = colorPosition[(arrow.x - 55) / 120 + 1]		colorPosition[(arrow.x - 55) / 120 + 1] = swap		//alert(colorPosition)		this['bucket' + (Math.floor(arrow.x - 55) / 120)].frame = colorPosition[(arrow.x - 55) / 120] //Here's the line the error occurs on		this['bucket' + (((arrow.x - 55) / 120) + 1)].frame = colorPosition[((arrow.x - 55) / 120) + 1]		this['bucketFront' + (Math.floor(arrow.x - 55) / 120)].frame = colorPosition[(arrow.x - 55) / 120]		this['bucketFront' + (((arrow.x - 55) / 120) + 1)].frame = colorPosition[((arrow.x - 55) / 120) + 1]		//this['bucketFront' + (arrow.x - 55) / 120].frame = parseInt(colorPosition[(arrow.x - 55) / 120])		//alert(this['bucket' + (((arrow.x - 55) / 120) + 1)].frame)		//alert(colorPosition[((arrow.x - 55) / 120) + 1])	}}

This is my first attempt to do anything with JavaScript, so please try to be patient.

[lewster32]

It means that the object you're trying to set .frame on does not exist. Almost certainly this is because (Math.floor(arrow.x - 55) / 120) is not returning the correct value. This is a pretty wooly way of referencing objects, as you're depending on the calculation to always produce a valid property name. You're better off with solidly manageable references to object, such as creating an array or custom data format to contain the squares and then directly finding the object you're trying to manipulate; but if you do want to continue with this method, you should put some check to see if the object exists before continuing trying to manipulate it:

		if (this['bucket' + (Math.floor(arrow.x - 55) / 120)]) {			this['bucket' + (Math.floor(arrow.x - 55) / 120)].frame = colorPosition[(arrow.x - 55) / 120]			this['bucket' + (((arrow.x - 55) / 120) + 1)].frame = colorPosition[((arrow.x - 55) / 120) + 1]			this['bucketFront' + (Math.floor(arrow.x - 55) / 120)].frame = colorPosition[(arrow.x - 55) / 120]			this['bucketFront' + (((arrow.x - 55) / 120) + 1)].frame = colorPosition[((arrow.x - 55) / 120) + 1]		}

[Qzlmnrk]

 

It means that the object you're trying to set .frame on does not exist. Almost certainly this is because (Math.floor(arrow.x - 55) / 120) is not returning the correct value. This is a pretty wooly way of referencing objects, as you're depending on the calculation to always produce a valid property name. You're better off with solidly manageable references to object, such as creating an array or custom data format to contain the squares and then directly finding the object you're trying to manipulate; but if you do want to continue with this method, you should put some check to see if the object exists before continuing trying to manipulate it:

		if (this['bucket' + (Math.floor(arrow.x - 55) / 120)]) {			this['bucket' + (Math.floor(arrow.x - 55) / 120)].frame = colorPosition[(arrow.x - 55) / 120]			this['bucket' + (((arrow.x - 55) / 120) + 1)].frame = colorPosition[((arrow.x - 55) / 120) + 1]			this['bucketFront' + (Math.floor(arrow.x - 55) / 120)].frame = colorPosition[(arrow.x - 55) / 120]			this['bucketFront' + (((arrow.x - 55) / 120) + 1)].frame = colorPosition[((arrow.x - 55) / 120) + 1]		}

Thanks for the help!  Now I'm facing another problem, though: the click only sometimes registers, going through some periods of not working and periods of working.  I debugged it, and it doesn't seem to be caused by (this['bucket' + (Math.floor(arrow.x - 55) / 120)]) returning false.  Any idea why?

[lewster32]

You'll need to do some logging/debugging to find out what's happening when you click. Does the function fire? If so, where does it stop? What's the value of this['bucket' + (Math.floor(arrow.x - 55) / 120)] when it works vs when it doesn't? Gotta be a bit Sherlock Holmes and really try to identify the root of the problem. I usually place console.log statements throughout my code to see what's happening at various points, though best practice would be to use breakpoints and inspect your variables in your browser's development tools.

[Qzlmnrk]

You'll need to do some logging/debugging to find out what's happening when you click. Does the function fire? If so, where does it stop? What's the value of this['bucket' + (Math.floor(arrow.x - 55) / 120)] when it works vs when it doesn't? Gotta be a bit Sherlock Holmes and really try to identify the root of the problem. I usually place console.log statements throughout my code to see what's happening at various points, though best practice would be to use breakpoints and inspect your variables in your browser's development tools.

Thanks!  Figured it out, game.input.onDown.add(swap, this); should've been in create().

[lewster32]

Ah, yeah didn't spot that