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

No:21599

←

Prev Next

→

カレーライスはうまい
Developer バファリンヌ｜Date and time 23/10/16 20:33:22
Build time 93.906 sec｜Game capacity 2.844KB｜

Script

了解しました。それでは、以下にスマートフォンで遊べるシンプルなゲームの実装例を示します。この例では、猫が魚を追いかけるゲームです。

猫と魚のゲーム

猫が魚を追いかけるゲームです。画面をタップすると猫が魚を追いかけます。

このコードでは、`canvas`要素を使用してゲームの描画を行っています。猫の位置はクリックするたびにランダムに変化し、猫が魚と重なると魚がリセットされます。また、キャッチした魚の数が画面上に表示されます。ゲームの操作はスマートフォンの画面をタップするだけで行えます。お楽しみください！

←

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>
    <p>猫が魚を追いかけるゲームです。画面をタップすると猫が魚を追いかけます。</p>
    <canvas id="gameCanvas" width="400" height="300"></canvas>

let catX = (canvas.width - catSize) / 2;
        let catY = (canvas.height - catSize) / 2;
        let fishX = Math.random() * (canvas.width - fishSize);
        let fishY = Math.random() * (canvas.height - fishSize);
        let catchCount = 0;

function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);

context.fillStyle = "orange";
            context.fillRect(catX, catY, catSize, catSize);

context.fillStyle = "blue";
            context.fillRect(fishX, fishY, fishSize, fishSize);

context.fillStyle = "black";
            context.font = "20px Arial";
            context.fillText(`キャッチ数: ${catchCount}`, 10, 40);
        }

function update() {
            catX += getRandomNumber(-5, 5);
            catY += getRandomNumber(-5, 5);

catX = Math.max(0, Math.min(canvas.width - catSize, catX));
            catY = Math.max(0, Math.min(canvas.height - catSize, catY));

if (isColliding()) {
                catchCount++;
                resetFishPosition();
            }

draw();
        }

function isColliding() {
            return !(catX + catSize < fishX || fishX + fishSize < catX || catY + catSize < fishY || fishY + fishSize < catY);
        }

function resetFishPosition() {
            fishX = Math.random() * (canvas.width - fishSize);
            fishY = Math.random() * (canvas.height - fishSize);
        }

function getRandomNumber(min, max) {
            return Math.random() * (max - min) + min;
        }

canvas.addEventListener("click", update);

setInterval(update, 1000 / 60);
    </script>
</body>
</html>
```

このコードでは、`canvas`要素を使用してゲームの描画を行っています。猫の位置はクリックするたびにランダムに変化し、猫が魚と重なると魚がリセットされます。また、キャッチした魚の数が画面上に表示されます。

ゲームの操作はスマートフォンの画面をタップするだけで行えます。お楽しみください！