Cách tạo trò chơi Tic Tac Toe bằng HTML, CSS và JavaScript

Tôi sẽ cố gắng viết mã trò chơi tic-tac-toe bằng các ngôn ngữ HTML, CSS và JavaScript. Tình huống kết thúc của trò chơi sẽ như sau:

Trước hết, tôi muốn cung cấp một số thông tin về trò chơi.

Tic-tac-toe là gì? Các quy tắc của trò chơi là gì?

• Nó là một trò chơi cho hai người chơi.
• Nó thường được chơi trên bàn 3x3, nhưng nó có thể rộng hơn. Tôi sẽ lấy bảng 3x3 làm cơ sở.
• Người chơi bắt đầu điền vào ô trống đầu tiên bằng cách gõ 'X' và người chơi khác 'O'.
• Người chơi thắng trò chơi khi họ XXX hoặc OOO theo hàng, cột hoặc đường chéo.

• Nếu tất cả các ô vuông được lấp đầy và được cung cấp một ô từ các điều kiện trên thì trò chơi hòa.

HTML:

Tôi đã thêm thẻ h1 vào div có id là tiêu đề

Để tạo bảng 3*3 cần thiết cho trò chơi, tôi đã tạo một div có id là bảng.

Tôi đã tạo từng hình vuông trên bảng trong một div có lớp là hình vuông. Tôi đã tạo một id cho mỗi ô vuông.

Để có thể bắt đầu lại trò chơi, tôi đã thêm một đầu vào có giá trị loại là một nút. Tôi đã tạo cái này bên trong div có id là endGame. Màn hình trò chơi sẽ đặt lại khi nhấp vào nút. Vì vậy, tôi đã thêm chức năng vào sự kiện onclick để gọi chức năng tôi đã tạo trong javascript.

<!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">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Roboto+Serif&display=swap" rel="stylesheet">
</head>
<body>
    <div id="title">
        <h1>Tic Tac Toe</h1>
    </div>
    <div id="board">
        <div class="square" id="square0"></div>
        <div class="square" id="square1"></div>
        <div class="square" id="square2"></div>
        <div class="square" id="square3"></div>
        <div class="square" id="square4"></div>
        <div class="square" id="square5"></div>
        <div class="square" id="square6"></div>
        <div class="square" id="square7"></div>
        <div class="square" id="square8"></div>
    </div>  
    <div id="endGame">
        <input type="button" value="Restart" id="restartButton" onclick="restartButton()"/>
    </div>
    <script src="game.js"></script>
</body>
</html>

Tôi đặt tiêu đề ở giữa trang.

Tôi đặt div có id là bảng ở giữa trang. Tôi đặt thuộc tính lề cho việc này.

Tôi đặt thuộc tính chiều rộng và chiều cao của div có id là bảng.

Bảng bao gồm 9 ô vuông, tôi đã tạo lưới thuộc tính hiển thị để tạo ra nó. Tôi đã tạo 9 khung với cài đặt cột mẫu Lưới. Tôi đặt khoảng cách giữa các lưới bằng thuộc tính grid-gap.

Tôi đặt thuộc tính chiều rộng và chiều cao cho mỗi hình vuông. Tôi đã thêm thuộc tính đường viền vào các ô vuông này. Tôi đã thêm màu nền cho các ô vuông. Tôi đặt vị trí của nó bằng thuộc tính hiển thị. Tôi đã tạo ra sự thay đổi màu sắc khi di chuột qua các ô vuông. Tôi đã sử dụng tính năng di chuột cho việc này.

Tôi đặt thuộc tính hiển thị và các kiểu khác thành thuộc tính có id là nút khởi động lại. Ngoài ra, tôi đã sử dụng tính năng di chuột.

body {  
    font-family: 'Poppins', sans-serif;
    color: #000000;
}

h1 {
    text-align: center;
}

#board {
    margin-left: auto;
    margin-right: auto;
    width: 375px;
    height: 375px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
}

.square {
    width: 120px;
    height: 120px;
    border: 1px solid #D3D3D3;
    background-color: #F5F5F5;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.square:hover {
    background-color: #FFFFE0;
}

#restartButton {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    width: 150px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 40px;
    font-size: 18px;
}

#restartButton:hover {
    background-color: #000000;
    color: #FFFFFF;
}

Tôi đã sử dụng các tính năng HTML DOM để xử lý các thành phần tôi sử dụng trong HTML thông qua JavaScript.

Để truy cập div với id của bảng và div với ô vuông lớp trong tệp HTML, tôi đã nhận chúng bằng cách gán chúng cho các biến có thẻ DOM tương ứng.

Tôi đã tạo một chuỗi có tên là "người chơi" cho trò chơi. Các phần tử của mảng là X và O.

Vì X là người đầu tiên bắt đầu trò chơi nên tôi đã chỉ định người chơi[0] cho biến currentPlayer.

const board = document.getElementById('board')
const squares = document.getElementsByClassName('square')
const players = ['X', 'O']
let currentPlayer = players[0]

const endMessage = document.createElement('h2')
endMessage.textContent = `X's turn!`
endMessage.style.marginTop = '30px'
endMessage.style.textAlign='center'
board.after(endMessage)

const winning_combinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
]

function checkWin(currentPlayer) {
    for(let i = 0; i < winning_combinations.length; i++){
        const [a, b, c] = winning_combinations[i]
        if(squares[a].textContent === currentPlayer && squares[b].textContent === currentPlayer && squares[c].textContent === currentPlayer){
            return true
        }
    }
    return false
}

function checkTie(){
    for(let i = 0; i < squares.length; i++) {
        if(squares[i].textContent === '') {
            return false;
        }
    }
    return true
}

function restartButton() {
    for(let i = 0; i < squares.length; i++) {
        squares[i].textContent = ""
    }
    endMessage.textContent=`X's turn!`
    currentPlayer = players[0]
}

for(let i = 0; i < squares.length; i++){
    squares[i].addEventListener('click', () => {
        if(squares[i].textContent !== ''){
            return
        }
        squares[i].textContent = currentPlayer
        if(checkWin(currentPlayer)) {
            endMessage.textContent=`Game over! ${currentPlayer} wins!`
            return
        }
        if(checkTie()) {
            endMessage.textContent= `Game is tied!`
            return
        }
        currentPlayer = (currentPlayer === players[0]) ? players[1] : players[0] 
        if(currentPlayer == players[0]) {
            endMessage.textContent= `X's turn!`
        } else {
            endMessage.textContent= `O's turn!`
        }     
    })   
}

const board = document.getElementById('board')
const squares = document.getElementsByClassName('square')
const players = ['X', 'O']
let currentPlayer = players[0]
const endMessage = document.createElement('h2')
endMessage.textContent = `X's turn!`
endMessage.style.marginTop = '30px'
endMessage.style.textAlign='center'
board.after(endMessage)

const winning_combinations = [
    [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(let i = 0; i < squares.length; i++){
    squares[i].addEventListener('click', () => {
        if(squares[i].textContent !== ''){
            return
        }
        squares[i].textContent = currentPlayer
        if(checkWin(currentPlayer)) {
            endMessage.textContent=`Game over! ${currentPlayer} wins!`
            return
        }
        if(checkTie()) {
            endMessage.textContent= `Game is tied!`
            return
        }
        currentPlayer = (currentPlayer === players[0]) ? players[1] : players[0] 
        if(currentPlayer == players[0]) {
            endMessage.textContent= `X's turn!`
        } else {
            endMessage.textContent= `O's turn!`
        }     
    })   
}

function checkWin(currentPlayer) {
    for(let i = 0; i < winning_combinations.length; i++){
        const [a, b, c] = winning_combinations[i]
        if(squares[a].textContent === currentPlayer && squares[b].textContent === currentPlayer && squares[c].textContent === currentPlayer){
            return true
        }
    }
    return false
}

function checkTie(){
    for(let i = 0; i < squares.length; i++) {
        if(squares[i].textContent === '') {
            return false;
        }
    }
    return true
}

function restartButton() {
    for(let i = 0; i < squares.length; i++) {
        squares[i].textContent = ""
    }
    endMessage.textContent=`X's turn!`
    currentPlayer = players[0]
}

Tôi đã cố gắng giải thích từng bước tic-tac-toe bằng HTML, CSS và JavaScript. Tôi hy vọng nó hữu ích. Cảm ơn bạn đã đọc.