SNAKE GAME

\n \n `;\n document.body.appendChild(wrap);\n\n // 4. Variáveis de Jogo\n const canvas = document.getElementById('snk-canvas');\n const ctx = canvas.getContext('2d');\n const size = 12, cell = 24; // 12x12 de tamanho (288px)\n let snake = [], food = {}, dx = 1, dy = 0, score = 0, loop = null, history = [];\n\n // Áudio sem travar (Web Audio API segura)\n function sound(freq, type = 'sine', duration = 0.1) {\n try {\n const ctxAudio = new (window.AudioContext || window.webkitAudioContext)();\n const osc = ctxAudio.createOscillator();\n const gain = ctxAudio.createGain();\n osc.type = type;\n osc.frequency.setValueAtTime(freq, ctxAudio.currentTime);\n gain.gain.setValueAtTime(0.05, ctxAudio.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.00001, ctxAudio.currentTime + duration);\n osc.connect(gain); gain.connect(ctxAudio.destination);\n osc.start(); osc.stop(ctxAudio.currentTime + duration);\n } catch(e) {} // Ignora se o navegador bloquear o áudio inicialmente\n }\n\n // Trilha sonora simples em loop enquanto joga\n let musicInterval;\n function startMusic() {\n let note = 0;\n musicInterval = setInterval(() => {\n sound([110, 130, 146, 165][note % 4], 'triangle', 0.2);\n note++;\n }, 300);\n }\n\n function updateMenu() {\n document.getElementById('snk-play-btn').textContent = txt[lang].play;\n document.getElementById('snk-cfg-btn').textContent = txt[lang].settings + `: ${lang.toUpperCase()}`;\n document.getElementById('snk-info').textContent = \"\";\n }\n\n function spawnFood() {\n food = { x: Math.floor(Math.random() * size), y: Math.floor(Math.random() * size) };\n if (snake.some(s => s.x === food.x && s.y === food.y)) spawnFood();\n }\n\n function startGame() {\n snake = [{x: 6, y: 6}, {x: 5, y: 6}, {x: 4, y: 6}];\n dx = 1; dy = 0; score = 0;\n document.getElementById('snk-title').textContent = \"SNAKE GAME\";\n document.getElementById('snk-menu').style.display = 'none';\n document.getElementById('snk-rank').style.display = 'none';\n canvas.style.display = 'block';\n \n spawnFood();\n startMusic();\n if (loop) clearInterval(loop);\n loop = setInterval(draw, 150);\n }\n\n function gameOver() {\n clearInterval(loop);\n clearInterval(musicInterval);\n sound(150, 'sawtooth', 0.4); // Som de batida\n\n document.getElementById('snk-title').textContent = txt[lang].over;\n canvas.style.display = 'none';\n document.getElementById('snk-menu').style.display = 'block';\n \n history.push(score);\n if (history.length > 10) history.shift();\n\n // Mostrar Ranking\n const rankDiv = document.getElementById('snk-rank');\n const sorted = [...history].sort((a,b) => b - a);\n let html = `TOP 10:
`;\n for(let i = 9; i >= 0; i--) {\n let val = sorted[i] !== undefined ? `${sorted[i]} pts` : '---';\n if (sorted[i] === score && sorted[i] !== undefined) {\n html += `Nº ${i+1}: ${val} *
`;\n } else {\n html += `Nº ${i+1}: ${val}
`;\n }\n }\n rankDiv.innerHTML = html;\n rankDiv.style.display = 'block';\n updateMenu();\n }\n\n function draw() {\n // Mover cabeça\n const head = { x: snake[0].x + dx, y: snake[0].y + dy };\n\n // Colisões\n if (head.x < 0 || head.x >= size || head.y < 0 || head.y >= size || snake.some(s => s.x === head.x && s.y === head.y)) {\n return gameOver();\n }\n\n snake.unshift(head);\n\n // Comer fruta\n if (head.x === food.x && head.y === food.y) {\n score += 50;\n sound(600, 'sine', 0.1); // Som de comer\n spawnFood();\n } else {\n snake.pop();\n }\n\n // Renderizar Canvas\n ctx.fillStyle = '#222'; ctx.fillRect(0, 0, canvas.width, canvas.height);\n \n // Fruta\n ctx.fillStyle = '#FF5722'; ctx.beginPath(); ctx.arc(food.x*cell+12, food.y*cell+12, 10, 0, 2*Math.PI); ctx.fill();\n\n // Cobra\n snake.forEach((seg, i) => {\n if (i === 0) {\n // Cabeça azul\n ctx.fillStyle = '#00bcd4';\n ctx.fillRect(seg.x * cell, seg.y * cell, cell, cell);\n // Desenhar seta indicadora\n ctx.fillStyle = '#fff'; ctx.font = '16px monospace'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';\n let arrow = dx === 1 ? '→' : dx === -1 ? '←' : dy === 1 ? '↓' : '↑';\n ctx.fillText(arrow, seg.x * cell + 12, seg.y * cell + 12);\n } else {\n // Corpo verde\n ctx.fillStyle = '#4CAF50';\n ctx.fillRect(seg.x * cell + 1, seg.y * cell + 1, cell - 2, cell - 2);\n }\n });\n\n document.getElementById('snk-info').textContent = `${txt[lang].score}: ${score}`;\n }\n\n // 5. Controles do Teclado\n window.addEventListener('keydown', e => {\n if (canvas.style.display !== 'block') return;\n if ((e.key === 'ArrowUp' || e.key === 'w' || e.key === 'W') && dy !== 1) { dx = 0; dy = -1; }\n if ((e.key === 'ArrowDown' || e.key === 's' || e.key === 'S') && dy !== -1) { dx = 0; dy = 1; }\n if ((e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') && dx !== 1) { dx = -1; dy = 0; }\n if ((e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') && dx !== -1) { dx = 1; dy = 0; }\n });\n\n // Eventos de Clique\n document.getElementById('snk-play-btn').addEventListener('click', startGame);\n document.getElementById('snk-cfg-btn').addEventListener('click', () => {\n lang = lang === 'pt' ? 'en' : 'pt';\n updateMenu();\n });\n document.getElementById('snk-close').addEventListener('click', () => {\n clearInterval(loop); clearInterval(musicInterval);\n document.getElementById('snk-wrap').remove(); document.getElementById('snake-style').remove();\n });\n\n // Inicialização\n updateMenu();\n})();\n","url","link_url","/p/h8gn_8ebb9_x2f_sq_ks","versioned_link_url","/p/h8gn_8ebb9_x2f_sq_ks/12","yapping","**Updating button text**\n\nI need to change the button text in index.html from \"Snake\" to \"Snake Game.\" I should create an edit block that replaces the relevant button HTML and matches the exact snippet. I’ll prepare the SEARCH/REPLACE blocks, ensuring I preserve backticks and indentation. This means I need to copy the current block accurately. After that, I’ll provide the necessary replacements and finish with a summary sentence, plus a concise tweet-length summary to capture it all.\n\nI will replace the existing Snake block code in main.js with the new \"Snake Game\" block and update the modal title and the index button label to \"Snake Game\".\n\nindex.html\n```index.html\n```\n\nmain.js\n```main.js\n```\n\nmain.js\n```main.js\n```\n\nSummary: I updated index.html to relabel the Snake button to \"Snake Game\", replaced the previous snakeCommand block in main.js with the new Snake Game code you provided, and changed the modal title to \"Snake Game — Command\".","cursor","eyJpZCI6Img4Z25fOGViYjlfeDJmX3NxX2tzIn0","token","included",[],"routes/browser/layout","actionData","errors"]

CommandBlocks - Codes for Google DevTools