Javascript / HTML5 canvas bug variable, "Not defined" but is defined

Question

I am trying to learn and run this JavaScript script so that I can create an HTML5 based game. I'm struggling to figure out the error in this code. It is not working. Chrome's Dev tools say that I'm not defining x when very clearly it says var x = 0;"=. Here's the code, could someone help me find the error and suggest how I might fix it? Here's the code:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var player;
var playerImage = new Image();
var playerImage = 'http://jonah.pro/Block_Die/dev/src/player.gif';

var PlayerX = canvas.width / 2;
var PlayerY = canvas.width / 2;
var x = 0;
var y = 0;

function init() {
player.x = PlayerX + x;
player.y = PlayerY + y;
ctx.drawImage(playerImage, player.x, player.y);
};

document.onkeydown = function(e) {
if ( e.keyCode === 87 ) {
    y -= 2;
    alert("up!");
} //up

if ( e.keyCode === 83 ) {
    y += 2;
    alert("down!");
}//down
if ( e.keyCode === 65 ) {
    x -= 2;
    alert("left!");
}//left
if ( e.keyCode === 68 ) {
    x += 2;
    alert("right!");
}//right
}

init();

RafH · Accepted Answer · 2013-11-15 22:42:39Z

2

You try to access x property of player but player doesnt have x / y properties.

var player

should be

var player = {x:0,y:0}

You are creating a new Image object but just after you redefine it as string

var playerImage = new Image();
var playerImage = 'http://jonah.pro/Block_Die/dev/src/player.gif';

should be

var playerImage = new Image();
playerImage.src = 'http://jonah.pro/Block_Die/dev/src/player.gif';

Update : regarding your comments, here is an updated version with the player sprite control.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var playerImage = new Image();
playerImage.src = 'http://jonah.pro/Block_Die/dev/src/player.gif';

var PlayerX = canvas.width / 2;
var PlayerY = canvas.height / 2;

playerImage.onload = redraw;


function redraw() {
    ctx.clearRect (0 , 0 , canvas.width , canvas.height );
    ctx.drawImage(playerImage, PlayerX, PlayerY);
}

document.onkeydown = function(e) {
    if ( e.keyCode === 87 ) {
        PlayerY -= 2;
        redraw();
    } //up

    if ( e.keyCode === 83 ) {
        PlayerY += 2;
        redraw();
    }//down
    if ( e.keyCode === 65 ) {
        PlayerX -= 2;
        redraw();
    }//left
    if ( e.keyCode === 68 ) {
        PlayerX += 2;
        redraw();
    }//right
}

Plz note that I clear all the canvas to redraw the player element (ctx.clearRect (x,y,width, height );), you will need to adapt this if you have more assets.

Fiddle here

edited Nov 15, 2013 at 22:42

answered Nov 13, 2013 at 19:16

RafH

4,5442 gold badges25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mrCodingGuy Over a year ago

It still appears to not work, here is the link to the code: tetz.ca/e/projects/games/Block_Die

RafH Over a year ago

Yes, because you add x to PlayerX, what is x here ? If it s the values used on the keydown handler, you have to define them before the init function : var x,y=0;

mrCodingGuy Over a year ago

There's still something wrong with it, maybe I didn't put the right code in but, I want the character to move, from the keyboard like when 'w' is pressed, the character is moved forward.

Collectives™ on Stack Overflow

Javascript / HTML5 canvas bug variable, "Not defined" but is defined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related