2つのタイルを交互に押し、連続で押したらゲームオーバー's game | AI game creator

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

No:31391

51

2つのタイルを交互に押し、連続で押したらゲームオーバー
Developer User15123｜Date and time 23/12/26 17:45:47
Build time 35.296 sec｜Game capacity 3.171KB｜

「2つのタイルを交互に押し、連続で押したらゲームオーバー」というゲームの実装例を以下に示します。

このプログラムでは、`tile1`と`tile2`という2つのタイル要素を用意しています。これらのタイルを交互にクリックすると、タイルの背景にプレイヤーの記号（○または×）が表示されます。連続でクリックするとゲームオーバーとなります。タイルの要素には`data-clicked`属性が追加され、クリック済みのタイルかどうかを判定できるようになっています。また、プレイヤーごとにクリック回数を`consecutiveClicks`で管理し、2回連続でクリックされた場合にゲームオーバーとなるようにしています。プレイヤー1がクリックした場合は`player1`というクラスが付与され、プレイヤー2がクリックした場合は`player2`というクラスが付与されます。これにより、表示される記号も異なるようになっています。以上が実装例です。お手元で試してみてください。

→ 　

0　

0　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

「2つのタイルを交互に押し、連続で押したらゲームオーバー」というゲームの実装例を以下に示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ゲーム</title>
    <style>
        .tile {
            width: 100px;
            height: 100px;
            background-color: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="tile1" class="tile"></div>
    <div id="tile2" class="tile"></div>

<script>
        var tile1 = document.querySelector('#tile1');
        var tile2 = document.querySelector('#tile2');

var currentPlayer = 1;
        var consecutiveClicks = 0;

// タイルがクリックされたときの処理
        function handleClick(event) {
            var tile = event.target;

// タイルが既にクリック済みの場合は何もしない
            if (tile.getAttribute('data-clicked') === 'true') {
                return;
            }

tile.classList.add(currentPlayer === 1 ? 'player1' : 'player2');
            tile.innerText = currentPlayer === 1 ? '○' : '×';
            tile.setAttribute('data-clicked', 'true');
            consecutiveClicks++;

// 連続でクリックされた場合はゲームオーバー
            if (consecutiveClicks === 2) {
                gameOver();
            }

// プレイヤー切り替え
            currentPlayer = currentPlayer === 1 ? 2 : 1;
        }

// ゲームオーバー時の処理
        function gameOver() {
            tile1.removeEventListener('click', handleClick);
            tile2.removeEventListener('click', handleClick);
            alert('ゲームオーバー');
        }

// タイルにクリックイベントを追加
        tile1.addEventListener('click', handleClick);
        tile2.addEventListener('click', handleClick);
    </script>
</body>
</html>
```

このプログラムでは、`tile1`と`tile2`という2つのタイル要素を用意しています。これらのタイルを交互にクリックすると、タイルの背景にプレイヤーの記号（○または×）が表示されます。連続でクリックするとゲームオーバーとなります。

タイルの要素には`data-clicked`属性が追加され、クリック済みのタイルかどうかを判定できるようになっています。また、プレイヤーごとにクリック回数を`consecutiveClicks`で管理し、2回連続でクリックされた場合にゲームオーバーとなるようにしています。

プレイヤー1がクリックした場合は`player1`というクラスが付与され、プレイヤー2がクリックした場合は`player2`というクラスが付与されます。これにより、表示される記号も異なるようになっています。

以上が実装例です。お手元で試してみてください。