84 lines
4.1 KiB
HTML
84 lines
4.1 KiB
HTML
<!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>
|