Uncaught TypeError: Cannot set property 'x' of undefined

[Darwin0101]

im working on an alpha for school and i keep getting this error and for the life of me i cant figure this out 

 

 

 

$(document).ready(function() {

var canvas = $("#myCanvas");

var context = canvas.get(0).getContext("2d");

 

var stage = $("#stage");

var output = $("#output");

var container = $("#container");

 

var backgroundColor = "rgb(128, 128, 128)";

 

resizeCanvas(); 

$(window).resize(resizeCanvas); 

 

function resizeCanvas() { 

//NOTE: manually call resizeCanvas() if stage dimensions change

var elem = $("#stage");

 

var marginTopBottom = elem.outerHeight(true) - elem.outerHeight();

var marginLeftRight = elem.outerWidth(true) - elem.outerWidth();

 

var borderTopBottom = elem.outerHeight() - elem.innerHeight();

var borderLeftRight = elem.outerWidth() - elem.innerWidth();

 

var paddingTopBottom = elem.innerHeight() - elem.height();

var paddingLeftRight = elem.innerWidth() - elem.width();

 

canvas.attr("width", elem.innerWidth() - paddingLeftRight );

canvas.attr("height", elem.innerHeight() - paddingTopBottom );

 

canvasWidth = canvas.width();

canvasHeight = canvas.height();

 

clearCanvas();

render();

}; 

 

function clearCanvas() {

//clear the canvas of the previous frame

 

//set transformation matrix to identity

 

context.setTransform(1,0,0,1,0,0);

context.clearRect(0,0, canvasWidth, canvasHeight);

context.beginPath();

 

};

 

function setBackgroundColor() {

//set background color

context.save();

context.fillStyle = backgroundColor;

context.fillRect (0, 0, canvasWidth, canvasHeight);

context.restore();

};

 

//--- main program

 

//canvas dimensions

 

var canvasWidth = canvas.width();

var canvasHeight = canvas.height();

 

var mouseX = 0;

var mouseY = 0;

var EPSILON = 0.0001;

 

var gameInitialized = false;

 

var SIZE = 64;

var PARALLAX_SPEED = 0.2;

var groundHeight = 0;

 

// an array to store the game sprites

var sprites = [];

 

// an array to store ther images to be loaded and tracked

var assetsToLoad = [];

var assetsLoaded = 0;

 

// direction

var moveUp = false;

var moveDown = false;

var moveRight = false;

var moveLeft = false;

var jump = false;

 

//Game objects

 

var skyImage = new Image();

skyImage.src = "./images/mySky.png";

$(skyImage).bind('load', imageLoadHandler);

assetsToLoad.push(skyImage);

 

var foregroundImage = new Image();

foregroundImage.src = "./images/smallBackgroundAlpha.png";

$(foregroundImage).bind('load', imageLoadHandler);

assetsToLoad.push(foregroundImage);

 

//assign img src for each tilesheet

var tileSheet_A = new Image();

tileSheet_A.src = "./images/hedgehogApocalypse.png";

$(tileSheet_A).bind('load', imageLoadHandler);

assetsToLoad.push(tileSheet_A);

 

var tileSheet_B = new Image();

tileSheet_B.src = "./images/timeBombPanic.png";

$(tileSheet_.bind('load', imageLoadHandler);

assetsToLoad.push(tileSheet_;

 

var tileSheet_C = new Image();

tileSheet_C.src = "./images/monsterMayhem.png";

$(tileSheet_C).bind('load', imageLoadHandler);

assetsToLoad.push(tileSheet_C);

 

var tileSheet_D = new Image();

tileSheet_D.src = "./images/collisionTileSheet.png";

$(tileSheet_D).bind('load', imageLoadHandler);

assetsToLoad.push(tileSheet_D);

 

//create game messages

var gameMessage = null;

 

var player; 

var background;

var foreground;

var enemy;

var box;

 

// HUD Objects

var innerMeter;

var outterMeter;

var score = 0;

 

//game states

var LOADING = 0;

var BUILD_MAP = 1;

var PLAYING = 2;

var OVER = 3;

var LEVEL_COMPLETE = 4;

var gameState = LOADING;

update();

 

//new game object prototype

var alien = Object.create(spriteObject)

extend( alien, {

NORMAL: [1, 0],

SCARED: [0, 1],

state: this.NORMAL,

 

init: function(SIZE) {

this.state = this.NORMAL;

Object.getPrototypeOf(alien).init.call(this, SIZE);

},

 

updateAnimation: function () {

this.sourceX = this.state[0] * this.sourceWidth;

this.sourceY = this.state[1] * this.sourceHeight;

}

 

});

 

 

function imageLoadHandler() {

 

// each time a image loads it will call this function

assetsLoaded++;

 

if(assetsLoaded === assetsToLoad.length)

{

$(skyImage).unbind('load', imageLoadHandler);

$(foregroundImage).unbind('load', imageLoadHandler);

$(tileSheet_A).unbind('load', imageLoadHandler);

$(tileSheet_.unbind('load', imageLoadHandler);

$(tileSheet_C).unbind('load', imageLoadHandler);

$(tileSheet_D).unbind('load', imageLoadHandler);

 

init(); 

}

};

 

window.addEventListener("keydown", keydownHandler, false);

window.addEventListener("keyup", keyupHandler, false);

 

//add listeners for the buttons

 

function keydownHandler(event) {

 

// if(event.keyCode != keys.F12)

// preventDefault(event);

 

var validInput = false;

 

if( event.keyCode === keys.UP

||event.keyCode === keys.DOWN

||event.keyCode === keys.RIGHT

||event.keyCode === keys.LEFT

||event.keyCode === keys.SPACE)

{

var key = keys.pressedKeys.indexOf(event.keyCode);

 

if(key === -1 )

{

keys.pressedKeys.push(event.keyCode);

}

preventDefault(event);

}

var validInput = false;

//take care of contantly pressed keys

if( keys.keyIsPressed(keys.UP) && !keys.keyIsPressed(keys.DOWN))

moveUp = true;

 

if( keys.keyIsPressed(keys.DOWN) && !keys.keyIsPressed(keys.UP))

moveDown = true;

 

if( keys.keyIsPressed(keys.RIGHT) && !keys.keyIsPressed(keys.LEFT))

moveRight = true;

 

if( keys.keyIsPressed(keys.LEFT) && !keys.keyIsPressed(keys.RIGHT))

moveLeft = true;

 

if( keys.keyIsPressed(keys.SPACE) )

jump = true;

 

// take of one timed pressedKeys

 

switch(event.keyCode)

{

case keys.ADD:

if(player.height <= SIZE * 2)

{

player.height += 10;

player.width += 10;

player.x -= 5;

player.y -= 5;

}

break;

 

case keys.SUBTRACT:

if(player.height <= SIZE * 0.25)

{

player.height -= 10;

player.width -= 10;

player.x += 5;

player.y += 5;

}

break;

 

case keys.GREATER:

player.rotation -= 10;

player.rotation = (player.rotation % 360);

break;

case keys.LESS:

player.rotation += 10;

player.rotation = (player.rotation % 360);

break;

 

case keys.OPEN_BRACKET:

if(player.alpha >= 0.2)

player.alpha -= 0.1;

player.alhpa -= 0.1;

break;

 

case keys.CLOSE_BRACKET:

if(player.alpha < 1)

player.alpha += 0.1;

break;

 

case keys.S_KEY:

player.shadow = !(player.shadow);

break;

 

case keys.DOWN:

break;

 

default:

validInput = false;

break;

}

return validInput;

};

 

function keyupHandler(event) {

 

var key = keys.pressedKeys.indexOf(event.keyCode);

var removedKey = undefined;

 

if(key !== -1 )

{

removedKey = keys.pressedKeys.splice(key, 1);

}

 

if(removedKey !== undefined) 

{

//take care of constantly pressed keys

if( removedKey == keys.UP)

{

moveUp = false;

}

 

else if( removedKey == keys.DOWN )

{

moveDown = false;

}

 

else if( removedKey == keys.RIGHT )

{

moveRight = false;

}

 

else if( removedKey == keys.LEFT )

{

moveLeft = false;

}

else if( removedKey == keys.SPACE )

{

jump = false;

player.isJumping = false;

}

}

}

 

//add a mouseDown event listener

canvas.bind("mousedown", mouseDownHandler);

canvas.bind("mouseup", mouseUpHandler);

 

function mouseDownHandler(event)

{

mouseX = event.pageX - canvas.offset().left;

mouseY = event.pageY - canvas.offset().top;

}

 

function mouseUpHandler(event)

{

 

}

 

 

function init () {

 

if(!gameInitialized)

{

establishWorld();

createGameObjects();

createMessages();

 

//initialize the gameWorld

gameWorld.width = background.width;

gameWorld.height = background.height;

 

camera.width = canvasWidth;

camera.height = canvasHeight;

 

//center the camera over the gameWorld

camera.x = ( gameWorld.x + gameWorld.width * 0.5 ) - camera.width * 0.5;

camera.y = ( gameWorld.y + gameWorld.height * 0.5 ) - camera.height * 0.5;

 

//position foreground

foreground.x = ( gameWorld.x + gameWorld.width * 0.5 );

foreground.y = ( gameWorld.y + gameWorld.height * 0.5 )

foreground.centerObject();

 

gameTimer.time = 30;

gameTimer.start();

 

gameInitialized = true;

//container.hide();

 

//change to the next gameState

gameState = PLAYING;

 

 

}

};

 

function establishWorld() {

//instantiate the background, the position it and it onto the sprite array

//distance background

background = Object.create(spriteObject);

background.init(1280);

background.sourceHeight = 960;

background.height = 960;

 

background.image = skyImage;

background.x = 0;

background.y = 0;

sprites.push(background);

 

//foreground

foreground = Object.create(spriteObject);

foreground.init(650);

foreground.sourceHeight = 500;

foreground.height = 500;

 

foreground.image = foregroundImage;

sprites.push(foreground);

 

//postion gameObjects

positionGameObjects();

 

//initialize HUD objects

innerMeter = Object.create(spriteObject);

innerMeter.init(128);

innerMeter.sourceY = 142;

innerMeter.height = 14;

innerMeter.sourceHeight = 14;

 

innerMeter.image = tileSheet_D;

//sprites.push(innerMeter);

 

outterMeter = Object.create(spriteObject);

outterMeter.init(128);

outterMeter.sourceY = 128;

outterMeter.height = 14;

outterMeter.sourceHeight = 14;

 

outterMeter.image = tileSheet_D;

//sprites.push(outterMeter);

 

};

 

function createGameObjects () {

//instantiate and initialize the game objects

player = Object.create(spriteObject);

player.init(SIZE);

 

player.image = tileSheet_A;

sprites.push(player);

 

enemy = Object.create(alien);

enemy.init(SIZE);

enemy.sourceX = 64;

//enemy.scrollable = false; //use for timer and HUD elems

enemy.image = tileSheet_A;

sprites.push(alien);

 

box = Object.create(spriteObject);

box.init(SIZE);

box.sourceX = 0;

box.sourceY = 64;

box.image = tileSheet_A;

sprites.push(box);

};

 

function positionGameObjects() {

 

//position foreground

foreground.x = ( gameWorld.x + gameWorld.width * 0.5 );

foreground.y = ( gameWorld.y + gameWorld.height * 0.5 );

foreground.centerObject();

 

//set groundHeight

groundHeight = foreground.bottom() - 50;

 

//position the player

player.x = ( gameWorld.x + camera.x + (camera.width * 0.5 ) );

player.y = ( gameWorld.y + camera.y + (camera.height * 0.5 ) );

player.centerObject();

 

//position the enemy

enemy.x = ( gameWorld.x + gameWorld.width * 0.5 ) + 150;

enemy.y = ( gameWorld.y + gameWorld.height * 0.5 );

enemy.centerObject();

 

//position the box

box.x = ( gameWorld.x + gameWorld.width * 0.5 ) - 150 + 100;

box.y = ( gameWorld.y + gameWorld.height * 0.5 );

box.centerObject();

 

 

//postions HUD Objects

innerMeter.x = enemy.x - enemy.halfWidth();

innerMeter.y = enemy.y - 16;

 

outterMeter.x = innerMeter.x;

outterMeter.y = innerMeter.y;

 

};

 

 

 

 

there is more code after this but i didnt want to flood the page

the error occurs uner the //postion the player comment "player.x = ( gameWorld.x + camera.x + (camera.width * 0.5 ) );"

when trying to see what my problem was i took out this line to see what would happen then i got the same error except with "y" in the line underneath, i have a separte .js file linked to my html file and in that i created a spriteObject and within that i have x defined 

[Daniel Belohlavek]

Please upload the code to codepen or JSfiddle. It will be easier to read, tweak, figure out and fix the problem. Once you do, edit the post: remove the code and add the link. Thanks!

[AzraelTycka]

Hello,

 

at first I'd like to ask you when you want to ask about js code to set up a working fiddle, the way it is now no one can repeat the process (link to fiddle).

Just to point it out you are missing a few semicolons in your code - not necessarily error but definitely bad practice ;-).

 

Because I couldn't reproduce the whole thing I'll advice you to strip the code of everything that doesn't need to be there step by step. If your problem is with player object then why do you give us all the code around, remove everything else and just keep player related parts and set them up hard (insert numbers instead of conditions depending on other factors) to see if you code about player is written in a wrong way. If you won't get any errors then step-by-step add pieces of code which you removed to find out when exactly you get the error (this way you'll find out what is wrong for certain).

 

Right off the bat advice:

a/ you set up your player as: var player; set objects as objects, arrays as arrays, ..., therefore var player = {}; and so on otherwise you'll run into so many errors.

b/ when you call "player.x = ( gameWorld.x + camera.x + (camera.width * 0.5 ) );" do you really have everything set up correctly? To me it seems that you don't have player set as object therefore you can't assign anything to it's property x when it can't exist. Example in fiddle why to set objects as objects is necessary.

 

PS: Use jshint, it will point out a few mistakes you made ;-).

Edited February 6, 2015 by AzraelTycka

[DemiPixel]

As started above, organize your code, even in something as simple as pastebin (or hastebin).

 

The error is exactly what it says: Somewhere you're doing object.x to get the x property of object but that object is undefined (AKA it can't find it). In this case, it would be player. Go an look at the LINE NUMBER is occurs as at find out why that object is undefined. This could be a mispelling, access to player incorrectly, or something else. Good luck!

 

Cheers,

Demi