縦スクロールゲームで、カニが襲いかかるエビをよけながら海中を進んでいく。's game

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

No:43161

←

Prev Next

→

縦スクロールゲームで、カニが襲いかかるエビをよけながら海中を進んでいく。
Developer User19111｜Date and time 24/2/14 14:55:44
Build time 10.053 sec｜Game capacity 3.263KB｜

Script

了解です。以下にプログラムを記述します。

このプログラムでは、縦スクロールのゲーム画面を表示し、カニとエビを描画します。カニの位置はタッチ操作によって変更します。プレイヤーはカニを操作し、エビとの衝突を避けながらスコアを稼いでいくゲームです。ゲームオーバーになるとアラートが表示され、スコアが表示されます。スマートフォンで上記のHTMLファイルを開くと、カニ避けゲームが遊べます。ただし、絵文字が表示されない場合はブラウザが対応していない可能性があります。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にプログラムを記述します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>カニ避けゲーム</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        window.onload = function() {
            // ゲームのCanvas要素を取得
            var canvas = document.getElementById("gameCanvas");
            var context = canvas.getContext("2d");
            
            // カニの初期位置
            var crabPositionY = canvas.height/2;
            
            // エビの初期位置と速度
            var shrimpPositionX = canvas.width;
            var shrimpPositionY = Math.random() * canvas.height;
            var shrimpSpeed = 5;
            
            // スコア
            var score = 0;
            
            // タッチイベントの処理
            canvas.addEventListener("touchstart", function(event) {
                var touchY = event.touches[0].clientY;
                
                // カニの位置を変更
                crabPositionY = touchY;
            });
            
            // ゲームのメインループ
            function gameLoop() {
                // Canvasをクリア
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                // エビを描画
                context.fillRect(shrimpPositionX-50, shrimpPositionY-50, 50, 50);
                shrimpPositionX -= shrimpSpeed;
                
                // カニを描画
                context.font = "30px Arial";
                context.fillText("🦀", 50, crabPositionY);
                
                // スコアを描画
                context.fillText("Score: " + score, 50, 50);
                
                // カニとエビの衝突判定
                if (Math.abs(crabPositionY - shrimpPositionY) < 50 && shrimpPositionX < 100) {
                    score++;
                    shrimpPositionX = canvas.width;
                    shrimpPositionY = Math.random() * canvas.height;   
                }
                
                // ゲームオーバー判定
                if (shrimpPositionX < 0) {
                    clearInterval(intervalId);
                    alert("ゲームオーバー！スコア: " + score);
                } else {
                    // メインループを再帰的に呼び出し
                    requestAnimationFrame(gameLoop);
                }
            }
            
            // ゲーム開始
            var intervalId = setInterval(gameLoop, 20);
        }
    </script>
</body>
</html>
```

このプログラムでは、縦スクロールのゲーム画面を表示し、カニとエビを描画します。カニの位置はタッチ操作によって変更します。プレイヤーはカニを操作し、エビとの衝突を避けながらスコアを稼いでいくゲームです。ゲームオーバーになるとアラートが表示され、スコアが表示されます。

スマートフォンで上記のHTMLファイルを開くと、カニ避けゲームが遊べます。ただし、絵文字が表示されない場合はブラウザが対応していない可能性があります。