EaselJs: объекты, классы и квадратный ход

Хотя в прошлом я широко использовал Javascript, я никогда не использовал классы и объекты в своих программах. Я также впервые использую элемент HTML5 canvas с дополнительной библиотекой Javascript. Я использую библиотеку EaselJS.

Коротко и приятно, я пытаюсь сделать квадратный ход с помощью ввода с клавиатуры, используя объектно-ориентированное программирование. Я уже просмотрел примеры игровых файлов, но я Мне никогда не удавалось заставить его работать должным образом.

Ниже приведен сценарий моего класса:

/*global createjs*/

// Shorthand createjs.Shape Variable
var Shape = createjs.Shape;

// Main Square Class
function square(name) {
    this.name = name;
    this.vX = 0;
    this.vY = 0;
    this.canMove = false;

    this.vX = this.vY = 0;
    this.canMove = false;

    this.body = new Shape();
    this.body.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);
}

И ниже мой основной скрипт:

/*global createjs, document, window, square, alert*/

// Canvas and Stage Variables
var c = document.getElementById("c");
var stage = new createjs.Stage("c");


// Shorthand Create.js Variables
var Ticker = createjs.Ticker;


// Important Keycodes
var keycode_w = 87;
var keycode_a = 65;
var keycode_s = 83;
var keycode_d = 68;

var keycode_left = 37;
var keycode_right = 39;
var keycode_up = 38;
var keycode_down = 40;

var keycode_space = 32;


// Handle Key Down
window.onkeydown = handleKeyDown;
var lfHeld = false;
var rtHeld = false;


// Create Protagonist
var protagonist = new square("Mr. Blue");


// Set Up Ticker
Ticker.setFPS(60);
Ticker.addEventListener("tick", stage);
if (!Ticker.hasEventListener("tick")) { 
    Ticker.addEventListener("tick", tick);
}

// Init Function, Prepare Protagonist Placement
function init() {
    protagonist.x = c.width / 2;
    protagonist.y = c.height / 2;

    stage.addChild(protagonist);
}

// Ticker Test
function tick() {
    if (lfHeld) {
        alert("test");
    }
}

// Handle Key Down Function
function handleKeyDown(event) {
    switch(event.keyCode) {
        case keycode_a:
        case keycode_left: lfHeld = true; return false;
        case keycode_d:
        case keycode_right: rtHeld = true; return false;
    }
}

Это ошибка, которую я получаю в инструментах разработчика Chrome:

Uncaught TypeError: undefined is not a function
easeljs-0.7.0.min.js:13

Если вам интересно, порядок моих script тегов следующий: CDN EaselJS, за которым следует мой класс, а затем основной файл сценария.

Я бы очень хотел закрыть этот вопрос. Заранее спасибо.


person JaredCubilla    schedule 18.05.2014    source источник
comment
Вы не можете использовать свой класс square просто так, вам нужно расширить какой-то класс createjs, например DisplayObject — взгляните на этот файл и примените эти методологии к вашему square: github.com/CreateJS/EaselJS/blob/master/examples/assets/Ship.js   -  person olsn    schedule 19.05.2014


Ответы (1)


Я понял. Я добавлял на сцену весь экземпляр protagonist. Я исправил, добавив на сцену protagonist.body.

person JaredCubilla    schedule 19.05.2014