Click here for free DL of the app version that can save data.

No:1339

195

←

Prev Next

→

adult video
Developer User3313｜Date and time 23/6/18 11:27:00
Build time 41.326 sec｜Game capacity 5.419KB｜

Script

じんせいげー

もう一度遊ぶ
［ゲームの概要］ Tic Tac Toe（三目並べ）をスマホで遊ぶことができます。先手はX、後手はOで、どちらかが3つ並べたら勝利です。ただし、すべてのマスが埋まっても勝敗が決まらなければ引き分けとなります。再度遊ぶには「もう一度遊ぶ」をクリックしてください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>じんせいげー</title>
      <style>
         body {
            font-size: 2rem;
            text-align: center;
         }
         #board {
            margin: auto;
            width: 90vw;
            height: 90vw;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5vw;
         }
         .square {
            width: 30%;
            padding: 2rem;
            background-color: #eee;
            border-radius: 1rem;
            transition: all 0.2s;
            cursor: pointer;
            font-size: 5rem;
            box-shadow: 1rem 1rem 1rem #999;
         }
         .square:hover {
            transform: scale(1.05);
         }
         .active {
            background-color: #c9cacc;
            box-shadow: none;
         }
         #message {
            margin-top: 2rem;
            font-size: 3rem;
         }
         #restart {
            margin-top: 2rem;
            background-color: #5cb85c;
            color: #fff;
            padding: 1rem 2rem;
            border-radius: 1rem;
            font-size: 2rem;
            text-decoration: none;
            box-shadow: 1rem 1rem 1rem #999;
            transition: all 0.2s;
         }
         #restart:hover {
            transform: scale(1.05);
         }
      </style>
   </head>
   <body>
      <h1>じんせいげー</h1>
      <div id="board"></div>
      <div id="message"></div>
      <a href="" id="restart">もう一度遊ぶ</a>
      <script>
         const board = document.getElementById('board');
         const squares = Array.from(document.getElementsByClassName('square'));
         const message = document.getElementById('message');
         const restart = document.getElementById('restart');
         const ROWS = 3;
         const COLS = 3;
         let turn = 'X';
         let boardState = Array.from(Array(ROWS), () => Array(COLS).fill(''));
         
         function drawBoard() {
            for (let i = 0; i < ROWS * COLS; i++) {
               const square = document.createElement('div');
               square.className = 'square';
               square.textContent = '';
               board.appendChild(square);
            }
            
            squares.forEach((square, idx) => {
               square.addEventListener('click', () => {
                  if (boardState[Math.floor(idx / COLS)][idx % COLS] === '') {
                     boardState[Math.floor(idx / COLS)][idx % COLS] = turn;
                     square.textContent = turn;
                     square.classList.add('active');
                     if (checkWin()) {
                        message.textContent = `${turn}の勝利！`;
                        endGame();
                     } else if (checkTie()) {
                        message.textContent = `引き分け！`;
                        endGame();
                     } else {
                        turn = turn === 'X' ? 'O' : 'X';
                        message.textContent = `${turn}の番です`;
                     }
                  }
               });
            });
            
            restart.addEventListener('click', () => {
               boardState = Array.from(Array(ROWS), () => Array(COLS).fill(''));
               squares.forEach(square => {
                  square.textContent = '';
                  square.classList.remove('active');
               });
               message.textContent = `${turn}の番です`;
               turn = 'X';
               restart.style.display = 'none';
            });
         }
         
         function checkWin() {
            for (let i = 0; i < ROWS; i++) {
               if (boardState[i][0] !== '' && boardState[i][0] === boardState[i][1] && boardState[i][1] === boardState[i][2]) {
                  return true;
               }
            }
            
            for (let i = 0; i < COLS; i++) {
               if (boardState[0][i] !== '' && boardState[0][i] === boardState[1][i] && boardState[1][i] === boardState[2][i]) {
                  return true;
               }
            }
            
            if (boardState[0][0] !== '' && boardState[0][0] === boardState[1][1] && boardState[1][1] === boardState[2][2]) {
               return true;
            }
            
            if (boardState[0][2] !== '' && boardState[0][2] === boardState[1][1] && boardState[1][1] === boardState[2][0]) {
               return true;
            }
            
            return false;
         }
         
         function checkTie() {
            return boardState.every(row => row.every(elem => elem !== ''));
         }
         
         function endGame() {
            squares.forEach(square => {
               square.classList.remove('active');
            });
            restart.style.display = 'block';
         }
         
         drawBoard();
         message.textContent = `${turn}の番です`;
      </script>
   </body>
</html>

［ゲームの概要］
Tic Tac Toe（三目並べ）をスマホで遊ぶことができます。先手はX、後手はOで、どちらかが3つ並べたら勝利です。ただし、すべてのマスが埋まっても勝敗が決まらなければ引き分けとなります。再度遊ぶには「もう一度遊ぶ」をクリックしてください。