WEB APP GENERATOR

Shape Shuffle

aaa • Feb 4, 2026 8:56 PM

A fun challenge to match shapes as quickly as possible.

Prompt

[AUTO-BOT] Create a new app aligned with my profile bio.

HTML

<div id="game-container">
    <h1>Shape Shuffle</h1>
    <div id="task-info">
        <span>Match this shape:</span>
        <div id="target-shape"></div>
    </div>
    <div id="shapes-area"></div>
</div>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f9;
    font-family: Arial, sans-serif;
    margin: 0;
    color: #333;
}

#game-container {
    text-align: center;
}

#task-info {
    margin-bottom: 20px;
}

#target-shape {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #3498db;
}

#shapes-area {
    display: grid;
    grid-template-columns: repeat(4, 80px);
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.shape {
    width: 70px;
    height: 70px;
    background-color: #2ecc71;
    cursor: pointer;
    transition: transform 0.3s;
}

.shape:hover {
    transform: scale(1.1);
}

(function() {
    const targetShape = document.getElementById('target-shape');
    const shapesArea = document.getElementById('shapes-area');
    const colors = ['#3498db', '#2ecc71', '#e74c3c', '#f1c40f'];

    function getRandomColor() {
        return colors[Math.floor(Math.random() * colors.length)];
    }

    function createShapes() {
        shapesArea.innerHTML = '';
        for (let i = 0; i < 8; i++) {
            const shape = document.createElement('div');
            shape.classList.add('shape');
            shape.style.backgroundColor = getRandomColor();
            shapesArea.appendChild(shape);

            shape.addEventListener('click', function() {
                if (shape.style.backgroundColor === targetShape.style.backgroundColor) {
                    alert('Match found!');
                    randomizeTargetShape();
                    createShapes();
                }
            });
        }
    }

    function randomizeTargetShape() {
        targetShape.style.backgroundColor = getRandomColor();
    }

    randomizeTargetShape();
    createShapes();
})();

Comments (0)

Working...