Перемещение GIF с помощью клавиш со стрелками, вызывающее ошибку Uncaught TypeError: Object function (){throwTicker не может быть создан.;}

Я новичок в javascript. Типа, ДЕЙСТВИТЕЛЬНО статус новичка.
Моя цель: сделать гифку с плавающей кошкой, привязанной к воздушному шару. Я хотел бы иметь возможность перемещать gif на холсте с помощью клавиш со стрелками. Теперь у меня есть GIF на холсте, и я могу перемещать его с помощью клавиш со стрелками. Тем не менее, GIF перемещается кадр за кадром, когда вы перемещаете клавиши со стрелками. Я имею в виду, что это неподвижный gif, пока вы не нажмете клавишу со стрелкой один раз, а затем он переместится на один кадр.

Если это поможет, вот мой код:

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

И тело:

<body onload="init(); start();">
<canvas id="myCanvas" width="800" height="400"></canvas>
</body>

Это ошибка, которую я получаю:

Uncaught TypeError: функция объекта (){throw"Ticker не может быть создана.";} не имеет метода "addEventListener"

Я хочу, чтобы gif работал непрерывно, а не просто продвигался на один кадр. Я думал, что "drawNewFrame" заставит GIF работать непрерывно, но это не работает.
Я не знаю, что означает эта ошибка. Если бы кто-нибудь мог оказать мне некоторую помощь в выяснении того, что означает эта ошибка, я был бы очень признателен. Спасибо ^_^


javascript arrow-keys gif createjs
person jennygee    schedule 09.05.2014    source источник
comment
Что такое createjs? Что такое balloon? Что вы пробовали? Почему я должен делать твою домашнюю работу?   -  person nderscore    schedule 09.05.2014
comment
Я немного покопался за вас и нашел этот классный пример кода, который может вам помочь: msdn.microsoft.com/en-us/library/gg589516(v=vs.85).aspx   -  person adamj    schedule 09.05.2014
comment
Я делаю это для своего собственного проекта, а не для классного задания. Я выхожу за пределы класса и застреваю. Я просто не понял, что означает ошибка. Воздушный шар - это название моей гифки. Ммм... Я действительно не знаю, что такое createjs. Я просматривал образцы кода, и это было просто там.   -  person jennygee    schedule 09.05.2014
comment
О, да. Не волнуйтесь, у меня есть библиотека createjs, включенная в мой код (не знаю, как она называется). Пример кода для меня немного продвинут, но я обязательно посмотрю. Извините, я действительно только начинаю учить себя этому. Я даже не знаю, смогу ли я достичь своей цели с базовыми знаниями, которые у меня есть, или мне понадобится дополнительное образование.   -  person jennygee    schedule 09.05.2014
comment
Я думаю, что gif (анимированный) не подходит для вашего приложения. Вам нужно иметь отдельные изображения движения кошки. Затем нажата клавиша со стрелкой, чтобы загрузить одно изображение.   -  person Sajitha Rathnayake    schedule 09.05.2014
comment
Ух ты! Большое спасибо! Я использовал ссылку на более старую версию createjs. Я скачал последнюю версию, и теперь она работает с моим кодом. Моя плавающая кошка качается вверх и вниз, а затем я могу перемещать ее с помощью клавиш со стрелками. (Я сделал плавающего кота на флешке, а затем сделал из него лист спрайтов)   -  person jennygee    schedule 09.05.2014
comment
Да, я не знал, что есть разные версии. Большое спасибо за предложение.   -  person jennygee    schedule 09.05.2014

Ответы (1)


arrow_upward
1
arrow_downward

Эта ошибка Uncaught TypeError: Object function (){throw"Ticker cannot be instantiated.";} has no method 'addEventListener' связана с изменением способа обработки прослушивателей событий объектом Ticker с версии createjs 0.5 на версию createjs 0.7.

В версии 0.5 это было примерно так:

createjs.Ticker.addListener(/*function to call*/)

В версии 0.7 это было изменено на

createjs.Ticker.addEventListener('tick', /*function to call*/);

согласно Reference (согласно проблеме №2)

person OJay    schedule 09.05.2014
comment
Обратите внимание, что если вам нужно определить область действия обратного вызова (который был автоматическим в старой версии EaselJS, поскольку он просто принимал объект, а не функцию), вы можете использовать ярлык on(), который принимает параметр scope. У него также есть удобный параметр для автоматического удаления прослушивателя после его однократного запуска. createjs.com/Docs/EaselJS/classes/ - person Lanny; 09.05.2014