commit e320b91986f38ff54b9abb3c75f181fd5eeb9326 Author: Jethro Lin Date: Wed Jan 15 17:19:04 2025 +0800 add files diff --git a/index.html b/index.html new file mode 100644 index 0000000..d35ab38 --- /dev/null +++ b/index.html @@ -0,0 +1,84 @@ + + + + + 賽馬遊戲 + + + + + + +
+

賽馬遊戲

+
+
+

選擇您的馬匹

+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+

積分：100

+
+
+
+ + +
+
+ +
+ + +
+ 馬1 +
+
+ 馬2 +
+
+ 馬3 +
+
+ 馬4 +
+
+ 馬5 +
+ +
+
+ +
+
+
+ + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a94058e --- /dev/null +++ b/script.js @@ -0,0 +1,140 @@ +$(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(); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..62c600a --- /dev/null +++ b/styles.css @@ -0,0 +1,58 @@ +/* 賽道上每匹馬的初始位置 */ +.horse { + position: absolute; + left: 0; + top: 0; + transition: left 0.5s linear; +} + +/* 調整每匹馬的垂直位置 */ +#racehorse1 { top: 20px; } +#racehorse2 { top: 80px; } +#racehorse3 { top: 140px; } +#racehorse4 { top: 200px; } +#racehorse5 { top: 260px; } + +#result { + text-align: center; + font-size: 1.2em; + font-weight: bold; +} + +/* 名次列表樣式 */ +#rankings { + margin-top: 20px; + text-align: left; + display: inline-block; +} + +/* 起跑線樣式 */ +.starting-line { + position: absolute; + left: 10%; + top: 0; + width: 4px; + height: 100%; + background-color: green; +} + +/* 終點線樣式 */ +.finish-line { + position: absolute; + right: 10%; + top: 0; + width: 4px; + height: 100%; + background-color: red; +} + +/* 馬匹圖片 */ +.horse img { + width: 50px; + height: 30px; +} + +/* 障礙馬匹時的透明度 */ +.horse.finished img { + opacity: 0.7; +}