Javascript 为什么我的精灵不会出现在我的背景上？_Javascript_Html_Css_Easeljs_2d Games

Javascript 为什么我的精灵不会出现在我的背景上？

javascript html css

Javascript 为什么我的精灵不会出现在我的背景上？,javascript,html,css,easeljs,2d-games,Javascript,Html,Css,Easeljs,2d Games,我一直在为我即将制作的游戏练习使用精灵，并观看和阅读了一些教程，我以为我的精灵即将出现，这样我就可以最终开始我的游戏了，但在练习时我无法让它工作，我没有两个单独的教程，我可以让精灵和背景出现在他们自己，但不能让他们一起工作，我一直在使用EaselJS太。一些精灵动画代码也从教程中复制 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>

我一直在为我即将制作的游戏练习使用精灵，并观看和阅读了一些教程，我以为我的精灵即将出现，这样我就可以最终开始我的游戏了，但在练习时我无法让它工作，我没有两个单独的教程，我可以让精灵和背景出现在他们自己，但不能让他们一起工作，我一直在使用EaselJS太。一些精灵动画代码也从教程中复制

<!DOCTYPE HTML>
<html>
    <head>
       <meta charset="UTF-8">
       <title>sprite prac<title>

       <!-- EaselJS library -->
       <script src="lib/easel.js"></script>
        <script>



            // Initialize on start up so game runs smoothly
            function init() {

               canvas = document.getElementById("canvas");
               stage = new Stage(canvas);

               bg = new Image();
               bg.src = "img/grassbg.jpg";
               bg.onload = setBG;
               stage.addChild(background);

                imgMonsterARun = new Image();
                imgMonsterARun.onload = handleImageLoad;
                imgMonsterARun.onerror = handleImageError;
                imgMonsterARun.src = "img/MonsterARun.png";

               stage.update();
            }

            function handleImageLoad(e) {
                startGame();
            }

            // Simple function for setting up the background
            function setBG(event){
               var bgrnd = new Bitmap(bg);
               stage.addChild(bgrnd);
               stage.update();
            }

            function startGame() {
    // create a new stage and point it at our canvas:
    stage = new createjs.Stage(canvas);

    // grab canvas width and height for later calculations:
    screen_width = canvas.width;
    screen_height = canvas.height;

    // create spritesheet and assign the associated data.
    var spriteSheet = new createjs.SpriteSheet({
        // image to use
        images: [imgMonsterARun], 
        // width, height & registration point of each sprite
        frames: {width: 64, height: 64, regX: 32, regY: 32}, 
        animations: {   
            walk: [0, 9, "walk"]
        }
    });

    // create a BitmapAnimation instance to display and play back the sprite sheet:
    bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

    // start playing the first sequence:
    bmpAnimation.gotoAndPlay("walk");   //animate

    // set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
    // of animated rats if you disabled the shadow.
    bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);

    bmpAnimation.name = "monster1";
    bmpAnimation.direction = 90;
    bmpAnimation.vX = 4;
    bmpAnimation.x = 16;
    bmpAnimation.y = 32;

    // have each monster start at a specific frame
    bmpAnimation.currentFrame = 0;
    stage.addChild(bmpAnimation);

    // we want to do some work before we update the canvas,
    // otherwise we could use Ticker.addListener(stage);
    createjs.Ticker.addListener(window);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(60);
}

//called if there is an error loading the image (usually due to a 404)
function handleImageError(e) {
    console.log("Error Loading Image : " + e.target.src);
}

function tick() {
    // Hit testing the screen width, otherwise our sprite would disappear
    if (bmpAnimation.x >= screen_width - 16) {
        // We've reached the right side of our screen
        // We need to walk left now to go back to our initial position
        bmpAnimation.direction = -90;
    }

    if (bmpAnimation.x < 16) {
        // We've reached the left side of our screen
        // We need to walk right now
        bmpAnimation.direction = 90;
    }

    // Moving the sprite based on the direction & the speed
    if (bmpAnimation.direction == 90) {
        bmpAnimation.x += bmpAnimation.vX;
    }
    else {
        bmpAnimation.x -= bmpAnimation.vX;
    }

    // update the stage:
    stage.update();
}




        </script>

    </head>

    <body onload="init();">
       <canvas id="canvas" width="500" height="500" style="border: thin black solid;" ></canvas>
    </body>
</html>


雪碧普拉克酒店
//启动时初始化，以便游戏顺利运行
函数init（）{
canvas=document.getElementById（“canvas”）；
阶段=新阶段（画布）；
bg=新图像（）；
bg.src=“img/grassbg.jpg”；
bg.onload=setBG；
阶段。添加儿童（背景）；
imgMonsterARun=新图像（）；
imgMonsterARun.onload=handleImageLoad；
imgMonsterARun.onerror=handleImageError；
imgMonsterARun.src=“img/MonsterARun.png”；
stage.update（）；
}
函数handleImageLoad（e）{
startGame（）；
}
//设置背景的简单功能
功能设置（事件）{
var bgrnd=新位图（bg）；
阶段。添加儿童（bgrnd）；
stage.update（）；
}
函数startName（）{
//创建一个新舞台并将其指向画布：
stage=newcreatejs.stage（画布）；
//抓取画布宽度和高度，以便以后计算：
屏幕宽度=画布宽度；
屏幕高度=画布高度；
//创建精灵表并指定关联的数据。
var spriteSheet=new createjs.spriteSheet({
//要使用的图像
图片：[imgMonsterARun]，
//每个精灵的宽度、高度和注册点
帧：{宽度：64，高度：64，regX:32，regY:32}，
动画：{
步行：[0,9，“步行”]
}
});
//创建位图动画实例以显示和播放精灵工作表：
bmpAnimation=新建createjs.BitmapAnimation（精灵表）；
//开始播放第一个序列：
bmpAnimation.gotoAndPlay（“行走”）；//设置动画
//设置一个阴影。请注意，阴影非常昂贵。您可以显示数百个阴影
//如果禁用阴影，则为已设置动画的老鼠。
bmpAnimation.shadow=newcreatejs.shadow（“#454”，0,5,4）；
bmpAnimation.name=“monster1”；
bmpAnimation.direction=90；
bmpAnimation.vX=4；
bmpAnimation.x=16；
bmpAnimation.y=32；
//让每个怪物从特定的帧开始
bmpAnimation.currentFrame=0；
阶段。添加儿童（bmpAnimation）；
//我们想在更新画布之前做些工作，
//否则我们可以使用Ticker.addListener（stage）；
createjs.Ticker.addListener（窗口）；
createjs.Ticker.useRAF=true；
createjs.Ticker.setFPS（60）；
}
//如果加载图像时出错（通常是由于404错误），则调用
函数handleImageError（e）{
log（“加载映像时出错：+e.target.src”）；
}
函数tick（）{
//点击测试屏幕宽度，否则我们的精灵就会消失
如果（bmpAnimation.x>=屏幕宽度-16）{
//我们已经到达屏幕的右侧
//我们现在需要向左走才能回到初始位置
bmpAnimation.direction=-90；
}
如果（bmpAnimation.x<16）{
//我们已经到达屏幕的左侧
//我们现在需要走路
bmpAnimation.direction=90；
}
//根据方向和速度移动精灵
如果（bmpAnimation.direction==90）{
bmpAnimation.x+=bmpAnimation.vX；
}
否则{
bmpAnimation.x-=bmpAnimation.vX；
}
//更新阶段：
stage.update（）；
}

在一些地方，您正在使用一些非常旧的API，这些API可能受支持，也可能不受支持，具体取决于您的EaselJS版本。你从哪里得到你引用的easel.js脚本的

假设您有一个与您使用的API相匹配的EaselJS版本，则存在一些问题：

您将
背景添加到舞台。没有背景，因此添加时可能会出错。您已经在setBackground 方法中添加了bgrnd ，这应该可以如果您在此处遇到错误，则这可能是您的主要问题。
您不需要在任何时候添加内容时更新stage，只要您希望stage“刷新”。在代码中，您可以在设置背景后进行更新，然后在init（）结束时立即进行更新。这些将一个接一个地发射您的控制台中是否出现错误？这将是开始调试的好地方。如果您仍然有问题，我还建议您发布代码以显示实际的演示，这将有助于确定发生了什么如果您有较新版本的EaselJS: 位图动画现在是精灵，不支持方向。要翻转精灵，请使用scaleX=-1 Ticker不再使用addListener 。相反，它使用EventDispatcher<代码>createjs.Ticker.addEventListener（“tick”，tickFunction）您可以在上获得CreateJS库的新版本，并且可以在和上获得更新的示例和代码。您知道我可以在哪里学习较新版本的EaselJS，或者甚至有任何关于在哪里学习创建简单javascript 2D游戏的建议吗？我已经采取了很多方法，比如在后台使用CSS，但仍然不起作用。你在GitHub或网站上查看过这些例子吗？网站上还有一些教程：