<canvas id="gameCanvas" width="800" height="600"></canvas>

<div id="radioPanel">

<button id="prev">⏮</button>

<button id="playPause">⏯</button>

<button id="next">⏭</button>

<span id="trackName">–</span>

</div>

<script>

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// Volante virtual

let steeringAngle = 0;

canvas.addEventListener('mousemove', e => {

const dx = e.clientX - canvas.width / 2;

steeringAngle = dx / (canvas.width / 2); // normaliza entre -1 e 1

});

// Música

const tracks = ['mus1.mp3', 'mus2.mp3', 'mus3.mp3'];

let current = 0;

const audio = new Audio(tracks[current]);

document.getElementById('playPause').onclick = () => {

audio.paused ? audio.play() : audio.pause();

};

document.getElementById('prev').onclick = () => { if (current > 0) current--; audio.src = tracks[current]; audio.play(); };

document.getElementById('next').onclick = () => { if (current < tracks.length - 1) current++; audio.src = tracks[current]; audio.play(); };

document.getElementById('trackName').innerText = tracks[current];

// Loop principal de desenho

function loop() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

// Desenhar estrada segmentada com deslocamento constante

// Desenhar o carro no centro e rotacionado conforme steeringAngle

requestAnimationFrame(loop);

}

loop();

</script>