AI game creator

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

No:9594

←

Prev Next

→

fps
Developer User4392｜Date and time 23/7/26 7:42:30
Build time 28.477 sec｜Game capacity 3.496KB｜

Script

了解しました。以下にサンプルコードを示します。

このサンプルコードでは、スマートフォンのタッチ操作に対応したシンプルなゲームを実装しています。キャラクターをタッチするごとにスコアが上昇し、キャラクターはタッチした位置に移動します。ゲームループは`requestAnimationFrame`を使用し、タッチイベントを処理することで操作を可能にしています。スタイルシートではゲームコンテナを全画面表示し、キャラクターやスコアの要素の表示位置を制御しています。

←

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: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

// キャラクターの初期位置
        let posX = 0;
        let posY = 0;

// タッチ座標の初期値
        let touchX = 0;
        let touchY = 0;

// ゲームコンテナの要素を取得
        const gameContainer = document.getElementById('game-container');

// キャラクターの要素を生成
        const character = document.createElement('span');
        character.innerHTML = '👾';
        character.style.position = 'absolute';
        character.style.left = posX + 'px';
        character.style.top = posY + 'px';
        gameContainer.appendChild(character);

// スコアの要素を生成
        const scoreElement = document.createElement('span');
        scoreElement.innerHTML = 'Score: ' + score;
        gameContainer.appendChild(scoreElement);

// ゲームループの処理
        function gameLoop() {
            // キャラクターの移動
            posX += speed;
            posY += speed;
            
            // キャラクターの位置を更新
            character.style.left = posX + 'px';
            character.style.top = posY + 'px';

// スコアを更新
            score++;
            scoreElement.innerHTML = 'Score: ' + score;

// 次のフレームを実行
            requestAnimationFrame(gameLoop);
        }

// ゲームループを開始
        requestAnimationFrame(gameLoop);

// タッチイベントの処理
        gameContainer.addEventListener('touchstart', handleTouchStart);
        gameContainer.addEventListener('touchmove', handleTouchMove);
        gameContainer.addEventListener('touchend', handleTouchEnd);

function handleTouchStart(event) {
            touchX = event.touches[0].clientX;
            touchY = event.touches[0].clientY;
        }

function handleTouchMove(event) {
            event.preventDefault();
            posX += event.touches[0].clientX - touchX;
            posY += event.touches[0].clientY - touchY;
            touchX = event.touches[0].clientX;
            touchY = event.touches[0].clientY;
            character.style.left = posX + 'px';
            character.style.top = posY + 'px';
        }

function handleTouchEnd(event) {
            touchX = 0;
            touchY = 0;
        }
    </script>
</body>
</html>
```