I am a beginner at javascript. Like, REALLY beginner status.
My goal: I made a gif of a floating cat tied to a balloon. I would like to be able to move the gif around on a canvas using the arrow keys. Now, I have my gif on the canvas, and I can move it around with the arrow keys. However, the gif moves frame-by-frame as you move the arrow keys. I mean, it is a still gif until you move the arrow key once, then it advances by one frame.
If it is any help, here is my code:
<script>
var KEYCODE_LEFT = 37,
KEYCODE_RIGHT = 39,
KEYCODE_UP = 38,
KEYCODE_DOWN = 40;
var myStage;
var floaty;
function keyPressed(event) {
switch(event.keyCode) {
case KEYCODE_LEFT:
floaty.x -= 5;
break;
case KEYCODE_RIGHT:
floaty.x += 5;
break;
case KEYCODE_UP:
floaty.y -= 5;
break;
case KEYCODE_DOWN:
floaty.y += 5;
break;
}
myStage.update();
}
function init(){
myStage = new createjs.Stage(document.getElementById("myCanvas"))
floaty = new balloon();
floaty.x = 300;
floaty.y = 200;
myStage.addChild(floaty);
createjs.Ticker.setFPS(6);
createjs.Ticker.addEventListener("tick", drawNewFrame);
}
function drawNewFrame(evt){
myStage.update();
}
function start(){
this.document.onkeydown = keyPressed;
}
</script>
And the body:
<body onload="init(); start();">
<canvas id="myCanvas" width="800" height="400"></canvas>
</body>
This is the error that I get:
Uncaught TypeError: Object function (){throw"Ticker cannot be instantiated.";} has no method 'addEventListener'
I want the gif to run continuously, not just advancing by one frame. I thought that "drawNewFrame" would get the gif to run continuously, but it isn't working.
I don't know what that error means. If anyone could lend me some assistance in figuring out what that error means, I would really appreciate it. Thank you ^_^
This error Uncaught TypeError: Object function (){throw"Ticker cannot be instantiated.";} has no method 'addEventListener'
is related to a change in the way that the Ticker object handles Event Listeners from createjs version 0.5 to createjs version 0.7.
In version 0.5 it was somehitng like this:
createjs.Ticker.addListener(/*function to call*/)
In version 0.7 it was change to
createjs.Ticker.addEventListener('tick', /*function to call*/);
as per Reference (as per problem #2)