$(document).ready(function() { let score = 100; let selectedHorse = null; let raceInProgress = false; // 更新積分顯示 function updateScore() { $('#score').text(score); } // 重置賽馬位置 function resetHorses() { $('.horse').css('left', '0'); $('.horse').removeClass('finished'); } // 禁用/啟用選擇和按鈕 function setControls(state) { $('#horse-selection input').prop('disabled', state); $('#start-btn').prop('disabled', state); } // 顯示倒數計時 function showCountdown(callback) { let countdown = 5; $('#countdown').text(countdown); let interval = setInterval(() => { countdown--; if (countdown > 0) { $('#countdown').text(countdown); } else if (countdown === 0) { $('#countdown').text('Go!'); } else { clearInterval(interval); $('#countdown').text(''); callback(); } }, 1000); } // 開始比賽 $('#start-btn').click(function() { if (raceInProgress) return; selectedHorse = $('input[name="horse"]:checked').val(); if (!selectedHorse) { alert('請選擇一匹馬進行下注!'); return; } raceInProgress = true; setControls(true); $('#reset-btn').prop('disabled', true); $('#result').html(''); resetHorses(); showCountdown(() => { startRace(); }); }); // 開始賽馬動畫 function startRace() { $('#result').html('比賽進行中...
'); // 隨機生成每匹馬的速度(時間越短越快) let speeds = []; for (let i = 0; i < 5; i++) { speeds.push(Math.floor(Math.random() * 3000) + 2000); // 2-5秒 } // 記錄完成的馬匹數 let finished = 0; let rankings = []; // 為每匹馬設置動畫 $('.horse').each(function(index) { let horseIndex = index + 1; let speed = speeds[index]; $(this).animate({ left: '90%' }, speed, 'linear', function() { finished++; rankings.push(horseIndex); // 標記完成的馬匹 $(this).addClass('finished'); // 更新名次顯示 $('#rankings').append(`
${finished}. 馬匹 ${horseIndex}
`); if (finished === 5) { raceComplete(rankings); } }); }); } // 比賽完成處理 function raceComplete(rankings) { raceInProgress = false; setControls(false); $('#reset-btn').prop('disabled', false); // 確定勝利馬匹 let winner = rankings[0]; let playerChoice = parseInt(selectedHorse); // 更新積分 let resultHtml = ''; if (playerChoice === winner) { score += 10; resultHtml += `恭喜!馬匹 ${winner} 獲勝。您的積分增加了 10 點。`; } else { score -= 10; resultHtml += `很遺憾!馬匹 ${winner} 獲勝。您的積分減少了 10 點。`; } // 顯示積分變化 resultHtml += `
您的當前積分:${score}`; $('#result').append(`
${resultHtml}`); updateScore(); // 檢查遊戲結束 if (score <= 0) { $('#result').append('
遊戲結束!您的積分不足。'); $('#start-btn').prop('disabled', true); } } // 重新開始遊戲 $('#reset-btn').click(function() { score = 100; updateScore(); resetHorses(); $('#result').html(''); $('#countdown').text(''); $('input[name="horse"]').prop('checked', false); $('#start-btn').prop('disabled', false); }); // 初始設置 updateScore(); });