AI game creator

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

No:37034

←

Prev Next

→

Generative Art
Developer User16964｜Date and time 24/1/19 23:58:28
Build time 10.552 sec｜Game capacity 2.965KB｜

Script

Sure! Here's an example of a generative art game written in a single HTML file, using JavaScript and enclosed in script tags. This game allows you to create unique abstract artworks by simply tapping or swiping on your smartphone screen.

By running this HTML file in a browser on your smartphone, you will see a canvas where you can tap or swipe to draw colorful lines. Each stroke will have a randomized color, creating unique generative art as you interact with the screen. Enjoy exploring the possibilities of this simple generative art game!

←

Prev　Next

→ 　

Back　

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

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

```
<!DOCTYPE html>
<html>
<head>
    <title>Generative Art Game</title>
    <style>
        canvas {
            border: 1px solid black;
            touch-action: none;
        }
    </style>
</head>
<body onload="startGame()">
    <canvas id="myCanvas"></canvas>

function startGame() {
            canvas = document.getElementById("myCanvas");
            context = canvas.getContext("2d");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

canvas.addEventListener("mousedown", startDrawing);
            canvas.addEventListener("mousemove", draw);
            canvas.addEventListener("mouseup", stopDrawing);
            canvas.addEventListener("touchstart", startDrawing);
            canvas.addEventListener("touchmove", draw);
            canvas.addEventListener("touchend", stopDrawing);
        }

function draw(event) {
            if (!isDrawing) return;

var currentX, currentY;
            if (event.changedTouches) {
                currentX = event.changedTouches[0].clientX;
                currentY = event.changedTouches[0].clientY;
            } else {
                currentX = event.clientX;
                currentY = event.clientY;
            }

context.beginPath();
            context.moveTo(lastX, lastY);
            context.lineTo(currentX, currentY);
            context.lineWidth = 5;
            context.strokeStyle = getRandomColor();
            context.stroke();

lastX = currentX;
            lastY = currentY;
        }

function stopDrawing() {
            isDrawing = false;
        }

function getRandomColor() {
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>
</body>
</html>
```