个人中心
gpt4 book ai didi

javascript - 为什么我的 Canvas 不显示我的 Sprite ？

转载 作者：行者123 更新时间：2023-11-28 08:14:17 24 4
gpt4 key购买 nike

我现在正在学习 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
文章推荐： javascript - 如何仅从内部修改指令范围属性
文章推荐： javascript - 如何在 vaadin 6 中向文本字段或选项卡添加服装属性
文章推荐： javascript - Datepicker onSelect 格式化新的日期范围
文章推荐： javascript - 单击时使用 javascript 提交表单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com