Js window.requestAnimFrame not functioning?

Question

So i'm trying to make a code that makes it so that when you press a button, 3 images pop up in random areas on a canvas using math.random and where you have another image controlled by the user that is able to move around using your keyboard. this is the code i came up with:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <link rel="stylesheet" href="Jeu.css">
  </head>
  <body>

    <canvas id="canvas" width="400" height="400"
    style="border-color: 'black'; border-width: 3px; border-style: solid">
      </canvas>
<br>
  <button type="button"onclick="dessiner()"><img src="start.jpg"></button>

<script type="text/javascript">

var canvas = document.getElementById("canvas");
var contexte = canvas.getContext("2d");
var x;
var y;
var x1;
var y1;
var x2;
var y2;


function ghost(){
  var image = new Image();
  image.src = "ghost.png";
  image.onload = function(){
  contexte.drawImage(image,x,y,60,60)
  contexte.drawImage(image,x1,y1,60,60)
  contexte.drawImage(image,x2,y2,60,60)
    };
};

function dessiner(){
contexte.clearRect(0, 0, 400, 400);
  x = 32 +(Math.random() * (400-64));
  y = 32 +(Math.random() * (400-64));
  ghost()

contexte.clearRect(0, 0, 400, 400);
  x1 = 32 +(Math.random() * (400-64));
  y1 = 32 +(Math.random() * (400-64));
  ghost()

contexte.clearRect(0, 0, 400, 400);
  x2 = 32 +(Math.random() * (400-64));
  y2 = 32 +(Math.random() * (400-64));
  ghost()

};

       window.requestAnimFrame = (function(){
       return window.requestAnimationFrame       || // La forme standardisée
       window.webkitRequestAnimationFrame || // Pour Chrome et Safari
       window.mozRequestAnimationFrame    || // Pour Firefox
       window.oRequestAnimationFrame      || // Pour Opera
       window.msRequestAnimationFrame     || // Pour Internet Explorer

        function(callback){                   // Pour les mauvais
        window.setTimeout(callback, 1000 / 60);

        };

        })();

        window.onload = function() {

        var image1 = new Image();
        image1.src = 'sac.gif';

        document.onkeydown = miseAJourTouche;



        T_fleche_gauche = 37;
        T_fleche_droite = 39;
        T_fleche_haut = 38;
        T_fleche_bas = 40;

        var a=100;
        var b=100;
        var dx=0;
        var dy=0;



        function miseAJourTouche(e){

        toucheCourante = e.keyCode;

        if (toucheCourante == T_fleche_gauche){
        dx= -1; dy=0;
        draw(dx,dy);
        }
        if (toucheCourante == T_fleche_droite){
        dx= 1; dy=0;
        draw(dx,dy);
        }
        if (toucheCourante == T_fleche_haut){
        dy= -1; dx=0;
        draw(dx,dy);
        }
        if (toucheCourante == T_fleche_bas){
        dy= 1; dx=0;
        draw(dx,dy);
        }
        }

        function draw(dx,dy) {
        context.save();
        context.clearRect(0, 0, 400, 400);
  context.drawImage(image1, 0, 0, 70,90);
        context.translate(10+a,10+b);

        context.restore();

        a = a+dx;
        b = b+dy;

        if (a > 400) a = -80;  if (a <-80) a = 400;
        if (b > 400) b = -40;  if (b <-40) b = 400;

        window.requestAnimFrame(function() { draw(dx,dy) });
        }
        draw(1,0);
        };
</script>
</body>
</html>

Only the part where a button is pressed and 3 images appear in random places work. Everything else doesn't. Can someone explain me why?

Answer 1

First I've removed all those global x and y's and moved them to two new objects called player and ghost . I also removed all calls to the draw function since it will already be looping with requestAnimFrame .

The dessiner function was modified to be more generic and generate random points for any objects, you don't need to clear the canvas every time and using loops is useful to avoid duplicate code.

The query for the canvas element was moved inside the load function and a lot of minor improvements were made, ask me in the comments if you need any extra info!

 var ghost_img_url = "https://via.placeholder.com/32x32&text=ghost"; var sac_image_url = 'https://via.placeholder.com/64x64&text=sac'; var width = 400, height = 200; window.requestAnimFrame = (function() { return window.requestAnimationFrame || // La forme standardisée window.webkitRequestAnimationFrame || // Pour Chrome et Safari window.mozRequestAnimationFrame || // Pour Firefox window.oRequestAnimationFrame || // Pour Opera window.msRequestAnimationFrame || // Pour Internet Explorer function(callback) { // Pour les mauvais window.setTimeout(callback, 1000 / 60); }; })(); window.onload = function() { var canvas = document.getElementById("canvas"); var contexte = canvas.getContext("2d"); var T_fleche_gauche = 37; var T_fleche_droite = 39; var T_fleche_haut = 38; var T_fleche_bas = 40; var player = { img: new Image(), x: 50, y: 50, w: 64, h: 64, dx: 0, dy: 0 }; player.img.src = sac_image_url; document.onkeydown = function(e) { toucheCourante = e.keyCode; if (toucheCourante == T_fleche_gauche) { player.dx = -1; player.dy = 0; } if (toucheCourante == T_fleche_droite) { player.dx = 1; player.dy = 0; } if (toucheCourante == T_fleche_haut) { player.dy = -1; player.dx = 0; } if (toucheCourante == T_fleche_bas) { player.dy = 1; player.dx = 0; } } function dessiner(n, p) { var points = []; var new_point = function() { return { x: pw + (Math.random() * (width - (pw*2))), y: ph + (Math.random() * (height - (ph*2))) } }; for (var i = 0; i < n; i++) { points.push( new_point() ); } return points; }; var ghost = { img: new Image(), w: 32, h: 32, draw: function () { for (var p of ghost.list) { contexte.drawImage(ghost.img, px, py, ghost.w, ghost.h); } } }; ghost.img.src = ghost_img_url; ghost.list = dessiner(3, ghost); function draw() { contexte.clearRect(0, 0, width, height); contexte.drawImage(player.img, player.x, player.y, player.w, player.h); player.x += player.dx; player.y += player.dy; if (player.x > width) player.x = -player.w; if (player.x < -player.w) player.x = width; if (player.y > height) player.y = -player.h; if (player.y < -player.h) player.y = height; ghost.draw(); window.requestAnimFrame(draw); }; draw(); };

 <canvas id="canvas" style="border-color: 'black'; border-width: 3px; border-style: solid">No canvas support</canvas>

Js window.requestAnimFrame not functioning?

Question

1 answers

solution1
0 ACCPTED 2019-10-14 16:26:04

Js window.requestAnimFrame not functioning?

Question

1 answers

solution1 0 ACCPTED 2019-10-14 16:26:04

solution1
0 ACCPTED 2019-10-14 16:26:04