Question

虽然我过去曾广泛使用过Javascript，但我从未在程序中使用过类和对象。这也是我第一次使用带有额外Javascript库的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;
    }
}

这是我在Chrome开发者工具中遇到的错误：

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

如果您想知道，我的script标签的顺序是EaselJS CDN，其次是我的课程，然后是主脚本文件。

我真的很想关闭这个问题。提前谢谢。

Answer 1

我明白了。我正在将整个protagonist实例添加到舞台上。我通过在舞台上添加主角来修复。

EaselJs：对象，类和正方形移动

1 个答案: