问题描述
这是我提交的第一个问题。所以请放轻松!
我使用 p5.js 制作了一个非常简单的跑步/跳跃游戏。
游戏:https://simongowing1.github.io/the-art-collector-game/
代码:https://github.com/simongowing1/the-art-collector-game
最初“播放器”是静态的,但我只是添加了一个动画 gif(由两个图像组成),使其看起来像是在走路。
当我在浏览器中检查时,gif的两层同时显示,所以效果不起作用。
我认为这与图像的渲染有关。在堆栈上检查了一些其他解决方案后,我尝试了 'createImage()' 和 'createImg()' 而不是简单的 'loadimage()',但这两者都导致站点中的其他元素消失。
谁有想法?提前致谢。
我从下面的“game.js”文件中粘贴了我的代码以供参考
class Game {
constructor() {
this.backgroundImage;
this.tokenImage;
}
setup() {
this.background = new Background();
this.player = new Player();
this.tokens = [];
this.obstacles = [];
}
preload() {
this.backgroundImage = [
{ src:loadImage('assets/empty_gallery_long.jpg'),x: 0,speed: 1.5}
]
this.playerImage = loadImage('assets/Player1-walking-front.gif');
this.playerImageBk = loadImage('assets/Player1-walking-back.gif');
this.tokenImage1 = loadImage('assets/token1.png');
this.tokenImage2 = loadImage('assets/token2.png');
this.tokenImage3 = loadImage('assets/token3.png');
this.obstacleImage = loadImage('assets/Obstacle1.png');
this.backgroundMusic = createAudio('assets/01 Windowlicker.mp3');
this.jumpSound = createAudio('assets/jump.mp3');
this.saleSound = createAudio('assets/Sale.m4a');
this.breakingSound = createAudio('assets/breaking.m4a')
}
gamelogic() {
if (counter === remainingTime) {}
}
draw() {
clear();
this.background.draw();
//console.log('hello')
if (frameCount === 10 || frameCount % 500 === 0) {
this.tokens.push(new Token(this.tokenImage1))
//console.log('Now');
}
this.tokens.forEach(function (token) {
token.draw();
})
this.tokens = this.tokens.filter(
(token) => {
if (token.collision(this.player))
{
console.log('got it!');
return false
} else if (token.x < 0 - token.width) {
return false
} else {
return true
}
})
this.player.draw();
if (frameCount === 300 || frameCount % 1200 === 0) {
this.obstacles.push(new Obstacle(this.obstacleImage))
//console.log('Now');
}
this.obstacles.forEach(function (obstacle) {
obstacle.draw();
})
this.obstacles = this.obstacles.filter(
(obstacle) => {
if (obstacle.collision(this.player))
{
// console.log('CRASH');
return false
} else {
return true
}
})
解决方法
使用 ezgif 等免费在线编辑器将该 gif 分割成帧 然后按player1、player2等顺序命名所有帧 并编写这样的代码:-
this.playerImage = loadAnimation('player1','player2','player3');