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

No:10693

←

Prev Next

→

triangler
Developer User4559｜Date and time 23/8/2 1:02:15
Build time 22.709 sec｜Game capacity 2.455KB｜

Script

了解しました。以下にHTMLファイルを示します。

トライアングラー

このHTMLファイルは、「トライアングラー」というゲームで、プレイヤーが三角形で表示されます。スマホのタッチ操作ではなく、キーボードの矢印キーでプレイヤーを操作できます。プレイヤーは画面上を移動します。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>トライアングラー</title>
</head>
<body>
    <h1>トライアングラー</h1>
    
    <canvas id="canvas"></canvas>

// キャンバスの取得
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');

// キャンバスのサイズ設定
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// プレイヤーの初期位置
        let playerX = window.innerWidth / 2;
        let playerY = window.innerHeight / 2;

// プレイヤーの移動速度
        const speed = 10;

// プレイヤーの描画
        function drawPlayer(x, y) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = 'red';
            context.beginPath();
            context.moveTo(x, y - 20);
            context.lineTo(x + 20, y + 20);
            context.lineTo(x - 20, y + 20);
            context.closePath();
            context.fill();
        }

// キーボードの入力処理
        function handleKeyDown(event) {
            switch (event.code) {
                case 'ArrowUp':
                    playerY -= speed;
                    break;
                case 'ArrowDown':
                    playerY += speed;
                    break;
                case 'ArrowLeft':
                    playerX -= speed;
                    break;
                case 'ArrowRight':
                    playerX += speed;
                    break;
            }
        }

// キーボードの入力イベントのリスナーを登録
        window.addEventListener('keydown', handleKeyDown);

// ゲームループ
        function gameLoop() {
            drawPlayer(playerX, playerY);

// 60fpsでゲームループを実行
            requestAnimationFrame(gameLoop);
        }

// ゲームループを開始
        gameLoop();
    </script>
</body>
</html>
```