HTML5 CreateJS game, update function not working - html

Question

Everything seems to work up to this function "update". A blue paddle (rectangle)should be appearing at the bottom right corner of my stage yet it's not.
const ARROW_KEY_LEFT = 37;
const ARROW_KEY_UP = 38;
var stage,padle;
var leftKeyDown,rightKeyDown = false;
function init(){
stage = new
createjs.Stage(document.getElementById("canvas"));
createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(60);
startGame();
};
function startGame(){
padle = new createjs.Shape();
padle.width = 100;
padle.graphics.beginFill("#0000FF").drawRect(0, 0, padle.width, 20);
padle.x = padle.nextX = 0;
padle.y = stage.canvas.height - 20;
stage.addChild(padle);
window.onkeydown = movePadle;
window.onkeyup = stopPadle;
};
function movePadle(e){
e = !e ? window.event : e;
switch (e.keyCode){
case ARROW_KEY_LEFT:
leftKeyDown = true;
break;
case ARROW_KEY_RIGHT:
rightKeyDown = true;
break;
}
};
function stopPadle(e){
e = !e ? window.event : e;
switch (e.keyCode){
case 37:
leftKeyDown = false;
break;
case 39:
rightKeyDown = false;
break;
}
};
This is the update function where it doesn't seem to be functioning. Any help is appreciated!
function update(){
var nextX = padle.x;
if (leftKeyDown){
nextX = padle.x - 10;
if(nextX < 0){
nextX = 0;
}
}else if (rightKeyDown){
nextX = padle.x + 10;
if(nextX > stage.canvas.width - padle.width){
alert("right key down");
nextX = stage.canvas.width - padle.width;
}
}
function tick(e){
update();
render();
stage.update();
};
http://jsfiddle.net/9nff5kta/
And it's no longer working on jsfiddle

Answer 1

I played with this a little, and got it "working". JSFiddle is not the best place to test Flash HTML/JS output because of the way the export works with CreateJS. I made some small changes, which allows it to work in jsfiddle.
I put the JS imports into resources so they load first
I removed the "createjs" declaration in the JavaScript. You are including the keyboardEvents.js in the jsfiddle "JavaScript" window, which includes it inside of a closure , instead of globally, so it recreates the "createjs" namespace - which makes it unable to find the CreateJS libs in your class. By removing it, it forces it to use the loaded JS libs.
http://jsfiddle.net/lannymcnie/9nff5kta/1/
I believe this is what you would have started with locally.
Once this was working, I got an error in the console that ARROW_KEY_RIGHT was undefined. Your code only had ARROW_KEY_LEFT and ARROW_KEY_UP. Once I changed the variable name, it seems to work. Check out the modified fiddle above.
Note that I just opened the Dev tools in Chrome, and the error was caught immediately, so it was clear what was happening. The jsfiddle stuff was a little harder to debug.
Cheers.