Анимация в Javascript с двумя картинками - PullRequest
0 голосов
/ 14 января 2019

Я новичок в JavaScript и пытаюсь написать анимационный код для игры JavaScript. Идея моего анимационного кода заключается в том, что каждые 30 кадров в секунду будет загружаться новая картинка (их две - 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 является правильным, и я не знаю, как мне его завершить, чтобы изображение было обновлено.

UPDATE - 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
        })
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...