Làm cách nào để kiểm tra người chiến thắng trong JavaScript tic tac toe?

Question

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

Nội dung chính Show

1. vẽ bảng
2. Định nghĩa các biến toàn cục
3. Cách người chơi di chuyển
4. Thêm logic để thay đổi lượt
5. Xác thực chiến thắng
6. Khởi động lại trò chơi
Phần kết luận
Làm cách nào để xác định người chiến thắng tic tac toe JavaScript?
Có thể có một người chiến thắng trong tic tac toe?
JavaScript có thể tạo ra tic tac toe không?
Có bao nhiêu kết hợp chiến thắng trong tic tac toe?

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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Tic-Tac-Toetitle>
head>
<body>
    <main class="board">
        <div class="cell" data-cell="0">div>
        <div class="cell" data-cell="1">div>
        <div class="cell" data-cell="2">div>
        <div class="cell" data-cell="3">div>
        <div class="cell" data-cell="4">div>
        <div class="cell" data-cell="5">div>
        <div class="cell" data-cell="6">div>
        <div class="cell" data-cell="7">div>
        <div class="cell" data-cell="8">div>

        <div id="message">X's turndiv>
        <button id="restart">Restartbutton>
    main>
    
    <script src="./script.js">script>
body>
html>

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

Làm cách nào để kiểm tra người chiến thắng trong JavaScript tic tac toe?

ô được đánh số

Để 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ờ

Làm cách nào để xác định người chiến thắng tic tac toe JavaScript?

Tic-Tac-Toe là trò chơi dành cho hai người chơi, trong đó người chơi điền vào chín ô chữ nhật trống trên bàn bằng chữ X hoặc chữ O khi đến lượt của họ. Sau khi ai đó sắp xếp thành công biển báo của họ theo chiều dọc hoặc chiều ngang mà không bị gián đoạn , người chơi đó sẽ thắng.

Có thể có một người chiến thắng trong tic tac toe?

Tic-tac-toe là trò chơi cổ điển thường được trẻ nhỏ chơi và nổi tiếng với luật chơi đơn giản. Nó được chơi bởi hai người thay phiên nhau đánh dấu X hoặc O trên lưới 3x3. Người đầu tiên đánh dấu ba dấu hiệu của mình theo hàng ngang, dọc hoặc chéo là người chiến thắng .

JavaScript có thể tạo ra tic tac toe không?

Tic Tac Toe là trò chơi hai người chơi phổ biến có thể được triển khai bằng JavaScript . Trò chơi được chơi trên lưới 3x3 và mục tiêu là đặt ba biểu tượng của bạn ("X" hoặc "O") thành một hàng, theo chiều ngang, chiều dọc hoặc đường chéo.

Có bao nhiêu kết hợp chiến thắng trong tic tac toe?

Có tám kết hợp chiến thắng trong tic-tac-toe. Bằng cách nhìn vào bảng trước của chúng tôi. Sau đó, chúng tôi có thể lập danh sách tất cả các kết hợp chiến thắng của nó hoặc gọi tắt là bộ ba. Hãy dành một phút để thuyết phục bản thân rằng danh sách này là tất cả những gì bạn cần biết về vị trí tương ứng trong hội đồng quản trị.

programming javascript

Làm cách nào để kiểm tra người chiến thắng trong JavaScript tic tac toe?

1. vẽ bảng

2. Định nghĩa các biến toàn cục

3. Cách người chơi di chuyển

4. Thêm logic để thay đổi lượt

5. Xác thực chiến thắng

6. Khởi động lại trò chơi

Phần kết luận

Làm cách nào để xác định người chiến thắng tic tac toe JavaScript?

Có thể có một người chiến thắng trong tic tac toe?

JavaScript có thể tạo ra tic tac toe không?

Có bao nhiêu kết hợp chiến thắng trong tic tac toe?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội