นายจักรกริช นนทะสร วฟ.1/1 รหัส0005
คณะวิศวกรรมศาสตร์ สาขาวิศวกรรมไฟฟ้า
วิชา : 04000104 การโปรเเกรมคอมพิวเตอร์
1.ความเป็นมา
เกม XO หรือ Tic-Tac-Toe เป็นเกมกระดานที่เรียบง่ายแต่สนุกสนาน ผู้เล่นสองคนผลัดกันใส่เครื่องหมาย X หรือ O ลงในช่องว่าง 3×3 จนกว่าจะมีผู้ใดผู้หนึ่งเรียงเครื่องหมายของตนเองได้ 3 อันในแนวตรง แนวนอน หรือแนวทแยงเกมนี้เป็นที่นิยมเล่นกันทั่วโลกมาเป็นเวลานาน และมักใช้เป็นตัวอย่างในการสอนการเขียนโปรแกรมเบื้องต้น เนื่องจากมีกฎที่เข้าใจง่ายและสามารถนำไปประยุกต์ใช้กับหลักการทางคอมพิวเตอร์ได้หลากหลาย
2.วัตถุประสงค์
2.1 เพื่อศึกษาและทำความเข้าใจเกมกับการสร้างเกมด้วยภาษา HTML
2.2เพื่อให้นักศึกษานำโค้ดที่ได้สามารถนำไปประยุกต์พัฒนาหรือต่อยอดต่อไปได้
2.3เพื่อศึกษาและประยุกต์ใช้เครื่องมือและแพลตฟอร์มต่างๆ ในการสร้างเขียนโปรอกรม เช่น การสร้างเกมด้วยภาษา HTML
3.ขอบเขตการทำงาน
3.1สร้างตาราง 3×3 ด้วย HTMLใช้ CSS ในการจัดรูปแบบให้ดูสวยงามและใช้งานง่าย
3.2เขียนโค้ด JavaScript เพื่อควบคุมลำดับการเล่นของผู้เล่นทั้งสองตรวจสอบผลลัพธ์ (ชนะ, เสมอ, หรือยังเล่นต่อ)
4.ประโยชน์ที่คิดว่าจะได้รับ
4.1 เข้าใจการใช้ HTML, CSS, และ JavaScript ในการพัฒนาเว็บแอปพลิเคชัน
4.2สร้างเกมที่สามารถเล่นได้จริงและมีความสนุก ทำให้มีแรงบันดาลใจในการเรียนรู้
4.3 การแก้ปัญหาระหว่างการสร้างเกมส์
5.ความรู้ที่เกี่ยวข้อง
5.1 Visual Studio Code (index.html )
หน้า index.html เป็นชื่อที่ใช้กันทั่วไปสำหรับหน้าเริ่มต้นที่แสดงบนเว็บไซต์ หากไม่มีการระบุหน้าอื่นเมื่อผู้เยี่ยมชมร้องขอไซต์ กล่าวอีกนัยหนึ่ง index.html คือชื่อที่ใช้สำหรับโฮมเพจของเว็บไซต์
5.2 Main.css
เป็นไฟล์ที่อธิบายวิธีแสดงองค์ประกอบ HTML บนหน้าจอ กระดาษ ฯลฯ ด้วย HTML คุณสามารถกำหนดสไตล์ที่ฝังไว้หรือสไตล์ที่สามารถกำหนดได้ในสไตล์ชีตภายนอก สำหรับการฝังสไตล์ \ </style> มีการใช้แท็ก สไตล์ชีตภายนอกถูกจัดเก็บไว้ในไฟล์ที่มีนามสกุล .CSS ด้วย CSS ภายนอก คุณสามารถรวมไว้ในหน้า HTML หลายหน้าเพื่ออัปเดตสไตล์ของหน้าเหล่านั้น แม้แต่ไฟล์ CSS ไฟล์เดียวก็สามารถใช้จัดรูปแบบเว็บไซต์ที่สมบูรณ์ได้
5.3 Main.js
JS (JavaScript) คือไฟล์ที่มีโค้ด JavaScript สำหรับดำเนินการบนหน้าเว็บ ไฟล์ JavaScript ถูกจัดเก็บด้วยนามสกุล .JS ภายในเอกสาร HTML คุณสามารถฝังโค้ด JavaScript โดยใช้ปุ่ม \ </script> แท็กหรือรวมไฟล์ JS คล้ายกับไฟล์ CSS ไฟล์ JS สามารถรวมไว้ในเอกสาร HTML หลายฉบับเพื่อให้โค้ดกลับมาใช้ใหม่ได้JavaScriptสามารถใช้เพื่อจัดการ HTML DOM
5.4 รวมผลการทำงานของโค้ด
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>XO Game</title>
<style>
/* สไตล์พื้นหลัง */
body {
background-image: url(‘https://wallpapercave.com/wp/wp6058967.jpg‘); /* ใส่ภาพพื้นหลังที่ต้องการ */
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* สไตล์หน้าจอเริ่มต้น */
#startScreen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
}
#startScreen h1 {
font-size: 2rem;
margin-bottom: 20px;
}
#startButton {
padding: 10px 20px;
font-size: 1.2rem;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
/* สไตล์กระดานเกม */
#gameBoard {
display: none;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.cell {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
background-color: white;
border: 2px solid #000;
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<!– หน้าจอเริ่มเกม –>
<div id=”startScreen”>
<h1>Welcome to XO Game</h1>
<button id=”startButton”>Start Game</button>
</div>
<!– กระดานเกม XO –>
<div id=”gameBoard”>
<div class=”cell” data-index=”0″></div>
<div class=”cell” data-index=”1″></div>
<div class=”cell” data-index=”2″></div>
<div class=”cell” data-index=”3″></div>
<div class=”cell” data-index=”4″></div>
<div class=”cell” data-index=”5″></div>
<div class=”cell” data-index=”6″></div>
<div class=”cell” data-index=”7″></div>
<div class=”cell” data-index=”8″></div>
</div>
<script>
const startButton = document.getElementById(‘startButton’);
const startScreen = document.getElementById(‘startScreen’);
const gameBoard = document.getElementById(‘gameBoard’);
const cells = document.querySelectorAll(‘.cell’);
let currentPlayer = ‘X’;
let gameState = Array(9).fill(”);
// ฟังก์ชันเริ่มเกม
startButton.addEventListener(‘click’, () => {
startScreen.classList.add(‘hidden’);
gameBoard.style.display = ‘grid’;
});
// ฟังก์ชันตรวจสอบการชนะ
function checkWinner() {
const winningCombos = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (const combo of winningCombos) {
const [a, b, c] = combo;
if (gameState[a] && gameState[a] === gameState[b] && gameState[a] === gameState[c]) {
return gameState[a];
}
}
return gameState.includes(”) ? null : ‘Draw’;
}
// ฟังก์ชันแสดงผลผู้ชนะ
function handleWin(winner) {
setTimeout(() => {
alert(winner === ‘Draw’ ? ‘It\’s a Draw!’ : ${winner} Wins!);
gameState.fill(”);
cells.forEach(cell => cell.textContent = ”);
}, 100);
}
// ฟังก์ชันเมื่อคลิกช่อง
cells.forEach((cell, index) => {
cell.addEventListener(‘click’, () => {
if (!gameState[index]) {
gameState[index] = currentPlayer;
cell.textContent = currentPlayer;
const winner = checkWinner();
if (winner) {
handleWin(winner);
} else {
currentPlayer = currentPlayer === ‘X’ ? ‘O’ : ‘X’;
}
}
});
});
</script>
</body>
</html>
6.ผลการดำเนินงาน
เกม XO (Tic Tac Toe) เป็นเกมที่มีผู้เล่นสองคนที่ผลัดกันวางสัญลักษณ์ “X” และ “O” ลงในตาราง 3×3 เพื่อพยายามเรียงสัญลักษณ์ในแนวตั้ง แนวนอน หรือแนวทแยงให้ครบ 3 ช่อง ผลการดำเนินงานของโครงงานนี้มีดังนี้
6.1 การออกแบบตาราง ใช้HTML ในการสร้างตาราง 3×3
6.2 การทำงานของเกม ใช้ JavaScript ในการจัดการตรรกะของเกม เช่น การตรวจสอบผู้ชนะ การเปลี่ยนตาเล่น และการรีเซ็ตเกม
6.3 การแสดงผล ใช้ CSS เพื่อทำให้เกมดูสวยงามและใช้งานง่าย
7.ผลการดำเนินงาน
7.1 เมื่อผู้เล่นลง x,o ครบจำนวน 3 ช่องตามที่กำหนด
จะแสดงผลว่า x wins
7.2 เมื่อไม่มีผู้เล่นที่ชนะจะเเสดงผลดังนี้
8.สรุปผลการทดลอง
เป็นเกมที่เล่นง่ายและสนุก โดยมีผู้เล่นสองคนที่ต้องสลับกันวางเครื่องหมาย
(X หรือ O) ในช่องที่กำหนดบนตาราง 3×3 เป้าหมายคือการวางเครื่องหมายให้เป็นแถวแนวนอน แนวตั้ง หรือแนวทแยงสามช่องติดกัน ในการทดลองนี้ เราได้พัฒนาเกม XO โดยใช้ HTML, CSS และ JavaScript ผลการทดลองพบว่าเกมมีความน่าสนใจและสามารถเล่นได้ง่าย ผู้เล่นสามารถเข้าใจวิธีการเล่นได้อย่างรวดเร็ว และมีการปรับปรุง UI เพื่อให้ผู้เล่นมีประสบการณ์ที่ดีขึ้นเพื่อการพัฒนาต่อไป
9.เอกสารอ้างอิง
9.1 ใช้แชท ai เพื่อหาข้อมูลเพิ่มเติม https://chatgpt.com/
9.2 รูปภาพพื้นหลัง https://wallpapercave.com/wp/wp6058967.jpg
9.3 อธิบายการเขียนโค๊คและวิธีการใช้งาน https://www.youtube.com/watch?v=pWLCy2F-xJs
