JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<canvas id="gameCanvas">
	
</canvas>

CSS

html, body {
	width:100%;
	height:100%;
}
canvas {
	width:100%;
	height:100%;
}

JavaScript

ameCanvas = document.getElementById("gameCanvas");
gameCanvasContext = gameCanvas.getContext("2d");

gameCanvas.width = window.innerWidth;
gameCanvas.height = window.innerHeight;

window.addEventListener("keydown", handleKeyAction);
window.addEventListener("keyup", handleKeyAction);

playerPosition = {xPosition: gameCanvas.width / 2, yPosition: gameCanvas.height / 2};

var keys = [];
var count = 0;
function handleKeyAction(event) {
  if(event.type === "keydown" && !keys.includes(event.keyCode)) {
    keys.push(event.keyCode);
  } 
	if(event.type === "keyup") {
    for(var index = 0; index < keys.length; index++) {
      if(keys[index] === event.keyCode) {
        keys.splice(index, 1);
        break;
      }
    }
  }
}

function movePlayer() {
  if(keys.includes(87)) {
    playerPosition.yPosition -= 5;
  } if(keys.includes(65)) {
    playerPosition.xPosition -= 5;
  } if(keys.includes(83)) {
    playerPosition.yPosition += 5;
  } if(keys.includes(68)) {
    playerPosition.xPosition += 5;
  }
}

function drawPlayer() {
  gameCanvasContext.beginPath();
  gameCanvasContext.fillStyle = "#000000";
  gameCanvasContext.arc(playerPosition.xPosition, playerPosition.yPosition, 15, 0, Math.PI * 2);
  gameCanvasContext.fill();
  gameCanvasContext.closePath();
}

function animate() {
  gameCanvasContext.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
  movePlayer();
  drawPlayer();
  requestAnimationFrame(animate);
}

animate();