爲什麼我的畫布不顯示我的精靈？

我正在學習JavaScript，我正在嘗試製作一些遊戲來幫助它變得更有趣。問題是我正在使用EaselJS和CreateJS來製作遊戲，而我只是開始。爲什麼我的畫布不顯示我的精靈？

Anywho ..我需要一些幫助，爲什麼我的畫布元素不會顯示我正在使用的精靈。

下面是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));

我的問題是什麼赫克我做錯了，爲什麼不是我的精靈加載到我的畫布？

來源

2014-05-22 Ben

好的，所以通過調試我發現當我調用'var stage = new createjs.Stage（canvas）;'時，由於某種原因，畫布爲空。這可能是爲什麼我的精靈沒有被繪製？ – Ben

改變了index.html使''startGame（）'函數中的所有腳本，現在我得到錯誤_Uncaught TypeError：undefined不是_easeljs-0.5.0.min.js上的function_：66_ – Ben

那裏在Game.js文件中有一個問題，我有'createjs.Ticker.addListener（this）;'它應該是'createjs.Tick.addEventListener（this）;'。工作正常，並沒有提供任何錯誤，並將該easeljs版本更新爲最新版本，但我的精靈仍未被繪製到畫布上 – Ben

試試這個。

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

來源

2014-05-22 10:17:28 cracker

我試過這個，但是在我調用'game.StartGame（）'後，'game'內部的滴答函數失去了它的作用域，並在我嘗試調用'this.Hero.tick（）'' Game.prototype.Update' – Ben

這是你的代碼中定義的這個「gameStage」，我無法找到，因爲tick只會更新，只有 – cracker

index.html中的'stage'被傳遞給遊戲對象，遊戲=新遊戲（舞臺）'，並且在遊戲對象中賦予它'this.gameStage = stage'的屬性 – Ben

爲什麼我的畫布不顯示我的精靈？

回答

相關問題