Tạo trò chơi Tic-Tac-Toe hai người chơi bằng JavaScript, HTML và CSS
Cài đặt và chạy trò chơi đơn giản này trong trình duyệt web của bạn ngay lập tức!
Tic-tac-toe là một trò chơi phổ biến sử dụng lưới 3×3. Mục tiêu của trò chơi là trở thành người chơi đầu tiên đặt ba biểu tượng thành một hàng ngang, dọc hoặc chéo.
Bạn có thể tạo trò chơi Tic-tac-toe chạy trong trình duyệt web bằng HTML, CSS và JavaScript. Bạn có thể sử dụng HTML để thêm nội dung chứa lưới 3×3 và CSS để thêm một số kiểu dáng cho thiết kế trò chơi.
Sau đó, bạn có thể sử dụng JavaScript cho chức năng của trò chơi. Điều này bao gồm việc đặt các biểu tượng, thay phiên nhau giữa những người chơi và quyết định ai là người chiến thắng.
Mục Lục
Cách tạo giao diện người dùng cho trò chơi Tic-Tac-Toe
Bạn có thể đọc và tải xuống toàn bộ mã nguồn của trò chơi này từ kho lưu trữ GitHub của nó.
Tic-tac-toe là một trong nhiều trò chơi mà bạn có thể thực hiện khi học cách lập trình. Bạn nên thực hành một ngôn ngữ hoặc môi trường mới, chẳng hạn như công cụ phát triển trò chơi PICO-8.
Để tạo trò chơi Tic-tac-toe chạy trong trình duyệt web, bạn sẽ cần thêm HTML cho nội dung trang. Sau đó, bạn có thể tạo kiểu này bằng CSS.
- Tạo một tệp mới có tên “index.html”.
- Bên trong “index.html”, thêm cấu trúc cơ bản của tệp HTML:
<!doctype html>
<html lang="en-US">
<head>
<title>Tic Tac Toe Game</title>
</head>
<body>
</body>
</html> - Bên trong thẻ nội dung HTML, hãy thêm một bảng có ba hàng, mỗi hàng có ba ô:
<div class="container">
<table>
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
</div> - Trong cùng thư mục với tệp HTML của bạn, hãy tạo một tệp mới có tên “styles.css”.
- Bên trong tệp CSS, hãy thêm một số kiểu dáng vào lưới 3 nhân 3 của bạn:
table {
border-collapse: collapse;
margin: 0 auto;
}td {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
} - Liên kết tệp CSS với tệp HTML của bạn bằng cách thêm nó vào thẻ đầu:
<link rel="stylesheet" type="text/css" href="styles.css">
Cách thay phiên nhau thêm biểu tượng vào bảng trò chơi
Trong trò chơi, sẽ có hai người chơi, mỗi người có ký hiệu “X” hoặc “O”. Bạn có thể thêm ký hiệu “X” hoặc “O” bằng cách nhấp vào một trong các ô lưới. Điều này sẽ tiếp tục cho đến khi một trong các bạn đã tạo một hàng thẳng ngang, dọc hoặc chéo.
Bạn có thể thêm chức năng này bằng JavaScript.
- Trong cùng thư mục với các tệp HTML và CSS của bạn, hãy tạo một tệp JavaScript có tên “script.js”.
- Liên kết tệp JavaScript với tệp HTML của bạn bằng cách thêm tập lệnh vào cuối thẻ body:
<body>
<script src="script.js"></script>
</body> - Bên trong tệp JavaScript, hãy thêm một chuỗi để thể hiện biểu tượng của người chơi. Đây có thể là “X” hoặc “O”. Theo mặc định, người chơi đầu tiên sẽ đặt dấu “X”:
let playerSymbol = "X"; - Thêm một biến khác để theo dõi xem trò chơi đã kết thúc hay chưa:
let gameEnded = false - Mỗi ô trong bảng HTML có ID từ 1 đến 9. Đối với mỗi ô trong bảng, hãy thêm một trình xử lý sự kiện sẽ chạy bất cứ khi nào người dùng nhấp vào ô:
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).addEventListener(
"click",
function() {
}
);
} - Bên trong trình xử lý sự kiện, hãy thay đổi HTML bên trong để hiển thị biểu tượng hiện tại. Đảm bảo sử dụng câu lệnh có điều kiện JavaScript để trước tiên đảm bảo ô trống và trò chơi chưa kết thúc:
if (this.innerHTML === "" && !gameEnded) {
this.innerHTML = playerSymbol;
} - Thêm một lớp vào phần tử HTML để tạo kiểu cho biểu tượng sẽ hiển thị trên lưới. Tên của các lớp CSS sẽ là “X” hoặc “O”, tùy thuộc vào ký hiệu:
this.classList.add(playerSymbol.toLowerCase()); - Bên trong tệp “styles.css”, thêm hai lớp mới này cho các ký hiệu “X” và “O”. Các biểu tượng “X” và “O” sẽ hiển thị dưới dạng các màu khác nhau:
.x {
color: blue;
font-size: 80px;
}.o {
color: red;
font-size: 80px;
} - Trong tệp JavaScript, sau khi thay đổi InternalHTML để hiển thị ký hiệu, hãy hoán đổi ký hiệu. Ví dụ: nếu người chơi vừa đặt dấu “X”, hãy thay đổi biểu tượng tiếp theo thành “O”:
if (playerSymbol === "X")
playerSymbol = "O"
else
playerSymbol = "X" - Để chạy trò chơi, hãy mở tệp “index.html” trong trình duyệt web để hiển thị lưới 3 x 3:
- Bắt đầu đặt các biểu tượng trên lưới bằng cách nhấp vào các ô. Trò chơi sẽ xen kẽ giữa các biểu tượng “X” và “O”:
Làm thế nào để xác định người chiến thắng
Hiện tại, trò chơi vẫn sẽ tiếp tục ngay cả khi người chơi đã đặt ba biểu tượng liên tiếp. Bạn sẽ cần thêm một điều kiện kết thúc để kiểm tra điều này sau mỗi lượt.
- Bên trong tệp JavaScript của bạn, hãy thêm một biến mới để lưu trữ tất cả các vị trí “chiến thắng” có thể có cho lưới 3 nhân 3. Ví dụ, “[1,2,3]” là hàng trên cùng, hoặc “[1,4,7]” là một hàng chéo.
let winPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Thêm một chức năng mới gọi là checkWin():
function checkWin() {
} - Bên trong chức năng, lặp qua từng vị trí chiến thắng có thể:
for (let i = 0; i < winPos.length; i++) {}
- Bên trong vòng lặp for, hãy kiểm tra xem tất cả các ô có chứa ký hiệu của người chơi hay không:
if (
document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
document.getElementById(winPos[i][2]).innerHTML === playerSymbol
) {}
- Nếu điều kiện đánh giá là đúng, thì tất cả các ký hiệu nằm trên một đường thẳng. Bên trong câu lệnh if, hiển thị thông báo cho người dùng. Bạn cũng có thể thay đổi kiểu dáng của phần tử HTML bằng cách thêm một lớp CSS có tên là “win”:
document.getElementById(winPos[i][0]).classList.add("win");
document.getElementById(winPos[i][1]).classList.add("win");
document.getElementById(winPos[i][2]).classList.add("win");
gameEnded = true;setTimeout(function() {
alert(playerSymbol + " wins!");
}, 500); - Thêm lớp CSS “win” này vào tệp “styles.css”. Khi người chơi thắng sẽ đổi màu nền của các ô thắng thành màu vàng:
.win {
background-color: yellow;
} - Gọi hàm checkWin() mỗi khi người chơi có lượt, bên trong trình xử lý sự kiện đã thêm ở các bước trước:
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).addEventListener(
"click",
function() {
if (this.innerHTML === "" && !gameEnded) {
this.innerHTML = playerSymbol;
this.classList.add(playerSymbol.toLowerCase());
checkWin();
if (playerSymbol === "X")
playerSymbol = "O"
else
playerSymbol = "X"
}
}
);
}
Cách đặt lại bảng trò chơi
Khi người chơi đã thắng trò chơi, bạn có thể đặt lại bảng trò chơi. Bạn cũng có thể đặt lại bảng trò chơi trong trường hợp hòa.
- Trong tệp HTML, sau bảng, hãy thêm nút đặt lại:
<button id="reset">Reset</button> - Thêm một số kiểu dáng cho nút đặt lại:
.container {
display: flex;
flex-direction: column;
}#reset {
margin: 48px 40%;
padding: 20px;
} - Trong tệp JavaScript, hãy thêm trình xử lý sự kiện sẽ chạy bất cứ khi nào người dùng nhấp vào nút đặt lại:
document.getElementById("reset").addEventListener(
"click",
function() {}
); - Đối với mỗi ô trong lưới, lấy phần tử HTML bằng cách sử dụng hàm getElementById(). Đặt lại InternalHTML để xóa các ký hiệu “O” và “X” cũng như xóa tất cả các kiểu CSS khác:
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).innerHTML = "";
document.getElementById(i.toString()).classList.remove("x");
document.getElementById(i.toString()).classList.remove("o");
document.getElementById(i.toString()).classList.remove("win");
gameEnded = false;
} - Chạy trò chơi bằng cách mở tệp “index.html” trong trình duyệt web.
- Bắt đầu đặt các ký hiệu “X” và “O” trên lưới. Cố gắng làm cho một trong các biểu tượng giành chiến thắng.
- Nhấn nút đặt lại để đặt lại bảng trò chơi.
Học JavaScript bằng cách làm trò chơi
Bạn có thể tiếp tục cải thiện kỹ năng lập trình của mình bằng cách tạo thêm các dự án bằng JavaScript. Thật dễ dàng để xây dựng các trò chơi và công cụ đơn giản trong môi trường web, sử dụng các công nghệ mở, đa nền tảng như JavaScript và HTML.
Không có cách nào tốt hơn để cải thiện khả năng lập trình của bạn hơn là thực hành viết chương trình!