ABC Tracing Game - Dark Mode body { font-family: 'Fredoka One', cursive; touch-action: none; /* Prevents scrolling on touch devices while drawing */ } canvas { cursor: crosshair; touch-action: none; } .letter-button { transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, background-color 0.2s; } .letter-button:active { transform: scale(0.95); box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2); } ABC Tracing Fun! Trace the letter on the screen! ← A → Clear document.addEventListener('DOMContentLoaded', () => { const canvas = document.getElementById('tracingCanvas'); const ctx = canvas.getContext('2d'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const clearBtn = document.getElementById('clearBtn'); const letterDisplay = document.getElementById('currentLetterDisplay'); const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); let currentLetterIndex = 0; let drawing = false; // --- Canvas Setup --- function resizeCanvas() { const container = canvas.parentElement; // Ensure the container has a size before calculating canvas size const size = Math.min(container.clientWidth || 300, container.clientHeight || 300); canvas.width = size; canvas.height = size; drawLetter(); } // --- Drawing Logic --- function getMousePos(evt) { const rect = canvas.getBoundingClientRect(); if (evt.touches && evt.touches.length > 0) { return { x: evt.touches[0].clientX - rect.left, y: evt.touches[0].clientY - rect.top }; } return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } function startDrawing(e) { e.preventDefault(); // prevent scrolling drawing = true; const pos = getMousePos(e); ctx.beginPath(); ctx.moveTo(pos.x, pos.y); } function stopDrawing() { if (drawing) { drawing = false; ctx.closePath(); } } function draw(e) { if (!drawing) return; e.preventDefault(); const pos = getMousePos(e); ctx.lineWidth = canvas.width * 0.05; // Responsive brush size ctx.lineCap = 'round'; ctx.strokeStyle = '#22d3ee'; // Vibrant Cyan color for tracing ctx.lineTo(pos.x, pos.y); ctx.stroke(); ctx.beginPath(); // start a new path ctx.moveTo(pos.x, pos.y); } // --- Letter Drawing --- function drawLetter() { // Clear everything first ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw the guide letter in a faint, dashed style const letter = alphabet[currentLetterIndex]; const centerX = canvas.width / 2; const centerY = canvas.height / 2; ctx.font = `bold ${canvas.width * 0.8}px 'Fredoka One', cursive`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // Set dashing for the outline effect ctx.setLineDash([10, 15]); ctx.strokeStyle = 'rgba(100, 116, 139, 0.8)'; // A semi-transparent slate color ctx.lineWidth = 3; // We stroke the text to get a dashed outline ctx.strokeText(letter, centerX, centerY); // Reset line dash for user drawing ctx.setLineDash([]); // Update the big letter display letterDisplay.textContent = letter; } // --- Event Listeners --- canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('touchstart', startDrawing); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('touchend', stopDrawing); canvas.addEventListener('mouseleave', stopDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('touchmove', draw); clearBtn.addEventListener('click', drawLetter); nextBtn.addEventListener('click', () => { currentLetterIndex = (currentLetterIndex + 1) % alphabet.length; drawLetter(); }); prevBtn.addEventListener('click', () => { currentLetterIndex = (currentLetterIndex - 1 + alphabet.length) % alphabet.length; drawLetter(); }); window.addEventListener('resize', resizeCanvas); // Initial setup resizeCanvas(); });
