AI game creator

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

No:28196

117

←

Prev Next

→

Generative Art
Developer User14017｜Date and time 23/12/11 5:40:57
Build time 25.946 sec｜Game capacity 3.552KB｜

Script

Sure! Here's an example of a generative art game implemented as a single HTML file using JavaScript. This game allows you to create unique patterns by interacting with your smartphone's touchscreen.

This game allows you to draw on the canvas using your finger on a smartphone's touchscreen. You can change colors or patterns by lifting your finger and touching again. Enjoy creating your own generative art!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a generative art game implemented as a single HTML file using JavaScript. This game allows you to create unique patterns by interacting with your smartphone's touchscreen.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Generative Art Game</title>
    <style>
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

let isDrawing = false;

// Start the game
        function startGame() {
            // Event listener for touchstart
            canvas.addEventListener('touchstart', handleStart, false);
            // Event listener for touchmove
            canvas.addEventListener('touchmove', handleMove, false);
            // Event listener for touchend
            canvas.addEventListener('touchend', handleEnd, false);

// Initial setup
            ctx.strokeStyle = getRandomColor();
            ctx.lineWidth = 5;
            ctx.lineJoin = 'round';

// Render loop
            function render() {
                if (isDrawing) {
                    ctx.beginPath();
                    ctx.moveTo(prevX, prevY);
                    ctx.lineTo(currentX, currentY);
                    ctx.closePath();
                    ctx.stroke();
                }

requestAnimationFrame(render);
            }

render();
        }

// Handle touchstart event
        function handleStart(event) {
            isDrawing = true;
            const touches = event.changedTouches;
            startDrawing(touches[0].clientX, touches[0].clientY);
        }

// Handle touchmove event
        function handleMove(event) {
            event.preventDefault();
            const touches = event.changedTouches;
            continueDrawing(touches[0].clientX, touches[0].clientY);
        }

// Handle touchend event
        function handleEnd(event) {
            isDrawing = false;
            endDrawing();
        }

// Function to start drawing
        function startDrawing(x, y) {
            prevX = x;
            prevY = y;
            currentX = x;
            currentY = y;
        }

// Function to continue drawing
        function continueDrawing(x, y) {
            prevX = currentX;
            prevY = currentY;
            currentX = x;
            currentY = y;
        }

// Function to end drawing
        function endDrawing() {
            // You can add more logic here, like changing colors or patterns
            ctx.strokeStyle = getRandomColor();
        }

// Helper function to generate random colors
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

// Start the game
        startGame();
    </script>
</body>
</html>
```