A circle game of a clown fight his way out's game

Click here for free DL of the app version that can save data.

No:47522

←

Prev Next

→

A circle game of a clown fight his way out
Developer User20497｜Date and time 24/2/28 7:36:21
Build time 5.658 sec｜Game capacity 1.473KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Clown Fight Game</title>
    <style>
        #gameCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

let clownX = 200;
        let clownY = 200;

function drawClown() {
            ctx.beginPath();
            ctx.arc(clownX, clownY, 20, 0, Math.PI * 2, true);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.closePath();
        }

function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function updateGame() {
            clearCanvas();
            drawClown();
        }

function moveClown(event) {
            const key = event.key;
            switch (key) {
                case "ArrowUp":
                    clownY -= 10;
                    break;
                case "ArrowDown":
                    clownY += 10;
                    break;
                case "ArrowLeft":
                    clownX -= 10;
                    break;
                case "ArrowRight":
                    clownX += 10;
                    break;
            }
            updateGame();
        }

updateGame();

document.addEventListener("keydown", moveClown);
    </script>
</body>
</html>