JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <h2>==the canvas for the games==</h2>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var area = 60;
var paddlex = 200;
var paddley = 200;
var dx = 2;
var dy = 2;
var rightpressed = false;
var leftpressed = false;
var uppressed = false;
var downpressed = false;
// 38 = up
// 40 = down
// 39 = right
// 37 = left
  document.addEventListener("keydown", keyDownHandler, false);
  document.addEventListener("keyup", keyUpHandler, false);  
function drawthing() {
ctx.beginPath();
	ctx.rect(x, y, area, area);
  ctx.fillStyle = "#FF0000";
	ctx.fill();
	ctx.closePath();
  x += dx;
  y += dy;
  if (dx + x < 0 || dx + x > canvas.width - area) {
    dx = -dx;
  }
  if(y + dy > canvas.height - area || y + dy < 0) {
    dy = -dy;
  }  
}
function drawpaddle() {
if (rightPressed) {
    paddlex += 5;
} else if (leftPressed) {
    paddlex -= 5;
}
if (downpressed) {
	paddley -= 5;
} else if (uppressed) {
	paddley += 5;
}
	ctx.beginPath();
  ctx.rect(paddlex, paddley, 60, 10);
  ctx.fillStyle = "#FF0000";
  ctx.fill();
  ctx.closePath();
  
}
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawthing();
  drawpaddle();
  
}
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;
    }
}

function checkifkeyispressed() {
	
}
	setInterval(draw, 10);
 ...

CSS

canvas { background: #eee; }