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

No:52304

123

←

Prev Next

→

A game in which you draw by pressing the buttons w..ALL
Developer Winnerweiner2113｜Date and time 24/3/20 7:27:40
Build time 7.617 sec｜Game capacity 1.779KB｜

Script

Draw & Paint Game

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw & Paint Game</title>
<style>
    body {
        text-align: center;
    }

canvas {
        border: 1px solid black;
    }

.color-button {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>Draw & Paint Game</h1>
<canvas id="canvas" width="300" height="300"></canvas>
<button class="color-button" style="background-color: black;" onclick="changeColor('black')"></button>
<button class="color-button" style="background-color: red;" onclick="changeColor('red')"></button>
<button class="color-button" style="background-color: blue;" onclick="changeColor('blue')"></button>
<button class="color-button" style="background-color: green;" onclick="changeColor('green')"></button>
<button class="color-button" style="background-color: yellow;" onclick="changeColor('yellow')"></button>

canvas.addEventListener('mousedown', () => {
        isDrawing = true;
    });

canvas.addEventListener('mouseup', () => {
        isDrawing = false;
    });

canvas.addEventListener('mousemove', (e) => {
        if (isDrawing) {
            const x = e.offsetX;
            const y = e.offsetY;
            ctx.fillStyle = currentColor;
            ctx.fillRect(x, y, 5, 5);
        }
    });

function changeColor(color) {
        currentColor = color;
    }
</script>
</body>
</html>
```