JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=500 height=350></canvas>

CSS

body{ background-color: black; }
#canvas{border:1px solid red; margin:0 auto; }

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// define a rect using a javascript object
var rect1={
  x:300,
  y:150,
  width:8,
  velX:3,
  velY:3
};

// define another rect using a javascript object
var rect2={
  x:450,
  y:300,
  width:8,
  velX: 3,
  velY:-3
};

var zombie={
  x: 100,
  y: 100,
  width: 10,
  velX: 3,
  velY: 3
};

var rects=[rect1,rect2];
randomnumber0 = Math.floor(Math.random() * 2);
randomnumber1 = Math.floor(Math.random() * 2);
randomnumber2 = Math.floor(Math.random() * 2);
randomnumber3 = Math.floor(Math.random() * 2);
if (randomnumber0 === 0){
  randomnumber1 = 1;
}
if (randomnumber2 === 0){
  randomnumber3 = 1;
}
requestAnimationFrame(animate);
function animate(time){

  for(var i=0;i<rects.length;i++){

    rects[0].x+=rects[0].velX * randomnumber0;
    rects[0].y+=rects[0].velY * randomnumber1;

    rects[1].x+=rects[1].velX * randomnumber2;
    rects[1].y+=rects[1].velY * randomnumber3;

    if ((zombie.x >= canvas.width) || (zombie.x <= 0)){
      zombie.velX = -zombie.velX;
    }
    if ((zombie.y >= canvas.height) || (zombie.y <= 0)){
      zombie.velY = -zombie.velY;
    }
    if (Math.sign(rect1.x-zombie.x)!==Math.sign(zombie.velX)){
      zombie.velX *= -1;
    }
    if (Math.sign(rect1.y-zombie.y)!==Math.sign(zombie.velY)){
      zombie.velY *= -1;
    }
    if (zombie.x == rect1.x){
      zombie.velX *= 0;
    }
    if (zombie.y == rect1.y){
      zombie.velY *= 0;
    }

    zombie.x+= zombie.velX;
    zombie.y+= zombie.velY;

    if ((rects[i].y >= canvas.height) || (rects[i].y <= 0)){
      rects[i].velY = -rects[i].velY;
    }

    if ((rects[i].x >= canvas.width) || (rects[i].x <= 0)){
      rects[i].velX = -rects[i].velX;
    }


  }

  // draw all the rects in their new positions
  draw();

  // request another frame in the animation loop
  requestAnimationFrame(animate);
}

function draw(){


  ctx.clearRect(0,0,cw,ch);
  ctx.fillStyle =...