Make a game where we will be customised our characters's game

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

No:48549

←

Prev Next

→

Make a game where we will be customised our charac..ALL
Developer User20774｜Date and time 24/3/2 12:48:27
Build time 4.673 sec｜Game capacity 1.346KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Character Customization Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

let character = {
            color: "blue",
            width: 50,
            height: 50,
            x: canvas.width / 2 - 25,
            y: canvas.height / 2 - 25
        };

drawCharacter();

canvas.addEventListener("click", customizeCharacter);

function drawCharacter() {
            ctx.fillStyle = character.color;
            ctx.fillRect(character.x, character.y, character.width, character.height);
        }

function customizeCharacter(event) {
            const rect = canvas.getBoundingClientRect();
            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;

if (mouseX >= character.x && mouseX <= character.x + character.width &&
                   mouseY >= character.y && mouseY <= character.y + character.height) {
                character.color = prompt("Choose a color for your character:");
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawCharacter();
            }
        }
    </script>
</body>
</html>