Jogo Círculo Perfeito: Desenhe e Marque Pontos em Tela HTML

Abrir no Editor Publique Seu Código

Recomendado

3 June 2025

Um Código por alejandrokundrah

21 September 2024

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

Jogo Círculo Perfeito: Desenhe e Marque Pontos em Tela HTML

Recomendado

Um Código por alejandrokundrah

Cursor pegajoso

Pokémon Emreend

HTML

CSS

JS

Recomendado

Um Código por alejandrokundrah

Cursor pegajoso

Pokémon Emreend

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS