Image jumping fast when triggered again

user_13846410 0
Viewed 29

Im trying to make the image of a trex jump when canavas is clicked Here is my code

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

The problem is that everything work as expected for first time but when canvas is clicked after then (second click and after), the image just go up and come down very fast and not smoothly with acceleration like first time. Please help!!!

Those two fore function calls are commented because they arent implemented yet.

game-physics animation canvas html javascript
1 Answers

Just fixing the code you have I added a return in the else, the issue was even though you canceled the requestAnimationFrame after the else condition it still would continue and reassign renderer to the loop. So it was always running, each time you clicked it was just adding another instance making it go faster and faster.

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>

Personally I'd remove the inline event handler and do something like this in your code as well.

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