Perfect Circle Game: Draw & Score HTML Canvas

Open In Editor Video Publish Your Code

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

Perfect Circle Game: Draw & Score HTML Canvas

Recommended

HTML Drawing Tablet Code with Javascript

Roblox Login Page HTML CSS

Digital Solutions: Web, Mobile, Marketing & Design

HTML

CSS

JS

Recommended

HTML Drawing Tablet Code with Javascript

Roblox Login Page HTML CSS

Digital Solutions: Web, Mobile, Marketing & Design

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS