AI game creator

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

No:37239

←

Prev Next

→

Generative Art
Developer User17039｜Date and time 24/1/20 21:03:48
Build time 10.461 sec｜Game capacity 3.155KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Generative Art Game</title>
    <style>
        body {
            margin: 0;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

canvas {
            border: 2px solid #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Set canvas dimensions
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Initialize game state
        let particles = [];

// Define Pictograms
        const pictograms = [
            "🌟", "🌈", "🌺", "🌞", "🍉", "🐶", "🚀", "⚽️", "🔥", "❤️",
            "🌙", "🍓", "🐬", "🌊", "🍕", "🐱", "🏠", "🚗", "🎉", "🎮"
        ];

// Helper function to generate random integers
        const getRandomInt = (min, max) => {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        };

// Particle class
        class Particle {
            constructor(x, y, text) {
                this.x = x;
                this.y = y;
                this.text = text;
                this.color = `rgb(${getRandomInt(0, 255)}, ${getRandomInt(0, 255)}, ${getRandomInt(0, 255)})`;
                this.speedX = Math.random() * 4 - 2;
                this.speedY = Math.random() * 4 - 2;
            }

update() {
                this.x += this.speedX;
                this.y += this.speedY;

// Bounce off walls
                if (this.x < 0 || this.x > canvas.width) {
                    this.speedX *= -1;
                }
                if (this.y < 0 || this.y > canvas.height) {
                    this.speedY *= -1;
                }

this.draw();
            }

draw() {
                ctx.fillStyle = this.color;
                ctx.font = '24px Arial';
                ctx.fillText(this.text, this.x, this.y);
            }
        }

// Game loop
        function gameLoop() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

if (particles.length < 50) {
                // Generate new particle
                const x = getRandomInt(0, canvas.width);
                const y = getRandomInt(0, canvas.height);
                const text = pictograms[getRandomInt(0, pictograms.length - 1)];
                particles.push(new Particle(x, y, text));
            }

// Update and render particles
            particles.forEach((particle) => {
                particle.update();
            });

// Recursive call for next frame
            requestAnimationFrame(gameLoop);
        }

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