https://vijay.eu/tags/javascript/Recent content in Javascript on Vijay KodamHugo -- gohugo.ioenWed, 10 Jun 2026 12:00:00 +0300https://vijay.eu/projects/retro-racer/Wed, 10 Jun 2026 12:00:00 +0300https://vijay.eu/projects/retro-racer/<div class="retro-racer"> <h1 class="racer-title">Retro Racer</h1> <p class="racer-subtitle">A 3D arcade racer. One lap, against the clock.</p> <div class="racer-frame"> <canvas id="racerCanvas"></canvas> <div class="racer-banner hidden" id="racerBanner" aria-live="polite"></div> <div class="racer-hud" aria-live="off"> <div class="hud-item"> <span class="hud-label">Time</span> <span class="hud-value" id="hudTime">0:00.0</span> </div> <div class="hud-item hud-item--speed"> <span class="hud-label">Speed</span> <span class="hud-value" id="hudSpeed">0 km/h</span> </div> <div class="hud-item"> <span class="hud-label">Progress</span> <span class="hud-value" id="hudProgress">0%</span> </div> </div> <div class="racer-overlay" id="racerStart"> <h2>Retro Racer</h2> <p>Complete one lap as fast as you can. Dodge traffic and stay on the road - grass and crashes will slow you down.</p> <p>Arrow keys or WASD to drive. On touch devices, hold gas/brake with your left thumb and steer with your right.</p> <button class="racer-btn" id="racerStartBtn" type="button" disabled>Start Race</button> <p class="racer-loading" id="racerLoading">Loading 3D assets...</p> <p class="racer-best" id="racerStartBest"></p> </div> <div class="racer-overlay hidden" id="racerResults"> <h2>Finish!</h2> <p class="racer-result-time" id="racerResultTime"></p> <p class="racer-best" id="racerResultBest"></p> <button class="racer-btn" id="racerAgainBtn" type="button">Race Again</button> </div> <div class="racer-cinematic hidden" id="racerCinematic" aria-hidden="true"> <div class="racer-letterbox racer-letterbox--top"></div> <div class="racer-letterbox racer-letterbox--bottom"></div> <div class="racer-flyby-label"> <span class="racer-flyby-name">Mazda Miata</span> <span class="racer-flyby-sub">MX-5 NA</span> </div> <button class="racer-skip-btn" id="racerSkipBtn" type="button">Skip &rsaquo;&rsaquo;</button> </div> </div> <div class="racer-touch"> <div class="touch-cluster touch-cluster--drive" aria-label="Speed controls (left thumb)"> <button class="touch-btn touch-btn--gas" id="racerBtnGas" type="button" aria-label="Accelerate">GAS</button> <button class="touch-btn touch-btn--brake" id="racerBtnBrake" type="button" aria-label="Brake">BRAKE</button> </div> <div class="touch-cluster touch-cluster--steer" aria-label="Steering controls (right thumb)"> <button class="touch-btn touch-btn--arrow" id="racerBtnLeft" type="button" aria-label="Steer left">&larr;</button> <button class="touch-btn touch-btn--arrow" id="racerBtnRight" type="button" aria-label="Steer right">&rarr;</button> </div> </div> <p class="racer-note">Built with vanilla JavaScript and <a href="https://threejs.org/" rel="noopener">three.js</a>. Car models "<a href="https://sketchfab.com/3d-models/mazda-miata-mx-5-na-d51fcd44b74f4daf8012c41e0400c041" rel="noopener">Mazda Miata MX-5 NA</a>" and "<a href="https://sketchfab.com/3d-models/toyota-ae86-trueno-fe02fba6302e450ea8424591493341ea" rel="noopener">Toyota AE86 Trueno</a>" by Lexyc16 on Sketchfab (CC-BY 4.0). Textures and lighting from <a href="https://polyhaven.com/" rel="noopener">Poly Haven</a> (CC0). Your best lap time is stored locally in your browser.</p> </div>https://vijay.eu/projects/tesla-wrap/Sat, 09 May 2026 00:00:00 +0300https://vijay.eu/projects/tesla-wrap/<p>Design custom Tesla wraps in the browser, download the PNG for Paint Shop, and preview supported models in 3D.</p> <p><a href="https://vijay.eu/tesla-wrap/" class="button">Open Tesla Wrap Maker</a></p> <p><img src="https://vijay.eu/images/tesla_wrap_screenshot.png" alt="Tesla Wrap Maker screenshot"></p>https://vijay.eu/projects/note-quest/Thu, 26 Feb 2026 00:00:00 +0200https://vijay.eu/projects/note-quest/<p>Learn to read music notes on the grand staff! Pick the correct note name for each question.</p> <p>Created using Claude Code CLI on 26th Feb 2026. V2 released on 8th Mar 2026. <link rel="stylesheet" href="https://vijay.eu/css/note-quest.css"> <script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script> <div class="note-quest-wrapper"> <div class="nq-screen start-screen active" id="nqStartScreen"> <label class="nq-helper-toggle"> <input type="checkbox" id="nqShowNoteNames"> Show note names on staff <small class="nq-helper-hint">Auto for Levels 1–2, 4 · Ignored for 8–10</small> </label> <div class="level-grid"> <div class="level-row"> <span class="row-label easy">Easy</span> <div class="level-boxes"> <button class="level-box easy" data-level="1"> <span class="level-num">1</span> <span class="level-detail">First Notes · Both clefs · F3,C4 / C4,G4</span> </button> <button class="level-box easy" data-level="2"> <span class="level-num">2</span> <span class="level-detail">Staff Basics · Both clefs · F3–G4</span> </button> <button class="level-box easy" data-level="3"> <span class="level-num">3</span> <span class="level-detail">Getting Comfortable · Both clefs · C3–C5</span> </button> </div> </div> <div class="level-row"> <span class="row-label medium">Medium</span> <div class="level-boxes"> <button class="level-box medium" data-level="4"> <span class="level-num">4</span> <span class="level-detail">Wider Range · Both clefs · A2–E5</span> </button> <button class="level-box medium" data-level="5"> <span class="level-num">5</span> <span class="level-detail">Grand Staff · Both clefs · C2–C6</span> </button> <button class="level-box medium" data-level="6"> <span class="level-num">6</span> <span class="level-detail">Expanding Range · Both clefs · A1–E6</span> </button> <button class="level-box medium" data-level="7"> <span class="level-num">7</span> <span class="level-detail">Full Staff · Both clefs · E2–C6</span> </button> </div> </div> <div class="level-row"> <span class="row-label hard">Hard</span> <div class="level-boxes"> <button class="level-box hard" data-level="8"> <span class="level-num">8</span> <span class="level-detail">Ledger Lines · Both clefs · C2–E6</span> </button> <button class="level-box hard" data-level="9"> <span class="level-num">9</span> <span class="level-detail">Extended Range · Both clefs · B1–E6</span> </button> <button class="level-box hard" data-level="10"> <span class="level-num">10</span> <span class="level-detail">Note Master · Both clefs · A1–E6</span> </button> </div> </div> </div> <div class="nq-version">v2.1</div> </div> <div class="nq-screen" id="nqGameScreen"> <div class="nq-header"> <div class="nq-logo">Note Quest</div> <div class="nq-progress" id="nqProgress">1 / 10</div> </div> <div class="nq-container"> <div class="staff-card" id="nqStaffCard"></div> <div class="choices" id="nqChoices"> <button class="choice-btn" data-note="C">C</button> <button class="choice-btn" data-note="D">D</button> <button class="choice-btn" data-note="E">E</button> <button class="choice-btn" data-note="F">F</button> <button class="choice-btn" data-note="G">G</button> <button class="choice-btn" data-note="A">A</button> <button class="choice-btn" data-note="B">B</button> </div> <div class="stats-bar"> <span>Streak: <strong id="nqStreakDisplay">0</strong></span> <span>Score: <strong id="nqScoreDisplay">0</strong></span> <span id="nqTimerDisplay">0:00</span> </div> </div> </div> <div class="nq-screen results-screen" id="nqResultsScreen"> <h2>Round Complete!</h2> <div class="stars" id="nqStarsDisplay"></div> <div class="results-stats" id="nqResultsStats"></div> <button class="play-again-btn">Play Again</button> </div> <canvas id="nqConfetti"></canvas> </div> <script src="https://vijay.eu/js/note-quest.js"></script> </p>https://vijay.eu/projects/tic-tac-toe/Wed, 02 Jul 2025 15:20:07 +0300https://vijay.eu/projects/tic-tac-toe/<p>Created it using Google Gemini CLI on 2nd Jul 2025 <link rel="stylesheet" href="https://vijay.eu/css/tic-tac-toe.css"> <div class="tic-tac-toe-container"> <div id="game-setup"> <div class="setup-section"> <p class="setup-title">Game Mode</p> <div class="button-group" id="game-mode-selector"> <button class="btn-toggle active" data-mode="pvc">Player vs. Computer</button> <button class="btn-toggle" data-mode="pvp">Player vs. Player</button> </div> </div> <div class="setup-section" id="first-move-container"> <p class="setup-title">Who Goes First?</p> <div class="button-group" id="first-move-selector"> <button class="btn-toggle active" data-first-move="player">Player (X)</button> <button class="btn-toggle" data-first-move="computer">Computer (O)</button> </div> </div> <button id="start-game">Start Game</button> </div> <div id="game-board" class="hidden"> <div class="cell" data-index="0"></div> <div class="cell" data-index="1"></div> <div class="cell" data-index="2"></div> <div class="cell" data-index="3"></div> <div class="cell" data-index="4"></div> <div class="cell" data-index="5"></div> <div class="cell" data-index="6"></div> <div class="cell" data-index="7"></div> <div class="cell" data-index="8"></div> </div> <div id="message" class="hidden"></div> <button id="restart-game" class="hidden">Restart Game</button> </div> <script src="https://vijay.eu/js/tic-tac-toe.js"></script> </p>https://vijay.eu/projects/decibel-meter/Wed, 12 Mar 2025 23:28:14 +0200https://vijay.eu/projects/decibel-meter/<p>Built using Anthropic Claude Code CLI.</p> <div class="decibel-meter-wrapper"> <div class="speedometer-container"> <div class="needle-container"> <div class="needle" id="needle"></div> <div class="needle-center"></div> </div> </div> <div class="reading" id="reading">0 dB</div> <div class="description" id="description">Please enable microphone</div> <button id="startButton">Start Measuring</button> <div class="sensitivity-control"> <label for="sensitivity">Microphone Sensitivity: <span id="sensitivityValue"></span></label> <input type="range" id="sensitivity" min="1" max="5" step="0.5" value="2.0"> </div> <div class="error" id="errorMessage"></div> <div class="child-voice-legend"> <div class="child-voice-title">Voice Level Guide for Kids</div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #4CAF50;"></div> <span class="voice-level-text">Whisper to Library Voice (0-40 dB)</span> </div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #7CB342;"></div> <span class="voice-level-text">Indoor Voice (40-60 dB)</span> </div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #FFC107;"></div> <span class="voice-level-text">Classroom Voice (60-70 dB)</span> </div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #FF9800;"></div> <span class="voice-level-text">Playground Voice (70-80 dB)</span> </div> <div class="voice-level-item"> <div class="voice-level-color" style="background: #FF5722;"></div> <span class="voice-level-text">Too Loud! (80+ dB)</span> </div> </div> </div> <script src="https://vijay.eu/js/decibel-meter.js"></script> <link rel="stylesheet" href="https://vijay.eu/css/decibel-meter.css"> <ul> <li>No data is stored or transmitted - all processing happens locally in your browser.</li> <li>dB values are approximate. Calibration has not been done.</li> </ul>https://vijay.eu/projects/snake-game/Sun, 16 Feb 2025 19:58:58 +0200https://vijay.eu/projects/snake-game/ <style> .game-container { display: flex; flex-direction: column; align-items: center; margin: 20px auto; max-width: 100%; } .game-title { font-size: 36px; font-weight: bold; margin-bottom: 20px; text-align: center; font-family: Arial, sans-serif; } .speed-selector { margin: 10px 0; padding: 10px; display: flex; gap: 10px; justify-content: center; } .speed-btn { padding: 8px 16px; border: 2px solid #333; border-radius: 5px; background: white; cursor: pointer; font-family: Arial, sans-serif; transition: all 0.3s ease; } .speed-btn.active { background: #333; color: white; } #gameCanvas { border: 2px solid #333; background: #f0f0f0; max-width: 100%; touch-action: none; } .controls { display: none; margin-top: 20px; touch-action: none; } @media (max-width: 768px) { .controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 200px; } .control-btn { padding: 15px; background: #333; color: white; border: none; border-radius: 5px; font-size: 18px; touch-action: none; } .control-btn:active { background: #555; } #up { grid-column: 2; grid-row: 1; } #left { grid-column: 1; grid-row: 2; } #right { grid-column: 3; grid-row: 2; } #down { grid-column: 2; grid-row: 3; } } .score { font-size: 24px; margin: 10px 0; font-family: Arial, sans-serif; } .game-over { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; text-align: center; z-index: 1000; } .restart-btn { margin-top: 10px; padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } .restart-btn:hover { background: #45a049; } </style> <div class="game-container"> <div class="speed-selector"> <button class="speed-btn" data-speed="slow">Slow</button> <button class="speed-btn active" data-speed="normal">Normal</button> <button class="speed-btn" data-speed="fast">Fast</button> </div> <div class="score">Score: <span id="scoreValue">0</span></div> <canvas id="gameCanvas" width="400" height="400"></canvas> <div class="controls"> <button id="up" class="control-btn">↑</button> <button id="left" class="control-btn">←</button> <button id="right" class="control-btn">→</button> <button id="down" class="control-btn">↓</button> </div> <div class="game-over" id="gameOver"> <h2>Game Over!</h2> <p>Final Score: <span id="finalScore">0</span></p> <button class="restart-btn" onclick="restartGame()">Play Again</button> </div> <p>This classic snake game has been created using Anthropic Claude in a single prompt on 16 Feb 2025. Documenting it for future reference to track the speed of development in GenAI/LLMs. </p> </div> <script> (function() { const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreElement = document.getElementById('scoreValue'); const finalScoreElement = document.getElementById('finalScore'); const gameOverElement = document.getElementById('gameOver'); const speedButtons = document.querySelectorAll('.speed-btn'); const gridSize = 20; const tileCount = canvas.width / gridSize; let snake = [{ x: 10, y: 10 }]; let food = { x: 15, y: 15 }; let dx = 0; let dy = 0; let score = 0; let gameLoop; const speeds = { slow: 150, normal: 100, fast: 70 }; let currentSpeed = speeds.normal; let baseSpeed = speeds.normal; function setSpeed(speedType) { baseSpeed = speeds[speedType]; currentSpeed = baseSpeed; if (gameLoop) { clearInterval(gameLoop); gameLoop = setInterval(drawGame, currentSpeed); } speedButtons.forEach(btn => { btn.classList.remove('active'); if (btn.dataset.speed === speedType) { btn.classList.add('active'); } }); } speedButtons.forEach(button => { button.addEventListener('click', () => { setSpeed(button.dataset.speed); }); }); function drawGame() { clearCanvas(); moveSnake(); checkCollision(); drawFood(); drawSnake(); } function clearCanvas() { ctx.fillStyle = '#f0f0f0'; ctx.fillRect(0, 0, canvas.width, canvas.height); } function drawSnake() { ctx.fillStyle = '#4CAF50'; snake.forEach(segment => { ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2); }); } function drawFood() { ctx.fillStyle = '#FF0000'; ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2); } function moveSnake() { const head = { x: snake[0].x + dx, y: snake[0].y + dy }; snake.unshift(head); if (head.x === food.x && head.y === food.y) { score += 10; scoreElement.textContent = score; generateFood(); increaseSpeed(); } else { snake.pop(); } } function generateFood() { food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) }; if (snake.some(segment => segment.x === food.x && segment.y === food.y)) { generateFood(); } } function checkCollision() { const head = snake[0]; if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) { gameOver(); } for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { gameOver(); } } } function gameOver() { clearInterval(gameLoop); finalScoreElement.textContent = score; gameOverElement.style.display = 'block'; } window.restartGame = function() { snake = [{ x: 10, y: 10 }]; food = { x: 15, y: 15 }; dx = 0; dy = 0; score = 0; currentSpeed = baseSpeed; scoreElement.textContent = '0'; gameOverElement.style.display = 'none'; gameLoop = setInterval(drawGame, currentSpeed); } function increaseSpeed() { if (currentSpeed > baseSpeed * 0.5) { clearInterval(gameLoop); currentSpeed -= 2; gameLoop = setInterval(drawGame, currentSpeed); } } document.addEventListener('keydown', (event) => { switch(event.key) { case 'ArrowUp': if (dy === 0) { dx = 0; dy = -1; } break; case 'ArrowDown': if (dy === 0) { dx = 0; dy = 1; } break; case 'ArrowLeft': if (dx === 0) { dx = -1; dy = 0; } break; case 'ArrowRight': if (dx === 0) { dx = 1; dy = 0; } break; } }); const controlButtons = document.querySelectorAll('.control-btn'); controlButtons.forEach(button => { button.addEventListener('touchstart', (e) => { e.preventDefault(); switch(button.id) { case 'up': if (dy === 0) { dx = 0; dy = -1; } break; case 'down': if (dy === 0) { dx = 0; dy = 1; } break; case 'left': if (dx === 0) { dx = -1; dy = 0; } break; case 'right': if (dx === 0) { dx = 1; dy = 0; } break; } }); }); gameLoop = setInterval(drawGame, currentSpeed); })(); </script>