ピタゴラスイッチ's game

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

No:16372

102

←

Prev Next

→

ピタゴラスイッチ
Developer User7165｜Date and time 23/9/17 21:40:51
Build time 27.637 sec｜Game capacity 2.795KB｜

Script

了解です。以下にピタゴラスイッチのゲームを実装しました。

▶

⬇

⬅

⬇

⬅

⬇

⭕

このプログラムは、9つのマスを持つピタゴラスイッチのゲームを実装しています。各マスはクリックされると、前のマスとの連結性が確認され、正しい順序でクリックされるとマスの色が変化します。全てのマスを正しい順序でクリックするとゴールとなり、アラートメッセージが表示されます。ゲームのリセットはアラートメッセージが表示された後に行われます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にピタゴラスイッチのゲームを実装しました。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ピタゴラスイッチ</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-size: 60px;
    }

.square {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

#start {
      background-color: green;
      color: white;
    }

#end {
      background-color: red;
      color: white;
    }
  </style>
</head>
<body>
  <div id="board">
    <div class="square" id="start">▶</div>
    <div class="square">⬇</div>
    <div class="square">⬅</div>
    <div class="square">⬇</div>
    <div class="square">⬇</div>
    <div class="square">⬇</div>
    <div class="square">⬅</div>
    <div class="square">⬇</div>
    <div class="square" id="end">⭕</div>
  </div>

let currentSquare = startButton;

squares.forEach(function(square) {
        square.addEventListener('click', function() {
          if (square === currentSquare.nextElementSibling) {
            square.style.backgroundColor = 'green';
            square.style.color = 'white';
            currentSquare = square;
            
            if (currentSquare === endButton) {
              alert('ゴール！おめでとう！');
              currentSquare = startButton;
              squares.forEach(function(square) {
                square.style.backgroundColor = '';
                square.style.color = '';
              });
            }
          } else {
            alert('間違った順序です！');
            currentSquare = startButton;
            squares.forEach(function(square) {
              square.style.backgroundColor = '';
              square.style.color = '';
            });
          }
        });
      });
    });
  </script>
</body>
</html>
```