JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<p>
Beat 50 to deserve a prize(but not get one)
</p>
<canvas id = "canvas" width = "300" height = "250" style = "border:5px solid black;background-image:radial-gradient(blue, white 60%)"></canvas>

JavaScript

(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");
var width = 300,
height = 250,
score = 0,
grad = 90;
h=1,

   player = {
        x: width / 2,
        y: height - 100,
        width: 10,
        height: 10,
        speed: 5,
        
        
    },
    enemy = {
    x:player.x,
    y:0,
    speed:3
    },
    enemyh = {
    x:0,
    y:player.y,
    speed:3
    },
    enemyGiant = {
    x:300,
    y:player.y,
    speed:2
    },
     keys = [];
     canvas.width = width;
canvas.height = height;
     function update(){
     ctx.clearRect(0, 0, width, height)
     if(keys[39]){
     player.x+=2;
     if(player.x > 290){
     player.x-=2;
     }
     }
      if(keys[40]){
     player.y+=2;
     if(player.y>290){
     player.y-=2;
     }
     }
      if(keys[38]){
     player.y-=2;
     if(player.y<0){
     player.y+=2;
     }
     }
      if(keys[37]){
     player.x-=2;
     if(player.x<0){
     player.x+=2;
     }
     }
     enemy.y+=Math.floor(Math.random()*enemy.speed+Math.random()*3);
     if(enemy.y>290){
     enemy.y=0;
     score++;
     enemy.x = player.x;
     }
      enemyh.x+=Math.floor(Math.random()*enemyh.speed+1);
     if(enemyh.x>290){
     enemyh.x=0;
     score++;
     enemyh.y = player.y;
     }
     
     
ctx.fill();
    ctx.fillStyle = "red";
    ctx.fillRect(player.x, player.y, player.width, player.height);
    ctx.fillStyle = "white";
    ctx.fillRect(enemy.x, enemy.y, 10, 10);
    ctx.fillRect(enemyh.x, enemyh.y, 10, 10);
    ctx.fillRect(enemyGiant.x, enemyGiant.y, 50, 50);
    ctx.fillStyle = "blue"
    ctx.font = "32px Arial";
    ctx.fillText("Score:"+score, 150, 30);
        
     
    

    
     
     if (player.x < enemy.x+10 &&
    player.x+player.width >...