<!DOCTYPE html><html lang="th"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>เกมหมากฮอสไทย</title> <style> body { margin: 0; font-family: 'Kanit', sans-serif; background: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } header { display: flex; justify-content: space-between; width: 90%; max-width: 900px; margin-bottom: 10px; color: white; font-size: 1.2rem; } #game { display: grid; grid-template-columns: repeat(8, 60px); grid-template-rows: repeat(8, 60px); gap: 0; background-color: #333; border: 5px solid #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); } .cell { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; } .dark { background-color: #3b3b3b; } .light { background-color: #f2f2f2; } .piece { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); } .red { background-color: red; } .blue { background-color: blue; } .king::after { content: '👑'; position: absolute; font-size: 1.2rem; margin-top: -5px; } .highlight { border: 2px solid yellow; } .controls { margin: 10px 0; } button { background: linear-gradient(to right, #6a11cb, #2575fc); border: none; color: white; padding: 10px 20px; margin: 5px; font-size: 1rem; border-radius: 10px; cursor: pointer; transition: background 0.3s; } button:hover { background: linear-gradient(to right, #2575fc, #6a11cb); } #playerNameInput { padding: 10px; margin: 10px; border-radius: 10px; border: none; font-size: 1rem; } @media (max-width: 600px) { #game { grid-template-columns: repeat(8, 40px); grid-template-rows: repeat(8, 40px); } .cell { width: 40px; height: 40px; } .piece { width: 30px; height: 30px; } } </style></head><body> <header> <div>ผู้เล่น: <span id="playerScore">0</span></div> <div>เวลา: <span id="timer">10:00</span></div> <div>AI: <span id="aiScore">0</span></div> </header>
<div class="controls"> <input type="text" id="playerNameInput" placeholder="กรอกชื่อผู้เล่น..."> <button onclick="startGame()">เริ่มเกมใหม่</button> <button onclick="pauseGame()">หยุด</button> <button onclick="confirmMove()">ยืนยัน</button> </div>
<div id="game"></div>
<audio id="moveSound"> <source src="https://www.soundjay.com/button/beep-07.wav" type="audio/wav"> </audio>
<script> const board = document.getElementById('game'); const timerEl = document.getElementById('timer'); const moveSound = document.getElementById('moveSound'); let timer, playerScore = 0, aiScore = 0;
function startGame() { playerScore = 0; aiScore = 0; document.getElementById('playerScore').textContent = '0'; document.getElementById('aiScore').textContent = '0'; clearInterval(timer); startTimer(600); generateBoard(); }
function startTimer(seconds) { let remaining = seconds; timer = setInterval(() => { const min = String(Math.floor(remaining / 60)).padStart(2, '0'); const sec = String(remaining % 60).padStart(2, '0'); timerEl.textContent = `${min}:${sec}`; if (--remaining < 0) { clearInterval(timer); alert("หมดเวลา! คุณแพ้ ลองใหม่อีกครั้ง"); } }, 1000); }
function pauseGame() { clearInterval(timer); }
function confirmMove() { // ในภายหลังจะเพิ่มระบบยืนยันการเดิน alert("ฟังก์ชันยืนยันยังไม่พร้อมใช้งาน"); }
function generateBoard() { board.innerHTML = ''; for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { const cell = document.createElement('div'); cell.classList.add('cell'); if ((row + col) % 2 === 1) { cell.classList.add('dark'); } else { cell.classList.add('light'); } board.appendChild(cell); } } }
startGame(); </script></body></html>