Почему мой холст не покажет мой спрайт?

Я изучаю javascript на данный момент, и я пытаюсь сделать некоторые игры, чтобы помочь ему быть более интересным/интересным. Проблема в том, что я использую EaselJS и CreateJS для создания игр, и я только начинаю.Почему мой холст не покажет мой спрайт?

Anywho .. Мне нужна помощь в том, почему мой элемент 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));

Мой вопрос заключается в том, что щеколда я сделал неправильно, и почему мой спрайт не загружается в мой холст?

источник

2014-05-22 Ben

ОК, поэтому через отладку я обнаружил, что холст пуст по какой-либо причине, когда я вызываю «var stage = new createjs.Stage (canvas);'. вот почему мой спрайт не рисуется? – Ben

изменил index.html, чтобы иметь весь скрипт внутри функции 'startGame()', и теперь я получаю ошибку _Uncaught TypeError: undefined не является функцией_ на _easeljs-0.5.0.min.js: 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()' функция tick внутри 'game' теряет свою область действия и бросает мне неопределенную ошибку, когда она пытается вызвать' this.Hero.tick() 'внутри' Game.prototype.Update' – Ben

где находится этот «gameStage», определенный в вашем коде, который я не могу найти, поскольку тик будет обновляться, только – cracker

«stage» из index.html передается в игровой объект с ' game = new Game (stage) 'и получает свое свойство в игровом объекте с' this.gameStage = stage' – Ben

Почему мой холст не покажет мой спрайт?

ответ

Смежные вопросы