add files
This commit is contained in:
Jethro Lin
commit
e320b91986
3 changed files with 282 additions and 0 deletions
84
index.html
Normal file
84
index.html
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>賽馬遊戲</title>
|
||||
<!-- 引入 Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- 引入自定義 CSS -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container my-5">
|
||||
<h1 class="text-center mb-4">賽馬遊戲</h1>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<h4>選擇您的馬匹</h4>
|
||||
<div id="horse-selection" class="d-flex flex-wrap">
|
||||
<!-- 馬匹選項 -->
|
||||
<div class="form-check me-3">
|
||||
<input class="form-check-input" type="radio" name="horse" id="horse1" value="1">
|
||||
<label class="form-check-label" for="horse1">馬匹 1</label>
|
||||
</div>
|
||||
<div class="form-check me-3">
|
||||
<input class="form-check-input" type="radio" name="horse" id="horse2" value="2">
|
||||
<label class="form-check-label" for="horse2">馬匹 2</label>
|
||||
</div>
|
||||
<div class="form-check me-3">
|
||||
<input class="form-check-input" type="radio" name="horse" id="horse3" value="3">
|
||||
<label class="form-check-label" for="horse3">馬匹 3</label>
|
||||
</div>
|
||||
<div class="form-check me-3">
|
||||
<input class="form-check-input" type="radio" name="horse" id="horse4" value="4">
|
||||
<label class="form-check-label" for="horse4">馬匹 4</label>
|
||||
</div>
|
||||
<div class="form-check me-3">
|
||||
<input class="form-check-input" type="radio" name="horse" id="horse5" value="5">
|
||||
<label class="form-check-label" for="horse5">馬匹 5</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 text-end">
|
||||
<h4>積分：<span id="score">100</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mb-4">
|
||||
<button id="start-btn" class="btn btn-primary">開始比賽</button>
|
||||
<button id="reset-btn" class="btn btn-secondary" disabled>重新開始</button>
|
||||
</div>
|
||||
<div id="race-track" class="position-relative" style="height: 300px; border: 2px solid #000; border-radius: 10px; background-color: #f8f9fa;">
|
||||
<!-- 起跑線 -->
|
||||
<div id="starting-line" class="starting-line"></div>
|
||||
<!-- 賽道 -->
|
||||
<!-- 每匹馬對應一條賽道 -->
|
||||
<div class="horse" id="racehorse1">
|
||||
<img src="https://via.placeholder.com/50x30?text=馬1" alt="馬1">
|
||||
</div>
|
||||
<div class="horse" id="racehorse2">
|
||||
<img src="https://via.placeholder.com/50x30?text=馬2" alt="馬2">
|
||||
</div>
|
||||
<div class="horse" id="racehorse3">
|
||||
<img src="https://via.placeholder.com/50x30?text=馬3" alt="馬3">
|
||||
</div>
|
||||
<div class="horse" id="racehorse4">
|
||||
<img src="https://via.placeholder.com/50x30?text=馬4" alt="馬4">
|
||||
</div>
|
||||
<div class="horse" id="racehorse5">
|
||||
<img src="https://via.placeholder.com/50x30?text=馬5" alt="馬5">
|
||||
</div>
|
||||
<!-- 終點線 -->
|
||||
<div id="finish-line" class="finish-line"></div>
|
||||
</div>
|
||||
<!-- 倒數計時顯示區域 -->
|
||||
<div id="countdown" class="text-center mt-4" style="font-size: 2em; font-weight: bold;"></div>
|
||||
<div id="result" class="mt-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- 引入 jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<!-- 引入 Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- 引入自定義 JS -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
140
script.js
Normal file
140
script.js
Normal file
|
|
@ -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('比賽進行中...<br><div id="rankings"></div>');
|
||||
|
||||
// 隨機生成每匹馬的速度（時間越短越快）
|
||||
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(`<div>${finished}. 馬匹 ${horseIndex}</div>`);
|
||||
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 += `<br>您的當前積分：${score}`;
|
||||
|
||||
$('#result').append(`<br>${resultHtml}`);
|
||||
|
||||
updateScore();
|
||||
|
||||
// 檢查遊戲結束
|
||||
if (score <= 0) {
|
||||
$('#result').append('<br>遊戲結束！您的積分不足。');
|
||||
$('#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();
|
||||
});
|
||||
58
styles.css
Normal file
58
styles.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue