A game to correct the alignment of the teeth's game

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

No:10682

←

Prev Next

→

A game to correct the alignment of the teeth
Developer User4559｜Date and time 23/8/1 19:22:37
Build time 20.619 sec｜Game capacity 2.037KB｜

Script

了解です。以下に、スマートフォンで操作可能な歯並びを直すゲームの実装例を示します。

🪥

このゲームでは、画面上部に表示される歯ブラシの絵文字（🪥）をスワイプすることで、歯の位置を変更します。スワイプ方向によって歯ブラシの絵文字も変わります。スワイプの速さや力度によって処理が変更されることはありませんが、簡単な歯並びを直すゲームとして遊べるものです。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、スマートフォンで操作可能な歯並びを直すゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-container {
            width: 300px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
        }

#toothbrush {
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <span id="toothbrush">🪥</span>
    </div>

// スワイプイベントの検知
        function handleTouchStart(evt) {
            position = evt.touches[0].clientX;
        }

function handleTouchMove(evt) {
            evt.preventDefault();
        }

function handleTouchEnd(evt) {
            const endPosition = evt.changedTouches[0].clientX;
            const diff = endPosition - position;

if (diff > 20) {
                document.getElementById('toothbrush').innerHTML = '🪥';
            } else if (diff < -20) {
                document.getElementById('toothbrush').innerHTML = '🛏️';
            }
        }

// イベントリスナーの追加
        const gameContainer = document.getElementById('game-container');
        gameContainer.addEventListener('touchstart', handleTouchStart, false);
        gameContainer.addEventListener('touchmove', handleTouchMove, false);
        gameContainer.addEventListener('touchend', handleTouchEnd, false);
    </script>
</body>
</html>
```