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

No:8746

←

Prev Next

→

photogrammetry
Developer User3840｜Date and time 23/7/18 3:29:53
Build time 28.695 sec｜Game capacity 2.604KB｜

Script

プログラム内でJavaScriptを使用して、フォトグラメトリというゲームを作成しましょう。以下は実装例です。

フォトグラメトリ

スマホの傾きを利用して写真を撮るゲームです。画面が水平になるようにスマホを傾け、写真を撮ってみましょう！

このプログラムは、スマホの傾きを検出してゲーム画面を更新し、ボタンをクリックすることでキャプチャした画像を取得します。ゲームのロジックや写真の撮影方法など、実際のゲーム仕様に合わせてカスタマイズしてください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

プログラム内でJavaScriptを使用して、フォトグラメトリというゲームを作成しましょう。以下は実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>フォトグラメトリ</title>
</head>
<body>
    <h1>フォトグラメトリ</h1>
    <p>スマホの傾きを利用して写真を撮るゲームです。画面が水平になるようにスマホを傾け、写真を撮ってみましょう！</p>

<div id="gameArea">
        <canvas id="canvas" width="400" height="400"></canvas>
        <button id="captureButton" onclick="capturePhoto()">写真を撮る</button>
    </div>

// ゲームエリアの要素を取得
        var gameArea = document.getElementById("gameArea");
        var canvas = document.getElementById("canvas");
        var captureButton = document.getElementById("captureButton");

// カメラの傾きを検出するイベントリスナーを追加
        window.addEventListener('deviceorientation', handleOrientation);

// ゲーム開始時に実行する関数
        function startGame() {
            gameStarted = true;
            captureButton.disabled = false;
        }

// カメラの傾きに応じてゲーム画面を更新する関数
        function handleOrientation(event) {
            if (gameStarted) {
                var x = event.beta;  // x軸の傾き
                var y = event.gamma; // y軸の傾き

// ゲーム画面を更新するロジックを実装

// 例: キャンバスを回転させる
                canvas.style.transform = "rotate(" + x + "deg)";
            }
        }

// 写真を撮る関数
        function capturePhoto() {
            if (gameStarted) {
                // 写真を撮る処理を実装

// 例: ゲームエリアの要素をキャプチャする
                html2canvas(gameArea).then(function (canvas) {
                    var imageUrl = canvas.toDataURL(); // キャプチャした画像をDataURLとして取得
                    console.log(imageUrl);
                });
            }
        }
    </script>
</body>
</html>
```