Sign in to follow this  
Qzlmnrk

Uncaught TypeError: Cannot set property 'frame' of undefined

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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]		}

Share this post


Link to post
Share on other sites

 

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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().

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.