时间戳

首页 > 解决方案 > 如果我更改标签并返回，我的 GIF 会冻结一段时间（p5.js）

javascript - 如果我更改标签并返回，我的 GIF 会冻结一段时间（p5.js）

问题描述

猫巴士游戏代码

每当我尝试运行它时，它都可以正常工作，但是当我切换到另一个选项卡并返回时，gif 冻结的时间与我在另一个选项卡中的时间相同。我试图能够同时运行背景和 gif。那么，你们都知道任何可以修复 gif 的方法吗？

（代码如下）

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;
}

标签： javascriptgifp5.jsanimated-gif

解决方案

我无法找到问题的路径原因，但我找到了一个潜在的解决方法，它甚至可能在以后添加猫跳跃的能力时使您受益。

而不是使用loadImage我正在使用createImg- 这是文档的链接。

  let cat = {
    x: 50,
    y: 730
  }


  ...
  // in setup()

  catGif = createImg("catgif.gif");
  catGif.position(cat.x, cat.y);
  catGif.size(200, 100);

如果您遇到困难，我已经在此p5.js 草图中实施了更改，为您指明了正确的方向。

然后稍后，在您的draw()方法中，您可以根据一些速度动态设置猫的位置，我建议您查看这篇文章，因为它应该可以帮助您了解力以及如何将它们应用于您的游戏。

推荐阅读