pictograph angry bird's game

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

No:4924

1321

←

Prev Next

→

pictograph angry bird
Developer User3694｜Date and time 23/6/29 0:29:05
Build time 29.562 sec｜Game capacity 3.164KB｜

Script

絵文字アングリーバードのゲームを作成します。

🐦

この実装では、スワイプの方向によって絵文字のアイコンが変化するシンプルなゲームを作成しました。ゲームコンテナをスワイプすると、スワイプの方向に応じて絵文字が表示されます。

←

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>
        #game-container {
            width: 100%;
            height: 400px; /* ゲームの高さ */
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px; /* 絵文字のサイズ */
        }
    </style>
</head>
<body>
    <div id="game-container">
        🐦
    </div>

// スワイプの方向を記録する変数
        let swipeDirection = '';

// タッチ開始時に呼ばれる関数
        function handleTouchStart(e) {
            const touchStartX = e.touches[0].clientX;
            const touchStartY = e.touches[0].clientY;

// タッチ終了時に呼ばれる関数
            function handleTouchEnd(e) {
                const touchEndX = e.changedTouches[0].clientX;
                const touchEndY = e.changedTouches[0].clientY;

// X軸方向の移動距離を計算
                const xDiff = touchStartX - touchEndX;
                if (Math.abs(xDiff) > 50) { // 移動距離が一定以上ならゲームを実行
                    if (xDiff > 0) {
                        swipeDirection = 'left';
                    } else {
                        swipeDirection = 'right';
                    }

// ゲームの実行
                    game(swipeDirection);
                }
            }

// タッチ終了時のイベントを登録
            gameContainer.addEventListener('touchend', handleTouchEnd, { once: true });
        }

// スワイプの方向によって処理を実行するゲーム関数
        function game(direction) {
            // スワイプの方向に応じたゲームの処理を書く
            switch (direction) {
                case 'left':
                    // 左に移動する処理
                    gameContainer.innerText = '⬅️';
                    break;
                case 'right':
                    // 右に移動する処理
                    gameContainer.innerText = '➡️';
                    break;
                default:
                    // 何もしない
                    return;
            }

// ゲームが終了したら再びタッチ可能にする
            gameContainer.addEventListener('touchstart', handleTouchStart, { once: true });
        }

// 初回のタッチ開始時のイベントを登録
        gameContainer.addEventListener('touchstart', handleTouchStart, { once: true });
    </script>
</body>
</html>
```