井字遊戲 | 程式專案 | 橘蘋學習平台

{"id":565156,"student_id":74183,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\r\\n\u003chtml\u003e\\r\\n\u003chead\u003e\\r\\n  \u003ctitle\u003e井字遊戲\u003c/title\u003e\\r\\n  \u003cstyle\u003e\\r\\n    body {\\r\\n      text-align: center;\\r\\n      font-family: Arial, sans-serif;\\r\\n    }\\r\\n\\r\\n    .board {\\r\\n      display: grid;\\r\\n      grid-template-columns: repeat(3, 1fr);\\r\\n      grid-gap: 10px;\\r\\n      margin-top: 20px;\\r\\n    }\\r\\n\\r\\n    .cell {\\r\\n      display: flex;\\r\\n      align-items: center;\\r\\n      justify-content: center;\\r\\n      width: 100px;\\r\\n      height: 100px;\\r\\n      border: 1px solid #000;\\r\\n      font-size: 60px;\\r\\n      cursor: pointer;\\r\\n    }\\r\\n\\r\\n    .message {\\r\\n      margin-top: 20px;\\r\\n      font-size: 20px;\\r\\n      font-weight: bold;\\r\\n    }\\r\\n\\r\\n    .highlight {\\r\\n      background-color: yellow;\\r\\n    }\\r\\n  \u003c/style\u003e\\r\\n\u003c/head\u003e\\r\\n\u003cbody\u003e\\r\\n  \u003ch1\u003e井字遊戲\u003c/h1\u003e\\r\\n  \u003cdiv class=\\\"board\\\"\u003e\\r\\n    \u003cdiv class=\\\"cell\\\"\u003e\u003c/div\u003e\\r\\n    \u003cdiv class=\\\"cell\\\"\u003e\u003c/div\u003e\\r\\n    \u003cdiv class=\\\"cell\\\"\u003e\u003c/div\u003e\\r\\n    \u003cdiv class=\\\"cell\\\"\u003e\u003c/div\u003e\\r\\n    \u003cdiv class=\\\"cell\\\"\u003e\u003c/div\u003e\\r\\n    \u003cdiv class=\\\"cell\\\"\u003e\u003c/div\u003e\\r\\n    \u003cdiv class=\\\"cell\\\"\u003e\u003c/div\u003e\\r\\n    \u003cdiv class=\\\"cell\\\"\u003e\u003c/div\u003e\\r\\n    \u003cdiv class=\\\"cell\\\"\u003e\u003c/div\u003e\\r\\n  \u003c/div\u003e\\r\\n  \u003cdiv class=\\\"message\\\"\u003e\u003c/div\u003e\\r\\n\\r\\n  \u003cscript\u003e\\r\\n    var cells = document.getElementsByClassName('cell');\\r\\n    var message = document.querySelector('.message');\\r\\n    var currentPlayer = 'X';\\r\\n    var isGameActive = true;\\r\\n\\r\\n    function handleCellClick() {\\r\\n      if (!isGameActive || this.textContent !== '') {\\r\\n        return;\\r\\n      }\\r\\n      this.textContent = currentPlayer;\\r\\n      checkWinningCondition();\\r\\n      togglePlayer();\\r\\n    }\\r\\n\\r\\n    function togglePlayer() {\\r\\n      currentPlayer = (currentPlayer === 'X') ? 'O' : 'X';\\r\\n    }\\r\\n\\r\\n    function checkWinningCondition() {\\r\\n      var winningCombinations = [\\r\\n        [0, 1, 2],\\r\\n        [3, 4, 5],\\r\\n        [6, 7, 8],\\r\\n        [0, 3, 6],\\r\\n        [1, 4, 7],\\r\\n        [2, 5, 8],\\r\\n        [0, 4, 8],\\r\\n        [2, 4, 6]\\r\\n      ];\\r\\n\\r\\n      for (var i = 0; i \u003c winningCombinations.length; i++) {\\r\\n        var [a, b, c] = winningCombinations[i];\\r\\n        if (cells[a].textContent === currentPlayer \u0026\u0026\\r\\n            cells[b].textContent === currentPlayer \u0026\u0026\\r\\n            cells[c].textContent === currentPlayer) {\\r\\n          isGameActive = false;\\r\\n          message.textContent = currentPlayer + '玩家勝利！';\\r\\n          highlightWinningCells([a, b, c]);\\r\\n          break;\\r\\n        }\\r\\n      }\\r\\n\\r\\n      if (isBoardFull() \u0026\u0026 isGameActive) {\\r\\n        isGameActive = false;\\r\\n        message.textContent = '遊戲結束，平手！';\\r\\n      }\\r\\n    }\\r\\n\\r\\n    function highlightWinningCells(cellsToHighlight) {\\r\\n      for (var i = 0; i \u003c cellsToHighlight.length; i++) {\\r\\n        cells[cellsToHighlight[i]].classList.add('highlight');\\r\\n      }\\r\\n    }\\r\\n\\r\\n    function isBoardFull() {\\r\\n      for (var i = 0; i \u003c cells.length; i++) {\\r\\n        if (cells[i].textContent === '') {\\r\\n          return false;\\r\\n        }\\r\\n      }\\r\\n      return true;\\r\\n    }\\r\\n\\r\\n    for (var i = 0; i \u003c cells.length; i++) {\\r\\n      cells[i].addEventListener('click', handleCellClick);\\r\\n    }\\r\\n  \u003c/script\u003e\\r\\n\u003c/body\u003e\\r\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2023-07-14T10:34:28.561+08:00","updated_at":"2023-07-14T10:49:54.841+08:00","name":"井字遊戲","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/565156/e18214cc49716b1d53c6230902ad71f6.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":69,"hashid":"meys634zv","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}