为什么我的画布不显示我的精灵?
Why wont my canvas show my sprite?
我现在正在学习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));
我的问题是我到底做错了什么，为什么我的精灵没有加载到我的画布中?
试试这个。
<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>
相关文章：
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 可以't让我的if语句处理js中的html表单输入
- 我的单元测试选项是什么
- 将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中
- 我的职位回报太快了，如何做出承诺
- 我的jQuery插件参数没有正确启动，遇到了问题
- 如何识别我的网站中的慢速设备
- 如何将JSON数据导入我的ejs模板
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- Three.js-如何使我的文本精灵更清晰
- 是否可以更改我的 css 精灵用 javascript 显示的子图像
- 如何在 javascript 中减慢我的精灵表动画
- CreateJS - 无法让我的精灵表动画化
- 为什么每次精灵移动时我的地图都会消失
- 为什么我的精灵表被多次加载
- 为什么easelJS缩放我的精灵?
- 为什么我的画布不显示我的精灵?
- 为什么我的精灵在不改变变量的情况下加速
- 我如何用不同的按钮制作不同的精灵动画?(HTML / CSS)
- 当我点击屏幕上的图像时，如何改变画布上的精灵?
