AI game creator

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

No:10428

←

Prev Next

→

Etch a sketch
Developer Micah｜Date and time 23/7/31 11:14:08
Build time 11.824 sec｜Game capacity 1.798KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Etch-A-Sketch Game</title>
    <style>
        #canvas {
            width: 400px;
            height: 400px;
            border: 2px solid black;
        }
        .button {
            width: 80px;
            padding: 10px;
            margin: 10px;
            text-align: center;
            background-color: #eee;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <div>
        <button class="button" onclick="clearCanvas()">Clear</button>
        <button class="button" onclick="changeColor()">Change Color</button>
    </div>

function draw(event) {
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

context.lineTo(x, y);
            context.strokeStyle = color;
            context.stroke();
        }

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

function changeColor() {
            var colors = ["black", "red", "blue", "green", "yellow", "orange"];
            var randomIndex = Math.floor(Math.random() * colors.length);
            color = colors[randomIndex];
        }

canvas.addEventListener("mousedown", function(event) {
            context.beginPath();
            draw(event);
            canvas.addEventListener("mousemove", draw);
        });

canvas.addEventListener("mouseup", function() {
            canvas.removeEventListener("mousemove", draw);
        });
    </script>
</body>
</html>