game.js

import { Alpine } from "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js";
import { DaisyUI } from "https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css";

Alpine.start();

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

ctx.fillStyle = "#000000";
ctx.fillRect(0,0,canvas.width,canvas.height);

ctx.fillStyle = "#FF0000";
ctx.fillRect(10,10,10,10);

 // create the event and add the movement function to it
window.addEventListener("keydown", moveRight);
window.addEventListener("keydown", moveLeft);
window.addEventListener("keydown", moveUp);
window.addEventListener("keydown", moveDown);

const moveUp = () => {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(10,10,10,Math.PI*2,Math.PI*2);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
};
const moveDown = () => {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(10,200,10,Math.PI*2,Math.PI*2);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
};
const moveLeft = () => {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(10,10,10,Math.PI*2,Math.PI*2);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
};
const moveRight = () => {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(200,10,10,Math.PI*2,Math.PI*2);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
};