Học JavaScript bằng cách xây dựng trò chơi là một cách rất hiệu quả để cải thiện logic và hiểu biết của bạn về tính tương tác của JavaScript. Tôi sẽ chỉ cho bạn cách xây dựng một trò chơi Tic Tac Toe đơn giản bằng JavaScript. Đây là bản demo của trò chơi mà chúng tôi sẽ xây dựng. Tôi khuyên bạn nên dùng thử bản demo trước để biết những gì chúng tôi đang xây dựng vì cách triển khai của mỗi hướng dẫn có thể khác nhau. Đối với bạn, những người thích xem mã trực tiếp, đây là repo mã GitHub của tôi
Chúng ta có thể chia nhỏ quy trình thành các bước bên dưới
- vẽ bảng
- Định nghĩa các biến toàn cục
- Cách người chơi di chuyển
- Thêm logic để thay đổi lượt
- Xác thực chiến thắng
- Khởi động lại trò chơi
1. vẽ bảng
Trước tiên, chúng ta phải xây dựng giao diện nơi chúng ta sẽ chơi trò chơi. Vì chúng tôi đang tập trung vào JavaScript, nên tôi đang làm cho HTML và CSS đơn giản nhất có thể
Ở đây chúng tôi đang tạo mã cấu trúc HTML cơ bản [bao gồm tham chiếu đến tệp CSS và JS của bạn]. Sau đó, chúng tôi tạo một thẻ chính với lớp bảng để hiển thị trò chơi
Bên trong bảng, chúng tôi đang tạo các ô để đặt X và Os. Chỉ cần để chúng trống bây giờ. Chúng tôi sẽ lấp đầy chúng bằng JS. Chúng tôi cũng cung cấp cho họ một lớp ô để tạo kiểu cho chúng và thuộc tính ô dữ liệu để xác định chỉ mục của chúng là gì. [Nếu bạn giống tôi và đang bối rối về ô dữ liệu là gì, bạn có thể tìm hiểu về nó trên bài đăng của CSS-Trick về thuộc tính data-*]
Một lần chạm vào HTML, chúng tôi sẽ thêm một div để hiển thị thông báo về lượt chơi hoặc kết quả trò chơi và cả nút khởi động lại bên dưới nó
Đây là mã triển khai giải thích của tôi ở trên
HTML
DOCTYPE html>
Tic-Tac-Toe
X's turn
Restart
Bây giờ chúng tôi đã đặt ra HTML, chúng tôi sẽ bắt đầu tạo kiểu cho trò chơi. Đây là mã và tôi sẽ giải thích trực tiếp trong phần bình luận của mã
CSS
/* remove margin so the body has full width */
body {
margin: 0;
}
/* the styling of the board. Grid to style the 3x3 boxes easily */
.board {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: repeat[3, 100px];
grid-template-rows: repeat[3, 100px];
justify-content: center;
align-content: center;
}
/* the individual boxes where X and O are placed. */
.cell {
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 50px;
}
/* display the message and restart button. takes 3 grid that's why there are grid colum start and end */
#message, #restart {
grid-column-start: 1;
grid-column-end: 4;
margin: auto;
margin-top: 10px;
}
/* specifying the size of the message */
#message {
font-size: xx-large;
font-weight: bold;
}
2. Định nghĩa các biến toàn cục
Bây giờ chúng ta đang đi vào phần JavaScript. Chúng tôi đang xác định tất cả các biến toàn cầu ở trên cùng. Dưới đây là các biến chúng ta cần xác định
- xoay. cho biết đến lượt ai. X hoặc O
- ô, nhắn tin và khởi động lại. các phần tử của bộ chọn được chỉ định
- bước. để theo dõi các ô mà mỗi người chơi đã chiếm
- chiến thắng. các mẫu để giành chiến thắng [thêm về điều này sau]
JavaScript
let turn = 'X';
let cells = document.querySelectorAll['[data-cell]'];
let message = document.querySelector['#message'];
let restart = document.querySelector['#restart'];
let steps = {
X: [],
O: []
}
const winConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
3. Cách người chơi di chuyển
Bây giờ chúng ta đang đi vào phần thú vị, logic. Tôi đã mất một thời gian để tìm ra các bước này. Chúng tôi sẽ tìm ra cách người chơi có thể di chuyển, cách họ đặt X và O
Chúng ta phải thêm một người nghe vào mỗi ô
JavaScript
cells.forEach[cell => {
cell.addEventListener["click", [] => move[cell] ];
}];
Chúng tôi chỉ lặp qua các ô mà chúng tôi đã xác định trước đó và thêm trình nghe vào từng ô. Bạn nhận thấy có một chức năng di chuyển ở đó, đừng lo lắng, chúng tôi sẽ thực hiện ngay lập tức
JavaScript
function move[cell] {
cell.innerHTML = turn; // marking the cell with X or O based on turn
cell.style.pointerEvents = 'none'; // making that cell not clickable so it can't be changed
// getting the index of the cell and pushing it into their respective step tracker
let cellIndex = parseInt[cell.getAttribute["data-cell"]];
if [turn === 'X'] {
steps.X.push[cellIndex];
} else {
steps.O.push[cellIndex];
}
// function to change the turn after a move is done. Explained later
changeTurn[];
}
4. Thêm logic để thay đổi lượt
Đối với bước này, có 2 khối mã. Chức năng changeTurn và stopGame. Tôi sẽ giải thích mã với ý kiến
JavaScript
function changeTurn[] {
// check if there is a winner already. Explained later. It returns eaither the winner or null
let winner = validateWin[];
if [winner] {
// if there is a winner, stop the game. Function explained later
stopGame[`${winner}'s win!`];
} else if [!winner && steps.X.length + steps.O.length === 9] {
// if the total number of steps is 9, it's a draw, stop the game
stopGame['Draw!'];
} else {
// if the game is not done, change the turn, if it;s X, change to O and the reverse
if [turn === 'X'] {
turn = 'O';
} else {
turn = 'X';
}
// display whose turn it is
message.innerHTML = `${turn}'s turn`;
}
}
function stopGame[msg] {
message.innerHTML = msg; // display a win or a draw based on the parameter
// make all cells not clickable
cells.forEach[cell => {
cell.style.pointerEvents = 'none';
}];
}
5. Xác thực chiến thắng
Hãy nhớ winConditions mà chúng tôi đã xác định trước đó, tôi sẽ giải thích nó ngay bây giờ. Để giành chiến thắng trong tic tac toe, chúng ta phải đánh dấu 3 ô tạo thành một đường thẳng. Nếu đánh số ô như hình bên dưới ta thấy để thắng ta cần đánh dấu vào các đường thẳng nằm ngang [[0,1,2],[3,4,5],[6,7,8]], . Đó là nội dung của winConditions
Để kiểm tra xem có người chiến thắng hay không, chúng tôi sử dụng hàm validateWin
JavaScript
function validateWin[] {
let win = null;
let winner = null;
if [turn === 'X'] {
win = winConditions.some[winCondition => {
return winCondition.every[condition => steps.X.includes[condition]];
}];
if [win] winner = 'X';
} else if [turn === 'O'] {
win = winConditions.some[winCondition => {
return winCondition.every[condition => steps.O.includes[condition]];
}];
if [win] winner = 'O';
}
return winner;
}
Để kiểm tra xem có người chiến thắng hay không, trước tiên chúng tôi kiểm tra lượt của ai. Nếu đến lượt của X, chúng tôi kiểm tra xem X có thắng không. Chúng tôi lặp qua winConditions và xem liệu có ít nhất 1 mẫu khớp với các bước X đã thực hiện hay không [Ví dụ: X đã lấy các ô cho [0,4,6,8] và chúng tôi có thể thấy nó bao gồm [0,6,8 . Và điều tương tự cũng được thực hiện nếu đến lượt O. Nếu bây giờ chưa có người chiến thắng, nó sẽ chỉ trả về null
Tại thời điểm này, trò chơi của bạn sẽ có thể chơi được cho đến khi có kết quả thắng hoặc hòa. Bây giờ, chúng ta chỉ cần làm cho nó có thể khởi động lại
6. Khởi động lại trò chơi
Để khởi động lại trò chơi, chúng ta chỉ cần thêm một trình lắng nghe vào nút khởi động lại và một hàm khởi động lại sẽ trả tất cả các biến toàn cầu về điều kiện bắt đầu của chúng
JavaScript
restart.addEventListener["click", restartGame];
function restartGame[] {
steps.O = [];
steps.X = [];
turn = 'X';
message.innerHTML = "X's turn";
cells.forEach[cell => {
cell.innerHTML = null;
cell.style.pointerEvents = 'auto';
}];
}
chúc mừng. Bây giờ trò chơi của bạn đã hoàn tất và hoàn toàn có thể chơi được
Phần kết luận
Đó là các bước và mã bạn có thể sử dụng để xây dựng Tic Tac Toe trong JavaScript. Nếu bạn tìm thấy một cách tốt hơn để làm điều đó, hãy cho tôi biết trong phần bình luận
Dưới đây là một số điều bạn có thể làm để cải thiện trò chơi và kỹ năng của mình
- Tạo phiên bản 4×4 hoặc 5×5
- Tạo một phiên bản để chơi với bot
- Cho phép chọn người chơi
- Tạo một thuật toán hiệu quả hơn
Nếu muốn lưu trữ kết quả của mình, bạn có thể lưu trữ miễn phí trên Trang GitHub hoặc nếu muốn kết quả trông chuyên nghiệp hơn, bạn có thể lưu trữ kết quả đó trên Cloudways. Nó là một dịch vụ lưu trữ đám mây được quản lý tương thích, nhanh chóng và đáng tin cậy. Đi trước và kiểm tra xem nó ra
Đối với những người muốn nâng cao kỹ năng JavaScript của mình, dù là đào sâu hay tìm hiểu mẫu số 0, tôi khuyên bạn nên dùng thử Codecademy. Có rất nhiều bài học JavaScript mà bạn có thể học theo cách có cấu trúc và tương tác. Bạn có thể học từ những tài liệu cơ bản nhất đến những thứ nâng cao và thậm chí chuẩn bị cho các cuộc phỏng vấn kỹ thuật. Đi thử ngay bây giờ