1

こんにちは、私はこのイーゼル JS チュートリアルの最初の部分にいます。

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>

ジャバスクリプト：

    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();
}
4

2 に答える 2

2

Init で構文エラーがあり、リセットします。

  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 で動作させることができるはずです。

于 2013-06-20T13:32:47.740 に答える