Crane game for sharks! Fishing for humans in the Gulf!'s game

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

No:5230

1245

←

Prev Next

→

Crane game for sharks! Fishing for humans in the G..ALL
Developer User3589｜Date and time 23/6/29 20:27:48
Build time 44.579 sec｜Game capacity 5.093KB｜

Script

了解です！以下に、「サメのためのクレーンゲーム！湾岸で人間を釣り上げろ！」というゲームの実装例を示します。ただし、絵文字を使用することはできませんが、スマホでも遊べるようになっています。

このゲームでは、湾岸で釣り上げるクレーンゲームをプレイします。画面上には青い四角形で表されるサメがいて、赤い四角形で表される人間を釣り上げることが目標です。クレーンの位置を制御するために、「ArrowLeft」キーと「ArrowRight」キーを使用します。ゲームクリア条件は、クレーンが人間の上に移動し、サメが湾岸から釣り上げることです。ゲームクリア時にはアラートが表示されます。以上が、要件に基づいた「サメのためのクレーンゲーム！湾岸で人間を釣り上げろ！」の実装例です。

←

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>
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <script>
        // ゲームの設定値
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;
        const sharkWidth = 100;
        const sharkHeight = 50;
        const personWidth = 50;
        const personHeight = 100;
        const craneSpeed = 5;
        
        // ゲームオブジェクトの定義
        const game = {
            canvas: null,
            context: null,
            shark: null,
            person: null,
            cranePosition: 0,
            isCaptured: false,
            
            start: function() {
                this.canvas = document.createElement("canvas");
                this.canvas.width = screenWidth;
                this.canvas.height = screenHeight;
                this.context = this.canvas.getContext("2d");
                document.body.insertBefore(this.canvas, document.body.childNodes[0]);
                
                this.shark = { x: screenWidth / 2 - sharkWidth / 2, y: screenHeight - sharkHeight };
                this.person = { x: screenWidth / 2 - personWidth / 2, y: screenHeight - personHeight - sharkHeight };
                
                this.draw();
                this.update();
            },
            
            draw: function() {
                this.context.clearRect(0, 0, screenWidth, screenHeight);
                
                // サメの描画
                this.context.fillStyle = "blue";
                this.context.fillRect(this.shark.x, this.shark.y, sharkWidth, sharkHeight);
                
                // 人間の描画
                this.context.fillStyle = "red";
                this.context.fillRect(this.person.x, this.person.y, personWidth, personHeight);
                
                // クレーンの描画
                this.context.strokeStyle = "black";
                this.context.lineWidth = 5;
                this.context.beginPath();
                this.context.moveTo(screenWidth / 2, screenHeight - sharkHeight);
                this.context.lineTo(screenWidth / 2 + this.cranePosition, screenHeight - sharkHeight - 100);
                this.context.stroke();
            },
            
            update: function() {
                if (this.isCaptured) {
                    this.person.x = screenWidth / 2 - personWidth / 2 + this.cranePosition;
                    this.person.y = screenHeight - sharkHeight - 100;
                }
                
                this.draw();
                
                if (this.cranePosition > screenWidth / 2 - personWidth / 2 && this.cranePosition < screenWidth / 2 + personWidth / 2 && this.shark.y === screenHeight - sharkHeight) {
                    this.isCaptured = true;
                    alert("ゲームクリア！サメが人間を釣り上げました！");
                    return;
                }
                
                requestAnimationFrame(this.update.bind(this));
            },
            
            moveCraneLeft: function() {
                if (!this.isCaptured && this.cranePosition > -screenWidth / 2) {
                    this.cranePosition -= craneSpeed;
                }
            },
            
            moveCraneRight: function() {
                if (!this.isCaptured && this.cranePosition < screenWidth / 2) {
                    this.cranePosition += craneSpeed;
                }
            }
        };
        
        // キーボードのイベントリスナー
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowLeft") {
                game.moveCraneLeft();
            } else if (event.key === "ArrowRight") {
                game.moveCraneRight();
            }
        });
        
        // 初期化
        game.start();
    </script>
</body>
</html>
```

このゲームでは、湾岸で釣り上げるクレーンゲームをプレイします。画面上には青い四角形で表されるサメがいて、赤い四角形で表される人間を釣り上げることが目標です。クレーンの位置を制御するために、「ArrowLeft」キーと「ArrowRight」キーを使用します。ゲームクリア条件は、クレーンが人間の上に移動し、サメが湾岸から釣り上げることです。ゲームクリア時にはアラートが表示されます。

以上が、要件に基づいた「サメのためのクレーンゲーム！湾岸で人間を釣り上げろ！」の実装例です。