<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logica III</title>
</head>
<body>
<canvas
style="border-radius: 8px"
id="drawArea"
width="600"
height="400"
></canvas>
<script>
//Set painting and brushToll
var painting = document.querySelector("#drawArea");
var brushTool = painting.getContext("2d");
//Axies and Radius Variables
var x = 20;
var y = 20;
var r = 10;
//Set Direction Axies X = (Right or Left) and Y = (Up or Down)
var directionX = 1;
var directionY = 1;
var rateMove = 10;
//Keycode direction
var left = 37;
var up = 38;
var right = 39;
var down = 40;
brushTool.fillStyle = "lightgrey";
brushTool.fillRect(0, 0, 600, 400);
function drawCircle(xAxies, yAxies, radius) {
brushTool.fillStyle = "blue";
brushTool.beginPath();
brushTool.arc(xAxies, yAxies, radius, 0, Math.PI * 2);
brushTool.fill();
}
function paintingClear() {
brushTool.clearRect(0, 0, 600, 400);
}
function updatePainting() {
paintingClear();
drawCircle(x, y, r);
}
setInterval(updatePainting, 5);
function readingKeyboard() {
//how to know which key was pressed?
if (event.keyCode == up) {
if (y - rateMove > 20) {
y = y - rateMove;
}
} else if (event.keyCode == down) {
if (y + rateMove < 380) {
y = y + rateMove;
}
} else if (event.keyCode == left) {
if (x - rateMove > 20) {
x = x - rateMove;
}
} else if (event.keyCode == right) {
if (x + rateMove < 580) {
x = x + rateMove;
}
}
}
document.onkeydown = readingKeyboard;
</script>
</body>
</html>
