再次触发时图像快速跳动

Question

我试图在单击 canavas 时使 trex 图像跳转这是我的代码

index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<canvas onclick="canjump = true; renderer = requestAnimationFrame(loop); dinoy = 150;" height="250px" width="350px" style="border: 2px solid black" id="canvas"></canvas>
<img src="./dino.png" height="0px" width="0px" id="dinoimg">
<img src="./cacti.png" height="0px" width="0px" id="cactimg">
<script type="text/javascript" src="./main.js"></script>
</body>
</html>

main.js

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var dinoimage = document.getElementById('dinoimg');
var dinoheight = 100;
var dinowidth = 50;
var dinox = 0;
var dinoy = 150;
var canjump = false;
var renderer;
var jmpv = 15;
function loop() {
if (canjump = true && dinoy <= 150) {
jumpdino();
} else {
dinoy = 151;
jmpv = 15;
canjump = false;
cancelAnimationFrame(renderer);
}
//setcacti();
//checkcollision();
renderer = requestAnimationFrame(loop);
}
function jumpdino() {
ctx.clearRect(0, 0, 350, 250);
ctx.drawImage(dinoimage, dinox, dinoy, dinowidth, dinoheight);
dinoy -= jmpv;
jmpv--;
}

问题是第一次一切都按预期工作但是当之后点击 canvas 时（第二次点击和之后），图像只是非常快速地上升和下降并且加速不平稳第一次。请帮忙！！！

这两个 fore 函数调用已被注释，因为它们尚未实现。

Answer 1

只是修正了你的代码我在 else 中添加了一个 return，问题是即使你在 else 条件之后取消了 requestAnimationFrame 它仍然会继续并将渲染器重新分配给循环.所以它总是运行，每次你点击它只是添加另一个实例，让它运行得越来越快。

function loop() {
  if (canjump = true && dinoy <= 150) {
    jumpdino();
  } else {

    dinoy = 151;
    jmpv = 15;
    canjump = false;
    cancelAnimationFrame(renderer);
    // You need to exit out.
    return;
  }
  //setcacti();
  //checkcollision();
  renderer = requestAnimationFrame(loop);
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

var dinoheight = 100;
var dinowidth = 50;
var dinox = 0;
var dinoy = 150;
var canjump = false;
var renderer;
var jmpv = 15;

function loop() {
  if (canjump = true && dinoy <= 150) {
    jumpdino();
  } else {

    dinoy = 151;
    jmpv = 15;
    canjump = false;
    cancelAnimationFrame(renderer);
    return;
  }
  //setcacti();
  //checkcollision();
  renderer = requestAnimationFrame(loop);
}

function jumpdino() {
  ctx.clearRect(0, 0, 350, 250);
  ctx.fillRect(dinox, dinoy, dinowidth, dinoheight);
  dinoy -= jmpv;
  jmpv--;
}

<canvas onclick="canjump = true; requestAnimationFrame(loop); dinoy = 150;" height="250px" width="350px" style="border: 2px solid black" id="canvas"></canvas>

就我个人而言，我会删除内联事件处理程序并在您的代码中也执行类似的操作。

canvas.addEventListener('click', () => {
  canjump = true;
  dinoy = 150;
  loop();
});

再次触发时图像快速跳动

Image jumping fast when triggered again

html

javascript

animation

canvas

game-physics