ragdoll's game | AI game creator

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

No:4458

1528

ragdoll
Developer User1006｜Date and time 23/6/28 1:38:32
Build time 60.507 sec｜Game capacity 5.932KB｜

プログラムの概要：このプログラムは、スマートフォンを操作してラグドールを操るゲームです。HTMLファイル内にJavaScriptコードを埋め込んでいます。このゲームでは、猫のラグドールを操作して、障害物を避けたり、ジャンプしたりしながらゴールへ向かいます。 HTMLファイル：以下が、このゲームのHTMLファイルです。

このHTMLファイル内には、`game-container`というidを持つdiv要素と、`game-canvas`というidを持つcanvas要素があります。`game-canvas`は、JavaScriptコードで後で操作するために必要です。 JavaScriptコード：以下は、このゲームのJavaScriptコードです。
このコードでは、`gameCanvas`や`ctx`といった変数を初期化し、ラグドールや障害物を作成し、それらを描画するようにしています。また、イベントリスナーを追加して、キー操作やタッチ操作に対応させ、ウィンドウのリサイズに対応し、定期的に障害物を生成するようにしています。このゲームは、ラグドールを左から右へ移動させ、障害物を避け、ジャンプして進むようになっています。障害物にぶつかるとゲームオーバーになり、ゴールに到達するとゲームクリアになります。結論：以上が、スマートフォンで遊べるラグドールゲームの実装方法です。HTMLファイルにJavaScriptコードを埋め込んでいます。このゲームは、キーボード操作とタッチ操作の両方に対応しています。絵文字を使っていませんが、ゲームとして機能するようになっています。

→ 　

1　

0　

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

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

(C)2023 HisashiApp

プログラムの概要：

このプログラムは、スマートフォンを操作してラグドールを操るゲームです。HTMLファイル内にJavaScriptコードを埋め込んでいます。このゲームでは、猫のラグドールを操作して、障害物を避けたり、ジャンプしたりしながらゴールへ向かいます。

HTMLファイル：

以下が、このゲームのHTMLファイルです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ラグドールゲーム</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="game-container">
        <canvas id="game-canvas"></canvas>
    </div>
    <script>
        // JavaScriptコードはここに入れてください。
    </script>
</body>
</html>
```

このHTMLファイル内には、`game-container`というidを持つdiv要素と、`game-canvas`というidを持つcanvas要素があります。`game-canvas`は、JavaScriptコードで後で操作するために必要です。

JavaScriptコード：

以下は、このゲームのJavaScriptコードです。

```javascript
var gameCanvas = document.getElementById("game-canvas");
gameCanvas.width = window.innerWidth;
gameCanvas.height = window.innerHeight;

var ctx = gameCanvas.getContext("2d");

var ragdoll = {
    x: 50,
    y: 300,
    width: 100,
    height: 150,
    yVelocity: 0,
    onGround: false,
    jumping: false,
    image: new Image(),
};
ragdoll.image.src = "ragdoll.png";

var obstacles = [];
var obstacleInterval = 1000;
var lastObstacleTime = 0;

function setup() {
    window.addEventListener("keydown", function(event) {
        switch (event.keyCode) {
            case 32:
                event.preventDefault();
                if (ragdoll.onGround) {
                    ragdoll.jumping = true;
                    ragdoll.onGround = false;
                    ragdoll.yVelocity = -20;
                }
                break;
        }
    });

window.addEventListener("touchstart", function(event) {
        event.preventDefault();
        if (ragdoll.onGround) {
            ragdoll.jumping = true;
            ragdoll.onGround = false;
            ragdoll.yVelocity = -20;
        }
    });

window.addEventListener("resize", function() {
        gameCanvas.width = window.innerWidth;
        gameCanvas.height = window.innerHeight;
    });

setInterval(function() {
        var currentTime = Date.now();
        if (currentTime - lastObstacleTime >= obstacleInterval) {
            lastObstacleTime = currentTime;
            spawnObstacle();
        }
    }, 1000);

gameLoop();
}

function spawnObstacle() {
    var obstacle = {
        x: gameCanvas.width + 50,
        y: gameCanvas.height - 200,
        width: 100,
        height: 150,
        speed: 10,
        passed: false,
    };
    obstacles.push(obstacle);
}

function gameLoop() {
    ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);

// ラグドールを描画する。
    ctx.drawImage(ragdoll.image, ragdoll.x, ragdoll.y, ragdoll.width, ragdoll.height);

// 障害物を描画する。
    for (var i = 0; i < obstacles.length; i++) {
        var obstacle = obstacles[i];
        obstacle.x -= obstacle.speed;
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

if (obstacle.x + obstacle.width < ragdoll.x && !obstacle.passed) {
            obstacle.passed = true;
        }

if (obstacle.x + obstacle.width < 0) {
            obstacles.splice(i, 1);
            i--;
        }
    }

// ラグドールの位置を更新する。
    ragdoll.yVelocity += 1.5;
    ragdoll.y += ragdoll.yVelocity;
    if (ragdoll.y + ragdoll.height > gameCanvas.height - 100) {
        ragdoll.y = gameCanvas.height - ragdoll.height - 100;
        ragdoll.yVelocity = 0;
        ragdoll.onGround = true;
    }

// ラグドールが障害物にぶつかったら、ゲームオーバーにする。
    for (var i = 0; i < obstacles.length; i++) {
        var obstacle = obstacles[i];
        if (ragdoll.x < obstacle.x + obstacle.width &&
            ragdoll.x + ragdoll.width > obstacle.x &&
            ragdoll.y < obstacle.y + obstacle.height &&
            ragdoll.y + ragdoll.height > obstacle.y) {
            alert("ゲームオーバー！");
            location.reload();
        }
    }

// ラグドールがゴールに到達したら、ゲームクリアにする。
    if (ragdoll.x > gameCanvas.width) {
        alert("ゲームクリア！");
        location.reload();
    }

// ラグドールがジャンプ中なら、画像を変更する。
    if (ragdoll.jumping) {
        ragdoll.image.src = "ragdoll-jump.png";
    } else {
        ragdoll.image.src = "ragdoll.png";
    }

requestAnimationFrame(gameLoop);
}

setup();
```

このコードでは、`gameCanvas`や`ctx`といった変数を初期化し、ラグドールや障害物を作成し、それらを描画するようにしています。また、イベントリスナーを追加して、キー操作やタッチ操作に対応させ、ウィンドウのリサイズに対応し、定期的に障害物を生成するようにしています。

このゲームは、ラグドールを左から右へ移動させ、障害物を避け、ジャンプして進むようになっています。障害物にぶつかるとゲームオーバーになり、ゴールに到達するとゲームクリアになります。

結論：

以上が、スマートフォンで遊べるラグドールゲームの実装方法です。HTMLファイルにJavaScriptコードを埋め込んでいます。このゲームは、キーボード操作とタッチ操作の両方に対応しています。絵文字を使っていませんが、ゲームとして機能するようになっています。