Drawing game, with a feature that changes the picture when tilted.'s game

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

No:7750

2516

←

Prev Next

→

Drawing game, with a feature that changes the pict..ALL
Developer o2pi4｜Date and time 23/7/9 19:46:51
Build time 9.252 sec｜Game capacity 2.094KB｜

Script

了解しました。以下に、スマホで傾けると絵が変わるゲームの実装例を示します。

このプログラムでは、スマホの傾きに応じてキャンバス上に絵文字を描画します。スマホを傾けると、絵文字が上下左右に動きます。最初の絵文字は「😄」ですが、適宜絵文字を変更することもできます。ただし、動作確認をするためには、実際のスマートフォンで実行する必要があります。デスクトップブラウザで実行しても、mousemove イベントが発生しないため、絵文字は表示されません。なお、このプログラムは単純な例ですので、もっと複雑なゲームに拡張したり、より多くの絵文字を使ったりすることも可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解しました。以下に、スマホで傾けると絵が変わるゲームの実装例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>描くゲー</title>
    <style>
        #canvas {
            width: 100%;
            height: 100%;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var currentEmoji = '😄';

function handleOrientation(event) {
            var alpha = event.alpha;  // 左右の傾き（0-360）
            var beta = event.beta;    // 前後の傾き（-180-180）
            var gamma = event.gamma;  // 上下の傾き（-90-90）

var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var emojiSize = 50;

context.clearRect(0, 0, canvas.width, canvas.height);
            context.font = "bold " + emojiSize + "px Arial";
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(currentEmoji, centerX - emojiSize / 2, centerY - emojiSize / 2 + beta / 3);
        }
    </script>
</body>
</html>
```

このプログラムでは、スマホの傾きに応じてキャンバス上に絵文字を描画します。スマホを傾けると、絵文字が上下左右に動きます。最初の絵文字は「😄」ですが、適宜絵文字を変更することもできます。

ただし、動作確認をするためには、実際のスマートフォンで実行する必要があります。デスクトップブラウザで実行しても、deviceorientation イベントが発生しないため、絵文字は表示されません。

なお、このプログラムは単純な例ですので、もっと複雑なゲームに拡張したり、より多くの絵文字を使ったりすることも可能です。