Question

我是JavaScript的初学者，正在尝试为JavaScript游戏编写动画代码。我的动画代码的想法是，每30fps将加载一张新图片（其中有两个-diamond1和diamond2），这使菱形变得“发亮”。

这是我的代码的一部分：

this.currentAnimationState = 0
const spriteWidth = 32
this.animationSprites = [
    { x: 0 * spriteWidth, y: 0 * spriteWidth }
]
this.FrameCount = 0
this.fps = 30
} 

...

draw() {
        this.game.engine.drawImage(
            this.game.assets.diamond1,
            256,
            256,
            0,
            0,
            this.x,
            this.y,
            this.width
        ) // Diamond
    }

    updateDiamond(){
        if ( this.currentAnimationState =
        (this.currentAnimationState % this.FrameCount === 0){

} 
    }

我在draw()函数中遇到问题-我不知道如何将diamond2添加到assets，应该加载。同样在updateDimond()函数中，我不确定我的if语句是否正确，并且我不知道应该如何完成以使图片得到更新。

更新-在缺少的代码中，currentAnimationState将不会增加。这是我的assetLoader类：

export default class AssetLoader {
    loadAsset(name, url) {
        return new Promise((resolve, reject) => {
            const image = new Image()
            image.src = url
            image.addEventListener('load', function() {
                return resolve({ name, image: this })
            })
            image.addEventListener('error', function() {
                return reject(new Error('Image did not load ' + url))
            })
        })
    }
loadAssets(assetsToLoad) {
        return Promise.all(
            assetsToLoad.map(asset => this.loadAsset(asset.name, asset.url))
        ).then(assets =>
            assets.reduceRight(
                (acc, elem) => ({ ...acc, [elem.name]: elem.image }),
                {}
            )
        )
    }
}

以及加载游戏中使用的图片的代码部分：

function initWithAssets() {
    return new AssetLoader()
        .loadAssets([
            { name: 'stone', url: 'img/stone.png' },
            { name: 'dirt', url: 'img/soil2.png' },
            { name: 'dirt2', url: 'img/soil.png' },
            { name: 'diamond1', url: 'img/diamond1.png' },
            { name: 'diamond2', url: 'img/diamond2.png' },
            { name: 'wormw', url: 'img/worm1.png' },
            { name: 'worms', url: 'img/worm2.png' },
            { name: 'wormn', url: 'img/worm3.png' },
            { name: 'worme', url: 'img/worm4.png' },
            { name: 'molew', url: 'img/molew.png' },
            { name: 'molee', url: 'img/molee.png' },
        ])
        .then(assets => {
            return init(assets)
        })
        .catch(e => {
            console.error(e)
            return e
        })
}

用Javascript制作的动画，带有两张图片

0 个答案: