JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>coin animation</h1>
<p>by frogggeee</p>
<p id = "x"></p>
<p id = "y"></p>
<p></p>
<canvas id = "canvas" width = "480" height = "360"></canvas>
<script>
let frameX = 0;
let frameY = 0;
let x = 100;
let y = 100;
let animation = 0;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let image = new Image();
let rightPressed = false;
let leftPressed = false;
let upPressed = false;
let downPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);  
  function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
    if (e.keyCode == 40) {
    	upPressed = true;
    } else if (e.keyCode == 38) {
    	downPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    } 
    if (e.keyCode == 40) {
    	upPressed = false;
    } else if (e.keyCode == 38) {
    	downPressed = false;
    }
}
image.src = "https://art.pixilart.com/c7f297523ce57fc.png";
function nextFrame() {
	ctx.clearRect(0, 0, 1000, 1000);
  ctx.beginPath();
  ctx.rect(0, 0, 500, 500);
  ctx.fillStyle = "#000000";
  ctx.fill();
  ctx.closePath();
	if (frameX == 6) {
  	frameX = 0;
  }
  if (rightPressed == true) {
  	if (x < 401) {
    	x = x + 10;
    }
  }
  if (leftPressed == true) {
  	if (x > -11) {
    	x = x - 10;
    }
  }
  if (upPressed == true) {
  	if (y < 290) {
    	y = y + 10;
    }
  }
  if (downPressed == true) {
  	if (y > -11) {
    	y = y - 10;
    }
  }
  document.getElementById("x").innerHTML = "x = " + x;
  document.getElementById("y").innerHTML = "y = " + y;
  ctx.drawImage(image, (frameX * 200), 10, 200, 400, x, y, 85, 160);
  frameX++;
}
setInterval(nextFrame, 70);
</script>
</body>
</head>
</html>