Я новичок в 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
})
}