EaselJs : 객체, 클래스 및 스퀘어 무브 이동

Question

과거에는 자바를 광범위하게 사용했지만 저는 프로그램에서 클래스와 객체를 사용한 적이 없습니다. 이것은 HTML5 canvas 요소를 추가 자바 스크립트 라이브러리와 함께 사용하는 첫 번째 프로그램이기도합니다. 내가 사용하고있는 라이브러리는 EaselJS입니다.

나는 객체 지향 프로그래밍을 사용하여 키보드 입력으로 사각형 움직임을 만들려고합니다. 이미 sample game files을 살펴 봤지만 제대로 작동하지 못했습니다.

다음은 내 수업 스크립트입니다 :

/*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; 
    } 
} 

이다 내가 크롬의 개발자 도구에서 얻을 오류 :

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

궁금한 점이 있으시면 script 태그의 순서는 EaselJS CDN이고 그 다음은 내 수업 다음에 주 스크립트 파일이옵니다.

정말이 질문에 대한 결론을 원합니다. 미리 감사드립니다.

Answer 1

나는 그것을 알아 냈다. 스테이지에 전체 protagonist 인스턴스를 추가하고있었습니다. 주인공을 무대에 추가하여 해결했습니다.