Juego del círculo perfecto: dibuja y puntúa en HTML Canvas

885 iroger7

Abrir en el editor Publica tu código

Juego del círculo perfecto: dibuja y puntúa en HTML Canvas

Recomendado

24 July 2025

Fragmento de animación de carga de CSS

24 August 2025

Ejemplo de formulario de registro HTML simple

28 August 2025

Formulario de registro de inicio de sesión de Matrix HTML CSS

HTML

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perfect Circle Game</title>
    
    <style>
        body {
            background: #181818;
            color: #f4f4f4;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        canvas {
            background: #232323;
            border-radius: 8px;
            margin: 20px 0;
            display: block;
        }
        .instructions {
            max-width: 400px;
            margin-bottom: 10px;
            font-size: 1.1em;
            text-align: center;
        }
        .score {
            font-size: 1.2em;
            margin-bottom: 10px;
        }
        button {
            background: #fff;
            color: #232323;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 1em;
            margin-top: 12px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="game-container" aria-label="Perfect Circle Game">
        
        <h1>Perfect Circle Game</h1>
        
        <div class="instructions" id="instructions">
            <p>
                Try to draw a perfect circle around the white dot.<br>
                <strong>Press and hold the spacebar</strong> to start drawing,<br>
                and release it to finish. Your accuracy will be scored!
            </p>
        </div>
        
        <canvas id="circleCanvas" width="400" height="400" aria-label="Game drawing area"></canvas>
        
        <div class="score" id="score"></div>
        
        <button id="restartBtn" style="display:none;">Try Again</button>
    </div>

// Game constants
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const dotRadius = 8; // White dot radius
        const drawRadius = 120; // Approximate radius for user's circle
        const pointsRequired = 90; // Number of points for a full circle

// Game state
        let drawing = false;
        let points = [];
        let animationId = null;

// Draw the initial state: white dot in the center
        function drawInitial() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw central white dot
            ctx.beginPath();
            ctx.arc(centerX, centerY, dotRadius, 0, 2 * Math.PI);
            ctx.fillStyle = '#fff';
            ctx.shadowColor = '#fff';
            ctx.shadowBlur = 10;
            ctx.fill();
            ctx.shadowBlur = 0;
        }

// Draw the user's path
        function drawPath(points) {
            if (points.length < 2) return;
            ctx.save();
            ctx.strokeStyle = '#4caf50';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            for (let p of points) {
                ctx.lineTo(p.x, p.y);
            }
            ctx.stroke();
            ctx.restore();
        }

// Handle drawing while spacebar is held
        function startDrawing() {
            if (drawing) return; // Prevent multiple triggers
            drawing = true;
            points = [];
            scoreDiv.textContent = '';
            restartBtn.style.display = 'none';
            drawInitial();
            requestAnimationFrame(drawLoop);
        }

function endDrawing() {
            if (!drawing) return;
            drawing = false;
            cancelAnimationFrame(animationId);
            drawInitial();
            drawPath(points);
            evaluateCircle(points);
        }

// Main draw loop: collect mouse position as the user "draws"
        function drawLoop() {
            animationId = requestAnimationFrame(drawLoop);
            // Get current mouse position
            if (drawing && mousePos) {
                points.push({ x: mousePos.x, y: mousePos.y });
                drawInitial();
                drawPath(points);
            }
        }

// Helper to get mouse position relative to canvas
        let mousePos = null;
        canvas.addEventListener('mousemove', function (e) {
            const rect = canvas.getBoundingClientRect();
            mousePos = {
                x: e.clientX - rect.left,
                y: e.clientY - rect.top
            };
        });

// Keyboard controls: Spacebar to draw
        document.addEventListener('keydown', function (e) {
            if (e.code === 'Space' && !drawing) {
                startDrawing();
            }
        });
        document.addEventListener('keyup', function (e) {
            if (e.code === 'Space' && drawing) {
                endDrawing();
            }
        });

// Accessibility: allow click to draw for users who can't use keyboard
        canvas.addEventListener('mousedown', function () {
            startDrawing();
        });
        canvas.addEventListener('mouseup', function () {
            endDrawing();
        });

// Evaluate how close the path is to a perfect circle
        function evaluateCircle(points) {
            // Need enough points to evaluate
            if (points.length < pointsRequired * 0.7) {
                scoreDiv.textContent = 'Circle is too small. Try again!';
                restartBtn.style.display = 'inline-block';
                return;
            }

// Calculate center and average radius
            let sumX = 0, sumY = 0;
            for (let p of points) {
                sumX += p.x;
                sumY += p.y;
            }
            const meanX = sumX / points.length;
            const meanY = sumY / points.length;

// Calculate average distance from center (radius) and variance
            let radii = [];
            for (let p of points) {
                let dist = Math.hypot(p.x - meanX, p.y - meanY);
                radii.push(dist);
            }
            const avgRadius = radii.reduce((a, b) => a + b, 0) / radii.length;
            const variance = radii.reduce((acc, r) => acc + Math.pow(r - avgRadius, 2), 0) / radii.length;
            const stdDev = Math.sqrt(variance);

// Lower stdDev = better circle
            // Score: 100% if stdDev < 4, 90% if < 8, 80% if < 12, else fail
            let score = 0;
            if (stdDev < 4) score = 100;
            else if (stdDev < 8) score = 90;
            else if (stdDev < 12) score = 80;

if (score > 0) {
                scoreDiv.textContent = `Nice! Your circle is ${score}% perfect.`;
            } else {
                scoreDiv.textContent = `Oops! Not quite a circle. Try again!`;
            }
            restartBtn.style.display = 'inline-block';
        }

// Restart the game
        restartBtn.addEventListener('click', function () {
            drawInitial();
            scoreDiv.textContent = '';
            restartBtn.style.display = 'none';
            points = [];
        });

// Initial draw
        drawInitial();

// Accessibility: Focus canvas for keyboard events
        canvas.tabIndex = 0;
        canvas.focus();
    </script>
</body>
</html>
```

CSS