JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="application/javascript">
var x = 150;
var y = 150;
var dx = 2;
var dy = 2;
var width;
var height;
var canvas;
var ctx;
var rightDown = false;
var leftDown = false;
var upDown = false;
var downDown = false;
var intervalId = 0;
function onKeyDown(evt) {
if (evt.keyCode == 40) { downDown = true;}
if (evt.keyCode == 39) { rightDown = true;}
if (evt.keyCode == 38) { upDown = true;}
if (evt.keyCode == 37) { leftDown = true;}
}
function onKeyUp(evt) {
if (evt.keyCode == 40) { downDown = false;}
if (evt.keyCode == 39) { rightDown = false;}
if (evt.keyCode == 38) { upDown = false;}
if (evt.KeyCode == 37) { leftDown = false;}
}
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
width = $("#canvas").width();
height = $("canvas").height();
intervalId = setInterval(draw, 10);
return intervalId;
}
function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0,0,width,height);
}
function draw() {
...