Cada vez que trato de ejecutarlo, funciona bien, pero cuando cambio a otra pestaña y vuelvo, el gif se congela durante la misma cantidad de tiempo que estuve en la otra pestaña. Estoy tratando de poder ejecutar tanto el fondo como el gif. Entonces, ¿saben algo que pueda arreglar el gif?
(El código es el siguiente)
let img; let img2; var bgImg; var x1 = 0; var x2; var scrollSpeed = 4; var screen = 0; var y = -20; var x = 200; var speed = 2; var score = 0; let bing function preload() { bgImg = loadImage("backgwound.png"); bing=loadSound('catbus theme song.mp3') } function setup() { createCanvas(1000, 1000); img = loadImage("backgwound.png"); img2 = loadImage("catgif.gif"); x2 = width; bing.loop() } function draw() { if (screen == 0) { startScreen(); } else if (screen == 1) { gameOn(); } else if (screen == 2) { endScreen(); } let time = frameCount; image(img, 0 - time, 0); image(bgImg, x1, 2, width, height); image(bgImg, x2, 2, width, height); x1 -= scrollSpeed; x2 -= scrollSpeed; if (x1 <= -width) { x1 = width; } if (x2 <= -width) { x2 = width; } scale(0.4, 0.4); translate(300, 1855); image(img2, 0, 0); } function startScreen() { background(96, 157, 255); fill(255); textAlign(CENTER); text("CAT BUS BIZARRE ADVENTURE", width / 2, height / 2); text("click any key to START", width / 2, height / 2 + 20); reset(); } function gameOn() { background(0); text("SCORE = " + score, 30, 20); ellipse(x, y, 20, 20); rectMode(CENTER); rect(mouseX, height - 10, 50, 30); y += speed; if (y > height) { screen = 2; } if (y > height - 10 && x > mouseX - 20 && x < mouseX + 20) { y = -20; speed += 0.5; score += 1; } if (y == -20) { pickRandom(); } } function pickRandom() { x = random(20, width - 20); } function endScreen() { background(150); textAlign(CENTER); text("GAME OVER", width / 2, height / 2); text("SCORE = " + score, width / 2, height / 2 + 20); text("click space to play again", width / 2, height / 2 + 40); } function mousePressed() { if (screen == 0) { screen = 1; } else if (screen == 2) { screen = 0; } } function reset() { score = 0; speed = 2; y = -20; }No pude encontrar la causa de la ruta del problema, pero encontré una posible solución, e incluso podría beneficiarlo más adelante al agregar la capacidad para que el gato salte.
En lugar de usar loadImage , estoy usando createImg : aquí hay un enlace a los documentos .
let cat = { x: 50, y: 730 } ... // in setup() catGif = createImg("catgif.gif"); catGif.position(cat.x, cat.y); catGif.size(200, 100);Si se queda atascado, implementé los cambios en este boceto de p5.js para orientarlo en la dirección correcta.
Luego, más adelante, en su método draw() , puede establecer dinámicamente la posición del gato en función de cierta velocidad, le recomiendo que eche un vistazo a esta publicación , ya que debería ayudarlo a comprender las fuerzas y cómo se pueden aplicar a su juego. .
El problema aquí es en realidad un error en p5.js. El código en _animateGif que obtiene la hora actual tiene errores extraños (a veces obtiene una hora en el pasado). No entiendo por qué los autores de ese código decidieron usar pInst._lastFrameTime + pInst.deltaTime en lugar de solo usar pInst.millis() .