个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我现在正在学习 javascript，我正在尝试制作一些游戏来让它变得更有趣。问题是我正在使用 EaselJS 和 CreateJS 来制作游戏，而我才刚刚开始。
任何人..我需要一些帮助来了解为什么我的 Canvas 元素不会显示我正在使用的 Sprite 。
这是 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));
我的问题是我到底做错了什么，为什么我的 Sprite 没有加载到 Canvas 中？
最佳答案
试试这个。
<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>
关于javascript - 为什么我的 Canvas 不显示我的 Sprite ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23803840/
24
4
0
任何人都可以评论是否对图像使用 Sprite 的决定？我看到以下好处/权衡(其中一些可以减轻): 单个图像上的 Sprite 优点: 需要管理的图像更少 更容易实现主题图像 图像交换 (JS/CSS)
所以，我一直在 Unity 工作，但我决定是时候换成我更了解的东西了:JavaScript。我一直在考虑切换到 Phaser.js，但我有一些关于我什至在 Unity 中遇到的问题的问题，而且我在互联
所以我有一个木偶要在 Sprite Kit 中显示。木偶是由一堆不同的 body 部位组成的，当然每个部位都是一个.png。 所以我的过程是:我有一个 Marionette 对象(SKNode 子类)
我有一个 Sprite ，我将其初始化为 SKSPriteNode，它不断地从另一个 Sprite 上弹起，也以相同的方式初始化。 我无法弄清楚两者之间的冲突，并且到目前为止堆栈上没有任何帮助。 我将
标题说明了一切。我想知道 Sprite.getcontentsize、Sprite.gettexture、Sprite.getscale 之间有什么区别。以及它们是如何使用的。在这个问题之后我找不到任
我有兴趣尝试创建一些游戏，即在新的 sprite 工具包中。但是，对于我心目中的游戏，我宁愿使用方向键而不是操纵杆。因为我将从 Cocos 搬过来，所以我的旧程序不再有效(所以那个 dpad 也不会)
我正在 LibGdx 中开发 2D 射击游戏。 我不得不提一下，我是 LibGdx 的新手，我正在努力理解它是如何工作的。我有几年的Java和Android编程经验，所以我了解游戏概念。 我感兴趣的是
我正在使用 Compass 生成 CSS Sprite 。 我找到了一种方法来定义一次 Sprite 并在不同的 .scss 文件中使用它，但我不确定这是正确的解决方案。 到目前为止，我能找到的最好方
我在游戏中遇到背景音乐问题。当我从主菜单场景切换到游戏场景时，它停止，但是当游戏场景切换到gameOver场景时，它不停止。当我选择重播时，音乐也会重叠(从gameOver场景切换回游戏场景)。 要播
我是一名使用 libgdx 引擎的新程序员，想知道 Sprite 批处理的行为。特别是如何在程序生命周期中将 Sprite 添加到批处理中以进行绘制。到目前为止， Sprite 的所有示例都使用了一些
这可能是个愚蠢的问题，但如果有人能帮助我，我将不胜感激。 我有一个由 3 个垂直堆叠的不同图像组成的 Sprite ，但我试图让中间的图像(高度为 1px 和宽度为 194)重复，只是那条 1px 的
我正在尝试为我正在构建的菜单加载 spritesheet，但它不是一次显示一个图像，而是在元素的不同位置显示整个 spritesheet。 这是我使用两张图片的 CSS 代码: #mymenu ul.
我有两个 Sprite 组，ship_list 有 20 个飞船 Sprite ，all_sprites 有这 20 个 Sprite ，加上玩家 Sprite 。在主循环中，当检测到玩家与 ship
我制作了这个我可以抓取并四处移动的 Sprite 。我的问题是我希望能够“抛出” Sprite 。意思是，当我释放 Sprite 时，我希望它继续沿着我移动它的方向前进。就像扔球一样。 我该怎么办？
我目前正在开发 HTML/CSS 模板，我将实现以下社交媒体图标: http://www.premiumpixels.com/freebies/41-social-media-icons-png/ 它
在我的游戏中，我希望能够收集硬币。我有一个该硬币 Sprite 的数组列表，这样我就可以单独绘制多个硬币。这些硬币也随着背景移动(模拟汽车驾驶)，我想要它，所以当硬币撞到汽车时，它会消失并被收集。感谢
我是 cocos2D 的新手，谁能提出一个简单的解决方案？ 我有一个风车，风车上有 8 个条，每个条以 45 度隔开，其中风车的一半在屏幕上，一半在屏幕外。我想旋转风车，让它永远旋转。我还想在风车杆的
我使用的是主播中心分支，刚刚发现我的游戏出现的问题大部分都是这个原因。有没有一种方法可以使用 Sprite 的左下角而不是使用 (0, 0) 作为其中心来设置 Sprite ？ 谢谢! 最佳答案 发现
我是 magic-importing我的 Sprite : // Creating a concatenated sprite image out of all sprites in the "/im
这个问题在这里已经有了答案: How do I detect collision in pygame? (5 个答案) 关闭去年。 想要创建一个包含 10 张图像的组。稍后屏幕上的图像不应重叠。我尝
我是一名优秀的程序员,十分优秀！