ピタゴラスイッチ's game

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

No:15052

←

Prev Next

→

ピタゴラスイッチ
Developer User6485｜Date and time 23/9/5 22:22:15
Build time 42.04 sec｜Game capacity 3.138KB｜

Script

了解です。ピタゴラスイッチゲームの実装を行い、スマホで遊べる形式とします。以下が実際のプログラムです。

このプログラムでは、ピタゴラスイッチゲームで使用されるボードとタイルを表示します。タイルをクリックすると、ランダムなタイルだけが表示されるようになっています。また、`switch_sound.mp3`というファイルを同じディレクトリ内に用意しておくと、タイルが表示されるときに音が再生されるようになっています。このプログラムをHTMLファイルとして保存し、スマホのブラウザで開くことで遊ぶことができます。絵文字を使用していませんが、任意の絵文字を表示することも可能です。

←

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 {
            background: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

#board {
            width: 500px;
            height: 500px;
            background: #fff;
            position: relative;
        }

.tile {
            width: 100px;
            height: 100px;
            background: #ccc;
            position: absolute;
            opacity: 0;
            transition: opacity 0.5s;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 48px;
        }
    </style>
</head>
<body>
    <div id="board">
        <div class="tile" style="top: 0; left: 0;"></div>
        <div class="tile" style="top: 100px; left: 100px;"></div>
        <div class="tile" style="top: 0; left: 200px;"></div>
        <div class="tile" style="top: 0; left: 300px;"></div>
        <div class="tile" style="top: 100px; left: 400px;"></div>
        <div class="tile" style="top: 200px; left: 0;"></div>
        <div class="tile" style="top: 300px; left: 100px;"></div>
        <div class="tile" style="top: 200px; left: 200px;"></div>
        <div class="tile" style="top: 300px; left: 300px;"></div>
        <div class="tile" style="top: 200px; left: 400px;"></div>
        <div class="tile" style="top: 400px; left: 0;"></div>
        <div class="tile" style="top: 400px; left: 100px;"></div>
        <div class="tile" style="top: 400px; left: 200px;"></div>
        <div class="tile" style="top: 400px; left: 300px;"></div>
        <div class="tile" style="top: 400px; left: 400px;"></div>
    </div>

const playSound = () => {
            const audio = new Audio("switch_sound.mp3");
            audio.play();
        };

board.addEventListener("click", () => {
            playSound();
            tiles.forEach(tile => {
                tile.style.opacity = Math.random() > 0.5 ? 1 : 0;
            });
        });
    </script>
</body>
</html>
```

このプログラムでは、ピタゴラスイッチゲームで使用されるボードとタイルを表示します。タイルをクリックすると、ランダムなタイルだけが表示されるようになっています。

また、`switch_sound.mp3`というファイルを同じディレクトリ内に用意しておくと、タイルが表示されるときに音が再生されるようになっています。

このプログラムをHTMLファイルとして保存し、スマホのブラウザで開くことで遊ぶことができます。絵文字を使用していませんが、任意の絵文字を表示することも可能です。