図形！ JavaScriptのcanvasによって生成された図形を動かすゲーム。図形は関数によって定義されており、画面をタップしたりスワイプさせたりすることで、図形を変化させることが出来ます。's game

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

No:5093

1130

←

Prev Next

→

図形！ JavaScriptのcanvasによって生成された図形を動かすゲーム。図形は関数によ..ALL
Developer もちきなこ｜Date and time 23/6/29 18:07:57
Build time 18.571 sec｜Game capacity 1.897KB｜

Script

了解しました。以下は、図形を動かすゲームの例です。

このゲームでは、画面をタップすると図形がランダムな位置に移動します。図形はCanvas要素を使用して描画されます。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

了解しました。以下は、図形を動かすゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>図形を動かすゲーム</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// 図形を描画する関数
        function drawShape(context) {
            context.clearRect(0, 0, 400, 400);
            context.beginPath();
            context.arc(x, y, 50, 0, 2 * Math.PI, false);
            context.fillStyle = 'red';
            context.fill();
            context.lineWidth = 5;
            context.strokeStyle = 'black';
            context.stroke();
            context.closePath();
        }

// ゲームの操作処理
        function handleInput(event) {
            if (event.type === 'mousedown' || event.type === 'touchstart') {
                // 画面をタップした場合、図形の位置を変更する
                x = Math.floor(Math.random() * 400);
                y = Math.floor(Math.random() * 400);
            }
        }

// ゲームのメイン処理
        function gameLoop() {
            const canvas = document.getElementById('gameCanvas');
            const context = canvas.getContext('2d');

drawShape(context);
        }

// イベントリスナーの設定
        document.addEventListener('mousedown', handleInput);
        document.addEventListener('touchstart', handleInput);

// ゲームのループを開始
        setInterval(gameLoop, 1000 / 60);
    </script>
</body>
</html>
```

このゲームでは、画面をタップすると図形がランダムな位置に移動します。図形はCanvas要素を使用して描画されます。