รายงานโครงงาน: เกมหมากฮอสด้วย HTML
1. ชื่อโครงงาน
เกมหมากฮอส (Checkers Game)
2. วัตถุประสงค์
เพื่อพัฒนาเกมหมากฮอสด้วย HTML, CSS, และ JavaScript โดยมุ่งหวังให้ผู้เล่นได้เรียนรู้กติกาและวิธีการเล่นหมากฮอสผ่านการเล่นเกมออนไลน์
3. เครื่องมือและเทคโนโลยีที่ใช้
• HTML: สำหรับสร้างโครงสร้างพื้นฐานของหน้าเว็บ
• CSS: สำหรับการตกแต่งและออกแบบหน้าเว็บให้สวยงาม
• JavaScript: สำหรับเพิ่มความสามารถในการโต้ตอบและการทำงานของเกม
4. การออกแบบและพัฒนา
การพัฒนาเกมหมากฮอสนี้ได้ถูกแบ่งออกเป็นส่วนต่างๆ ดังนี้:
4.1. โครงสร้าง HTML
• ใช้แท็ก <head> เพื่อกำหนดการตั้งค่า เช่น ชื่อเรื่องและการเชื่อมต่อกับ CSS
• ใช้แท็ก <body> เพื่อสร้างบอร์ดเกมและสถานะของเกม
4.2. การตกแต่งด้วย CSS
• สร้างสไตล์ให้กับบอร์ดและเซลล์ของหมาก โดยแบ่งออกเป็นเซลล์สีขาวและสีดำ
• กำหนดสไตล์ของหมาก โดยใช้สีต่างๆ สำหรับผู้เล่น
4.3. ฟังก์ชันการทำงานด้วย JavaScript
• สร้างบอร์ดเกม: สร้างฟังก์ชัน initializeBoard() เพื่อกำหนดตำแหน่งเริ่มต้นของหมาก
• การเลือกหมาก: ฟังก์ชัน selectPiece() ช่วยให้ผู้เล่นสามารถเลือกหมากที่ต้องการเคลื่อนที่
• การคลิกเซลล์: ฟังก์ชัน handleCellClick() ใช้เพื่อตรวจสอบว่าเซลล์ที่ถูกคลิกว่างหรือไม่ และการเคลื่อนที่ของหมาก
• การตรวจสอบกติกาการเดิน: ฟังก์ชัน isValidMove() ใช้เพื่อตรวจสอบว่าการเคลื่อนที่ของหมากนั้นถูกต้องตามกฎของเกม
5. การทดสอบ
เกมได้รับการทดสอบการทำงานในเบราว์เซอร์ต่างๆ เพื่อให้แน่ใจว่าผู้เล่นสามารถเล่นเกมได้อย่างราบรื่น โดยตรวจสอบการเดินหมากทั้งในทิศทางปกติและการกินหมาก
6. ผลลัพธ์
เกมหมากฮอสที่พัฒนาขึ้นสามารถเล่นได้อย่างสมบูรณ์ ผู้เล่นสามารถเลือกหมาก เคลื่อนที่และกินหมากตามกฎของเกมได้อย่างถูกต้อง
7. ข้อเสนอแนะ
ควรพัฒนาเกมให้สามารถเพิ่มฟีเจอร์ใหม่ๆ เช่น:
• การบันทึกคะแนนของผู้เล่น
• การเพิ่มระดับความยาก
• การสร้างผู้เล่น AI เพื่อให้ผู้เล่นได้ฝึกเล่น
8. โค้ดเกมหมากฮอส
<!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 {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
h1 {
margin: 20px 0;
}
#board {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
margin: 0 auto;
gap: 0;
}
.cell {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.white {
background-color: #fff;
}
.black {
background-color: #333;
}
.piece {
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}
.red {
background-color: red;
}
.black-piece {
background-color: black;
}
.king {
border: 3px solid gold;
}
#status {
margin-top: 20px;
font-size: 1.2rem;
}
.selected {
outline: 3px solid yellow;
}
</style>
</head>
<body>
<h1>เกมหมากฮอส – กติกาเต็ม</h1>
<div id=”board”></div>
<p id=”status”>ผู้เล่น 1 (สีแดง) เริ่มก่อน</p>
<script>
const board = document.getElementById(‘board’);
const status = document.getElementById(‘status’);
let currentPlayer = ‘red’;
let selectedPiece = null;
let boardMatrix = createBoardMatrix();
function createBoardMatrix() {
const matrix = [];
for (let i = 0; i < 8; i++) {
matrix[i] = new Array(8).fill(null);
}
return matrix;
}
function initializeBoard() {
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 === 0) {
cell.classList.add(‘white’);
} else {
cell.classList.add(‘black’);
if (row < 2) {
const piece = createPiece(‘black-piece’);
cell.appendChild(piece);
boardMatrix[row][col] = { player: ‘black’, king: false };
} else if (row > 5) {
const piece = createPiece(‘red’);
cell.appendChild(piece);
boardMatrix[row][col] = { player: ‘red’, king: false };
}
}
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener(‘click’, handleCellClick);
board.appendChild(cell);
}
}
}
function createPiece(color) {
const piece = document.createElement(‘div’);
piece.classList.add(‘piece’, color);
piece.addEventListener(‘click’, selectPiece);
return piece;
}
function selectPiece(event) {
const piece = event.target;
const row = parseInt(piece.parentElement.dataset.row);
const col = parseInt(piece.parentElement.dataset.col);
if (boardMatrix[row][col].player === currentPlayer) {
if (selectedPiece) {
selectedPiece.classList.remove(‘selected’);
}
piece.classList.add(‘selected’);
selectedPiece = piece;
}
}
function handleCellClick(event) {
if (!selectedPiece) return;
const targetCell = event.currentTarget;
const row = parseInt(targetCell.dataset.row);
const col = parseInt(targetCell.dataset.col);
if (boardMatrix[row][col] === null) {
const oldRow = parseInt(selectedPiece.parentElement.dataset.row);
const oldCol = parseInt(selectedPiece.parentElement.dataset.col);
if (isValidMove(oldRow, oldCol, row, col)) {
movePiece(oldRow, oldCol, row, col);
checkForKing(row, col);
switchPlayer();
}
}
}
function isValidMove(oldRow, oldCol, newRow, newCol) {
const direction = currentPlayer === ‘red’ ? -1 : 1;
const piece = boardMatrix[oldRow][oldCol];
if (Math.abs(oldCol – newCol) === 1 && newRow – oldRow === direction && boardMatrix[newRow][newCol] === null) {
return true;
}
if (Math.abs(oldCol – newCol) === 2 && newRow – oldRow === 2 * direction) {
const middleRow = (oldRow + newRow) / 2;
const middleCol = (oldCol + newCol) / 2;
const middlePiece = boardMatrix[middleRow][middleCol];
if (middlePiece && middlePiece.player !== currentPlayer) {
boardMatrix[middleRow][middleCol] = null;
removePiece(middleRow, middleCol);
return true;
}
}
if (piece.king && Math.abs(oldCol – newCol) === 1 && Math.abs(newRow – oldRow) === 1 && boardMatrix[newRow][newCol] === null) {
return true;
}
return false;
}
function movePiece(oldRow, oldCol, newRow, newCol) {
const targetCell = document.querySelector(`.cell[data-row=”${newRow}”][data-col=”${newCol}”]`);
targetCell.appendChild(selectedPiece);
boardMatrix[newRow][newCol] = boardMatrix[oldRow][oldCol];
boardMatrix[oldRow][oldCol] = null;
selectedPiece.classList.remove(‘selected’);
selectedPiece
