为什么我的画布不显示精灵？

Question

我目前正在学习javascript，并且正在尝试制作一些游戏来帮助它变得更有趣/更有趣。 问题是我正在使用EaselJS和CreateJS制作游戏，而我才刚刚起步。

任何人..我需要一些帮助，以了解为什么我的canvas元素不会显示我正在使用的精灵。

这是html文件：

<head>

<!-- Note: All core EaselJS classes are listed here: -->
<script type="text/javascript" src="../EaselJS/src/createjs/events/Event.js"></script>
<script type="text/javascript" src="../EaselJS/src/createjs/events/EventDispatcher.js"></script>
<script type="text/javascript" src="../EaselJS/src/createjs/utils/IndexOf.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/Ticker.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/geom/Point.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/geom/Rectangle.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Shadow.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/SpriteSheet.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Bitmap.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Sprite.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/BitmapAnimation.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/BitmapText.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Text.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/DOMElement.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/filters/Filter.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/ui/ButtonHelper.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/ui/Touch.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/SpriteSheetUtils.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/SpriteSheetBuilder.js"></script>

<!-- We also provide hosted minified versions of all CreateJS libraries.
    http://code.createjs.com -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- using this because for some reason the Player and Game files don't work without it -->
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

<script src="javascript/Player.js"></script>
<script src="javascript/Game.js"></script>

<script type="text/javascript">
    var game;

    var canvas = document.getElementById("gameScreen");
    var stage = new createjs.Stage(canvas);

    function startGame(){
        game = new Game(stage);
        game.StartGame();
    }
</script>

</head>
<body onload="startGame();">
    <div id="test"><p>blah blah blah</p></div>
    <div id="canvasHolder">
        <canvas id="gameScreen" width="500" height="500"></canvas>
    </div>
</body>
</html>

这是Game.js：

(function (window){

var START_X_POS = 250;
var START_Y_POS = 20;

var LEFT_KEYCODE = 37;
var RIGHT_KEYCODE = 39;

var SPRITE_SHEET_PATH = "./assets/linkSprite.png"

//at some point add in canvas dimensions for collision stuff
function Game(stage){
    this.gameStage = stage;
    this.Hero = new Player(SPRITE_SHEET_PATH, START_X_POS, START_Y_POS);

    //store the current context
    var instance = this;

    document.onkeydown = function (e){
        instance.handleKeyDown(e);
    };
    document.onkeyup = function (e){
        instance.handleKeyUp(e);
    };

    this.gameStage.addChild(this.Hero);
    this.gameStage.update();
}

Game.prototype.Update = function (){
    this.Hero.tick();
};

Game.prototype.tick = function (){
    this.Update();
    this.gameStage.update();
};

// Starting the game
Game.prototype.StartGame = function () {
    createjs.Ticker.addListener(this);
    // Targeting 60 FPS
    createjs.Ticker.setFPS(60);
};

Game.prototype.handleKeyDown = function (e){
    //the caps constants kinda explain this
    if(e.keyCode === LEFT_KEYCODE){
        this.Hero.direction = -1;
        console.log("handleKeyDown left");
    }else if(e.keyCode === RIGHT_KEYCODE){
        this.Hero.direction = 1;
        console.log("handleKeyDown right");
    }
}

Game.prototype.handleKeyUp = function (e){
    //setting it back to idle animation
    this.Hero.direction = 0;
}

window.Game = Game;
} (window));

这是Player.js：

(function (window){

function Player(spriteSheet, startX, startY){
    this.setup(spriteSheet, startX, startY);
}

//spriteSheet is the path to the player sprite
Player.prototype.setup = function (spriteSheet, startPosX, startPosY){
    //load the sprite sheet
    var localSpriteSheet = new createjs.SpriteSheet({
        "animations": {
            "run": [0, 6, "run"],
            "jump": [7, 9, "jump"],
            "idle": [31, 31, "idle"]},
        "images": [spriteSheet],
        "frames":
        {
            "height": 64,
            "width": 64,
            "regX": 0,
            "regY": 0,
            "count": 64
        }
    });

    //use X and Y to position
    this.x = startPosX;
    this.y = startPosY;
    this.sprite = new createjs.Sprite(localSpriteSheet, "idle");

    //1 = right | -1 = left | 0 = idle
    this.direction = 0;
    this.name = "Hero";
};

Player.prototype.tick = function (){
    this.move();

    //now animate the sprite
    if(this.direction === 1){
        this.sprite.gotoAndPlay("run");
    }else if(this.direction === -1){
        this.sprite.gotoAndPlay("run");
    }else{
        this.sprite.gotoAndPlay("idle");
    }
};

Player.prototype.move = function (){
    if(this.direction === 1){
        this.x += 1;
    }else if(this.direction === -1){
        this.x -= 1;
    }else{
        this.x += 0;
    }
};

window.Player = Player;

} (window));

我的问题是我到底做错了什么，为什么我的精灵没有载入画布？

Answer 1

尝试这个。

<script type="text/javascript">
    function startGame()
    {
        var game;

        var canvas = document.getElementById("gameScreen");
        var stage = new createjs.Stage(canvas);        

        game = new Game(stage);
        game.StartGame();            
    }
    </script>