个人中心
gpt4 book ai didi

javascript - EaselJs 教程。动画不运行

转载 作者：行者123 更新时间：2023-11-30 18:00:12 25 4
gpt4 key购买 nike

<分区>

大家好，我正在学习这个 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();
}

25 4 0
文章推荐： javascript - casperjs点击登录链接不起作用
文章推荐： javascript - Emberjs。如何抓取点击的相关数据？
文章推荐： c# - 反序列化 json 数组以列出 wp7
文章推荐： c# - WIF 和子域
行者123
个人简介

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

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