AI game creator

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

No:4926

1996

←

Prev Next

→

trapeze
Developer sayaensm｜Date and time 23/6/29 0:31:01
Build time 23.972 sec｜Game capacity 2.487KB｜

Script

了解しました。以下に、JavaScriptを含む1枚のHTMLファイルで動作するブランコのゲームを実装しました。スマートフォンでの操作を前提としています。

上記のコードをHTMLファイルに保存し、Webブラウザで開くと、ブランコのゲームがプレイできます。スマートフォンを傾けて操作することで、ブランコが揺れます。ブランコの長さや振り方は調整可能ですので、自由に変えて遊ぶこともできます。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// ブランコの設定
        const swing = {
            x: width / 2,
            y: height / 2,
            length: 100,
            angle: 0,
            angleVelocity: 0,
            angleAcceleration: 0.001
        };

// ゲームループ
        function gameLoop() {
            update();
            draw();

requestAnimationFrame(gameLoop);
        }

// ブランコの更新
        function update() {
            swing.angleVelocity += swing.angleAcceleration;
            swing.angle += swing.angleVelocity;
        }

// ブランコの描画
        function draw() {
            context.clearRect(0, 0, width, height);

const bobX = swing.x + Math.sin(swing.angle) * swing.length;
            const bobY = swing.y + Math.cos(swing.angle) * swing.length;

context.beginPath();
            context.moveTo(swing.x, swing.y);
            context.lineTo(bobX, bobY);
            context.stroke();

context.beginPath();
            context.arc(bobX, bobY, 10, 0, Math.PI * 2);
            context.fill();
        }

// スマホの傾きでブランコを操作
        window.addEventListener("deviceorientation", function(event) {
            swing.angleAcceleration = event.gamma / 1000;
        }, true);

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