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

528 iroger7

Abrir en el editor Publica tu código

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

Recomendado

11 March 2026

Código para insertar en el juego 10 Minutes Till Dawn

17 July 2025

Código de barras de navegación HTML SVG

4 July 2025

Página de inicio de sesión de Voice Lab: Formulario de inicio de sesión de Google y correo electrónico

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>
```

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

Recomendado

Código para insertar en el juego 10 Minutes Till Dawn

Código de barras de navegación HTML SVG

Página de inicio de sesión de Voice Lab: Formulario de inicio de sesión de Google y correo electrónico

HTML

CSS

JS

Recomendado

Código para insertar en el juego 10 Minutes Till Dawn

Código de barras de navegación HTML SVG

Página de inicio de sesión de Voice Lab: Formulario de inicio de sesión de Google y correo electrónico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS