EaselJs 教程。动画未运行[关闭]答案

【问题标题】：EaselJs tutorial. Animation not running [closed]EaselJs 教程。动画未运行[关闭]
【发布时间】：2013-06-17 08:40:09
【问题描述】：

大家好，我是本easeljs 教程的第一部分。

http://david.blob.core.windows.net/easeljstutorials/easelJSSpritesTutorial01.html

这就是我应该制作的（别担心教程会从那里开始，哈哈）

我已经稍微更改了代码以适应我的目的，但现在它不起作用了。

点击开始时没有播放动画。

我的代码中是否缺少某些内容？

这是 JSfiddle：

http://jsfiddle.net/d2tmY/

一些html：

<body>
<div class="description"></div>
<div class="canvasHolder">
    <canvas id="game" width="240" height="64" style="background-color:#607559">Your browser doesn't support canvas.
    </canvas>
</div>
<button id="Start" onclick="init();">Start</button>
<button id="Reset" onclick="reset();">Reset</button>

javascript：

    var canvas, stage, screen_width, screen_height, bmpAnimation;

var imgPlayerRun = new Image();

init() {
    //find canvas and load images. Wait for last image to load
    alert("Init is being run");
    canvas = document.getElementById("game");
    canvas.style.background = "white";


    imgPlayerRun.onload = handleImageLoad;
    imgPlayerRun.onerror = handleImageError;
    imgPlayerRun.src = "http://s8.postimg.org/r8i7knr91/test_player_run.png";
}

function () {
    stage.removeAllChildren();
    createjs.Ticker.removeAllListeners();
    stage.update();
}

function handleImageLoad(e) {
    startGame();
}

function startGame() {
    alert("startGame is being run");
    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 associated data
    var spriteSheet = new createjs.SpriteSheet({
        //image to use
        images: [imgPlayerRun],
        //width height and registration point of each sprite
        frames: {
            width: 47,
            height: 47,
            regX: 32,
            regY: 32
        },
        animations: {
            walk: [0, 9, "walk"]
        }
    });

    //create bitmap animation instance to display the playback the animation sequence
    bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

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

    //set up  a shadow - note shadows are ridiculously resource intensive - use if necessary only
    bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);

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

    //have each player 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;
    //best frame rate targeted 60 fps
    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 - 12) { //- 12 as this is a quarter of our sprite width and so should look like actually hits the sprite edge and not a box
        //we've reached the right side of our screen
        //we need to walk left now and go back to our initial position
        bmpAnimation.direction = -90;
    }

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

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

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

【问题讨论】：

标签： javascript animation html5-canvas easeljs createjs

【解决方案1】：

你在初始化时有语法错误，然后重置：

  function init() {
        //find canvas and load images. Wait for last image to load
        alert("Init is being run");
        canvas = document.getElementById("game");
        canvas.style.background = "white";
        imgPlayerRun.onload = handleImageLoad;
        imgPlayerRun.onerror = handleImageError;
        imgPlayerRun.src = "http://s8.postimg.org/r8i7knr91/test_player_run.png";
    }



  function reset () {
        stage.removeAllChildren();
        createjs.Ticker.removeAllListeners();
        stage.update();
    }

第一个你缺少函数声明，后者没有函数名，查看更新的fiddle。虽然这不是全部功能，因为并非所有资源都在小提琴上，但您应该能够使其在您的 PC 中运行。

【讨论】：

对不起，它们实际上是我的错别字。抱歉，我的代码在我的本地副本上没有这些问题。我已经设法解决了我现在遇到的问题。这实际上与 javascript 在一个单独的文件中以及范围等问题有关。感谢您的回答。
没问题，很高兴你成功了。

【解决方案2】：

我的问题实际上是由于我将 javascript 放在一个单独的文件中并且存在范围问题。我已经通过在我的网页本身的头部使用我的 javascript 来解决这个问题。（以上问题为简化版）谢谢！

【讨论】：