{"id":711,"date":"2025-04-06T18:44:41","date_gmt":"2025-04-06T10:44:41","guid":{"rendered":"https:\/\/www.livetops.com\/?p=711"},"modified":"2025-10-13T20:34:27","modified_gmt":"2025-10-13T12:34:27","slug":"%e4%bd%bf%e7%94%a8html%e5%ae%9e%e7%8e%b0%e4%ba%95%e5%ad%97%e6%a3%8b%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"https:\/\/www.livetops.com\/en\/archives\/711","title":{"rendered":"Tic-Tac-Toe game using HTML"},"content":{"rendered":"<p><strong>The effect is demonstrated:<\/strong><\/p>\n\n\n\n<iframe loading=\"lazy\" \n    src=\"\/others\/tic-tac-toe.html\" \n    width=\"90%\" \n    height=\"550em\" \n    frameborder=\"0\" \n    allowfullscreen style=\"border: 1px solid #000; border-radius: 10px;\">\n<\/iframe>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"zh-CN\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>\u4e95\u5b57\u68cb\u6e38\u620f&lt;\/title>\n    &lt;style>\n        body {\n            font-family: Arial, sans-serif;\n            background-color: #f4f4f9;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            margin: 0;\n        }\n        .game-container {\n            text-align: center;\n            width: 400px;\n        }\n        .board {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            grid-template-rows: repeat(3, 1fr);\n            gap: 5px;\n            margin-bottom: 20px;\n        }\n        .cell {\n            width: 100px;\n            height: 100px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            background-color: #fff;\n            border: 2px solid #ddd;\n            font-size: 36px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n        }\n        .cell:hover {\n            background-color: #f0f0f0;\n        }\n        .status {\n            font-size: 18px;\n            margin-bottom: 20px;\n        }\n        button {\n            padding: 10px 20px;\n            font-size: 16px;\n            cursor: pointer;\n            border: none;\n            background-color: #007bff;\n            color: #fff;\n            border-radius: 5px;\n            transition: background-color 0.3s;\n        }\n        button:hover {\n            background-color: #0056b3;\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body>\n    &lt;div class=\"game-container\">\n        &lt;h1>\u4e95\u5b57\u68cb\u6e38\u620f&lt;\/h1>\n        &lt;div class=\"status\">\n            &lt;span id=\"gameStatus\">\u73a9\u5bb6 X \u7684\u56de\u5408&lt;\/span>\n        &lt;\/div>\n        &lt;div class=\"board\" id=\"board\">\n            &lt;!-- 9\u4e2a\u683c\u5b50 -->\n            &lt;div class=\"cell\" data-index=\"0\">&lt;\/div>\n            &lt;div class=\"cell\" data-index=\"1\">&lt;\/div>\n            &lt;div class=\"cell\" data-index=\"2\">&lt;\/div>\n            &lt;div class=\"cell\" data-index=\"3\">&lt;\/div>\n            &lt;div class=\"cell\" data-index=\"4\">&lt;\/div>\n            &lt;div class=\"cell\" data-index=\"5\">&lt;\/div>\n            &lt;div class=\"cell\" data-index=\"6\">&lt;\/div>\n            &lt;div class=\"cell\" data-index=\"7\">&lt;\/div>\n            &lt;div class=\"cell\" data-index=\"8\">&lt;\/div>\n        &lt;\/div>\n        &lt;button onclick=\"restartGame()\">\u91cd\u65b0\u5f00\u59cb&lt;\/button>\n    &lt;\/div>\n\n    &lt;script>\n        const board = document.getElementById(\"board\");\n        const gameStatus = document.getElementById(\"gameStatus\");\n        let currentPlayer = \"X\";\n        let gameActive = true;\n        let boardState = &#91;\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"];\n\n        const winningCombinations = &#91;\n            &#91;0, 1, 2],\n            &#91;3, 4, 5],\n            &#91;6, 7, 8],\n            &#91;0, 3, 6],\n            &#91;1, 4, 7],\n            &#91;2, 5, 8],\n            &#91;0, 4, 8],\n            &#91;2, 4, 6]\n        ];\n\n        function handleCellClick(event) {\n            const index = event.target.getAttribute(\"data-index\");\n            if (boardState&#91;index] !== \"\" || !gameActive) return;\n\n            boardState&#91;index] = currentPlayer;\n            event.target.textContent = currentPlayer;\n\n            if (checkWinner()) {\n                gameStatus.textContent = `\u73a9\u5bb6 ${currentPlayer} \u80dc\u5229!`;\n                gameActive = false;\n            } else if (boardState.every(cell => cell !== \"\")) {\n                gameStatus.textContent = \"\u5e73\u5c40!\";\n                gameActive = false;\n            } else {\n                currentPlayer = currentPlayer === \"X\" ? \"O\" : \"X\";\n                gameStatus.textContent = `\u73a9\u5bb6 ${currentPlayer} \u7684\u56de\u5408`;\n            }\n        }\n\n        function checkWinner() {\n            for (let combination of winningCombinations) {\n                const &#91;a, b, c] = combination;\n                if (boardState&#91;a] &amp;&amp; boardState&#91;a] === boardState&#91;b] &amp;&amp; boardState&#91;a] === boardState&#91;c]) {\n                    return true;\n                }\n            }\n            return false;\n        }\n\n        function restartGame() {\n            boardState = &#91;\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"];\n            gameActive = true;\n            currentPlayer = \"X\";\n            gameStatus.textContent = `\u73a9\u5bb6 ${currentPlayer} \u7684\u56de\u5408`;\n\n            const cells = document.querySelectorAll(\".cell\");\n            cells.forEach(cell => {\n                cell.textContent = \"\";\n            });\n        }\n\n        board.addEventListener(\"click\", handleCellClick);\n    &lt;\/script>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Tic-Tac-Toe Principle and Implementation<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Tic-Tac-Toe is a classic two-player board game in which players take turns marking their own symbols (usually \"X\" and \"O\") on a 3\u00d73 board by first placing The first player to place three identical symbols in any row, column or diagonal in succession wins. If all squares are filled and no player wins, the game ends in a draw. In this article, we will introduce how to implement a Tic-Tac-Toe mini-game using pure HTML and JavaScript, analyzing the principles behind it and how to implement it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-left\">1.&nbsp;<strong>HTML structure<\/strong><\/h4>\n\n\n\n<p class=\"has-text-align-left\">HTML serves as the basic structure of a web page and is primarily responsible for the layout of the interface. In this tic-tac-toe game, we use a<code>div<\/code>container to contain all the game elements, including the board, game state, and control buttons. The board itself consists of a container with nine child elements containing<code>div<\/code>consists of containers, with each sub-element representing a square on the board. Each lattice is represented by the<code>data-index<\/code>attribute to identify its location for subsequent event handling.<\/p>\n\n\n\n<p class=\"has-text-align-left\">In addition to the board, the page has a<code>status<\/code>An area that displays the current game status, such as \"Player X's turn\" or \"Player X's victory\". There is also a \"Restart\" button that can be clicked to reset the game.<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-left\">2.&nbsp;<strong>CSS style<\/strong><\/h4>\n\n\n\n<p class=\"has-text-align-left\">To enhance the visualization of the game, CSS was used to style the game interface. The board consists of a 3\u00d73 grid using CSS's<code>grid<\/code>Layout implementation, each grid fixed size, and set the appropriate border and background color, make the whole board looks simple and beautiful. At the same time, add a hover effect to the grid, when the mouse moves to the top will change the background color, in order to increase the user's interactive experience.<\/p>\n\n\n\n<p class=\"has-text-align-left\">The game also has stylized buttons that change the background color when clicked, enhancing the interactivity of the game.<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-left\">3.&nbsp;<strong>JavaScript Logic<\/strong><\/h4>\n\n\n\n<p>JavaScript serves as the core logic part of the game and is responsible for handling the game's state changes and player interactions. The game is implemented through a program called<code>boardState<\/code>array to keep track of the state of each square. Each element of the array represents a square on the board.<code>X<\/code>maybe<code>o<\/code>Indicates that the lattice has been marked. If the grid is empty, the value in the array is the empty string.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Player's Rotation:<\/strong> The game starts with player \"X\" and each time he clicks on an empty square, the current player's marker is added to that square, after which it is the other player's turn. The player switches between<code>currentPlayer<\/code>to achieve rotation.<\/li>\n\n\n\n<li><strong>Winning Decision:<\/strong> Each time a player makes a marker, the system checks to see if the current state of the board meets the conditions for a player to win. This is accomplished by<code>Winning Combinations<\/code>An array that holds all possible winning lines (horizontal, vertical and diagonal), which are checked to see if they have been occupied after each player mark. If all three squares of a line are marked by the same player, the game ends and that player is declared the winner.<\/li>\n\n\n\n<li><strong>Tie-breaker ruling:<\/strong> If all squares are filled and no player wins, the game is ruled a draw.<\/li>\n\n\n\n<li><strong>Starting over:<\/strong> The game provides a \"Restart\" button which, when clicked, resets the state of the board and its display and restarts the game.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-left\">4.&nbsp;<strong>Code implementation process<\/strong><\/h4>\n\n\n\n<p class=\"has-text-align-left\">During the code implementation, we handle every action of the player by adding a click event listener. When a player clicks on a grid, it first determines whether the grid has been marked, and if not, it updates the state of the grid and checks the win\/loss situation of the game. If no one wins and the board is not full, the players are exchanged.<\/p>\n\n\n\n<p class=\"has-text-align-left\">In addition, by examining<code>boardState<\/code>Whether the array is completely filled and there is no winner determines whether a tie has occurred. Once the game is over, the user can't continue, avoiding pointless clicks.<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-left\">5.&nbsp;<strong>summarize<\/strong><\/h4>\n\n\n\n<p class=\"has-text-align-left\">This Tic Tac Toe game is fully functional with simple HTML, CSS and JavaScript. HTML takes care of the layout and structure, CSS takes care of beautifying the interface, and JavaScript handles the game logic and interaction. Through simple arrays and event handling, we have implemented player alternation, win judgment, draw judgment, and game reset functions. This game can not only be used as an entertainment project, but also help beginners to better understand DOM manipulation, event listening, array processing and basic UI design in front-end development.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u6548\u679c\u5c55\u793a\uff1a \u4e95\u5b57\u68cb\u6e38\u620f\u539f\u7406\u4e0e\u5b9e\u73b0 \u4e95\u5b57\u68cb\uff08Tic-Tac-Toe\uff09\u662f\u4e00\u6b3e\u7ecf\u5178\u7684\u4e24\u4eba\u68cb\u76d8\u6e38\u620f\uff0c\u73a9\u5bb6\u901a\u8fc7\u8f6e\u6d41\u57283&#038; [&hellip;]<\/p>","protected":false},"author":1,"featured_media":1279,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274],"tags":[301,306,307],"class_list":["post-711","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-web","tag-tic-tac-toe","tag-code"],"_links":{"self":[{"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/posts\/711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/comments?post=711"}],"version-history":[{"count":1,"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/posts\/711\/revisions"}],"predecessor-version":[{"id":1396,"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/posts\/711\/revisions\/1396"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/media\/1279"}],"wp:attachment":[{"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/media?parent=711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/categories?post=711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.livetops.com\/en\/wp-json\/wp\/v2\/tags?post=711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}