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

15 iroger7

Abrir en el editor Publica tu código

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

Recomendado

20 August 2025

Plantilla HTML para blog de diseño moderno

10 December 2025

Juego de ping pong retro con JavaScript en HTML5 Canvas

25 November 2025

Código fuente HTML5 del juego Recoil Unblocked

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

Plantilla HTML para blog de diseño moderno

Juego de ping pong retro con JavaScript en HTML5 Canvas

Código fuente HTML5 del juego Recoil Unblocked

HTML

CSS

JS

Recomendado

Plantilla HTML para blog de diseño moderno

Juego de ping pong retro con JavaScript en HTML5 Canvas

Código fuente HTML5 del juego Recoil Unblocked

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS