佈署你的程式到Infinity free host

步驟一：

準備好你的程式，例：井字遊戲(單一個檔案，含html, css, JavaScript)，將這個檔案放在你電腦上的資料夾。

index.html

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic-Tac-Toe 井字遊戲</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
        }

        h1 {
            color: #333;
        }

        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }

        #board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 5px;
        }

        .cell {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            background-color: white;
            border: 2px solid #000;
            cursor: pointer;
        }

        .cell.x {
            color: green;
        }

        .cell.o {
            color: darkred;
        }

        .cell:hover {
            background-color: #ddd;
        }

        #status {
            font-size: 1.2em;
            margin-top: 10px;
        }

        #reset {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 1em;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

        #reset:hover {
            background-color: #0056b3;
        }        
    </style>
</head>
<body>
    <h1>Tic-Tac-Toe 井字遊戲</h1>
    <div class="game-container">
        <div id="board">
            <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>
        <p id="status">玩家 X 的回合</p>
        <button id="reset">重新開始</button>
    </div>
    <script>
const board = document.getElementById("board");
const statusText = document.getElementById("status");
const resetButton = document.getElementById("reset");
const cells = document.querySelectorAll(".cell");

let currentPlayer = "X";
let boardState = ["", "", "", "", "", "", "", "", ""];
let gameActive = true;

const winPatterns = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8], // 橫排
    [0, 3, 6], [1, 4, 7], [2, 5, 8], // 直排
    [0, 4, 8], [2, 4, 6]             // 斜線
];

// 監聽玩家點擊格子
cells.forEach(cell => {
    cell.addEventListener("click", handleCellClick);
});

function handleCellClick(event) {
    const index = event.target.dataset.index;
    
    if (boardState[index] !== "" || !gameActive) return;

    boardState[index] = currentPlayer;
    event.target.textContent = currentPlayer;
    event.target.classList.add(currentPlayer === "X" ? "x" : "o");

    if (checkWin(currentPlayer)) {
        statusText.textContent = `玩家 ${currentPlayer} 獲勝！`;
        gameActive = false;
        return;
    }

    if (boardState.every(cell => cell !== "")) {
        statusText.textContent = "平局！";
        gameActive = false;
        return;
    }

    currentPlayer = currentPlayer === "X" ? "O" : "X";
    statusText.textContent = `玩家 ${currentPlayer} 的回合`;
}

function checkWin(player) {
    return winPatterns.some(pattern => 
        pattern.every(index => boardState[index] === player)
    );
}

// 重新開始遊戲
resetButton.addEventListener("click", () => {
    boardState = ["", "", "", "", "", "", "", "", ""];
    gameActive = true;
    currentPlayer = "X";
    statusText.textContent = "玩家 X 的回合";
    cells.forEach(cell => {
        cell.textContent = "";
        cell.classList.remove("x", "o");
    });
});        
    </script>
</body>
</html>