AI game creator

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

No:6522

109

←

Prev Next

→

Pythagorean switch
Developer User3896｜Date and time 23/7/2 16:50:06
Build time 20.513 sec｜Game capacity 2.245KB｜

Script

了解です。ピタゴラスイッチというゲームを作成してみます。

🍎

🍊

🍆

🍅

🍇

🍌

🍑

🍒

🍓

🥕

このプログラムは、10個の箱が表示され、クリックごとに次の箱がアクティブになるというピタゴラスイッチ風のゲームです。最後の箱をクリックするとゲームが終了します。各箱には絵文字が表示されます。スマホで操作する場合、各箱をタップすることでゲームを進めることができます。

←

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: 3rem;
        }
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            cursor: pointer;
        }
        .box:hover {
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var boxes = document.querySelectorAll('.box');

function activateBox() {
                var nextBox = this.nextElementSibling;
                if (nextBox !== null) {
                    nextBox.style.backgroundColor = 'lightblue';
                    nextBox.style.color = 'initial';
                }
            }

function gameOver() {
                alert('ゲーム終了！');
            }

for (var i = 0; i < boxes.length; i++) {
                boxes[i].addEventListener('click', activateBox);
            }
          
            boxes[boxes.length - 1].addEventListener('click', gameOver);
        });
    </script>
    <div class="box">🍎</div>
    <div class="box">🍊</div>
    <div class="box">🍆</div>
    <div class="box">🍅</div>
    <div class="box">🍇</div>
    <div class="box">🍌</div>
    <div class="box">🍑</div>
    <div class="box">🍒</div>
    <div class="box">🍓</div>
    <div class="box">🥕</div>
</body>
</html>
```

このプログラムは、10個の箱が表示され、クリックごとに次の箱がアクティブになるというピタゴラスイッチ風のゲームです。最後の箱をクリックするとゲームが終了します。各箱には絵文字が表示されます。

スマホで操作する場合、各箱をタップすることでゲームを進めることができます。