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

No:12256

←

Prev Next

→

roller coaster
Developer User5054｜Date and time 23/8/14 15:53:01
Build time 19.383 sec｜Game capacity 2.388KB｜

Script

以下は、ジェットコースターのゲームの実装例です。

ジェットコースターゲーム

このプログラムは、HTMLのキャンバス要素上にジェットコースターを描画し、キーボードの左右ボタンに反応してジェットコースターを動かします。実行すると、ジェットコースターが表示されている状態で、左右のキーボードボタンを押すことでジェットコースターを動かすことができます。

←

Prev　Next

→ 　

Back　

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

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

以下は、ジェットコースターのゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ジェットコースターゲーム</title>
</head>
<body>
    <h1>ジェットコースターゲーム</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // ゲーム画面のキャンバス要素を取得
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        // ジェットコースターの位置とサイズ
        let coasterX = 200;
        let coasterY = canvas.height - 100;
        const coasterWidth = 50;
        const coasterHeight = 100;
        
        // ジェットコースターを描画
        function drawCoaster() {
            ctx.fillStyle = "red";
            ctx.fillRect(coasterX, coasterY, coasterWidth, coasterHeight);
        }
        
        // キーボードの入力を受け付けるイベントリスナーを設定
        window.addEventListener("keydown", function(event) {
            const key = event.key;
            
            // スマホなので左右ボタンのみを使用
            if (key === "ArrowLeft" && coasterX >= 10) {
                // 左に動かす
                coasterX -= 10;
            } else if (key === "ArrowRight" && coasterX + coasterWidth <= canvas.width - 10) {
                // 右に動かす
                coasterX += 10;
            }
        });
        
        // ゲームのメインループ
        function gameLoop() {
            // キャンバスをクリア
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // ジェットコースターを描画
            drawCoaster();
            
            // メインループの再実行
            requestAnimationFrame(gameLoop);
        }
        
        // ゲームを開始
        gameLoop();
    </script>
</body>
</html>
```