hydroelectric power generation's game | AI game creator

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

No:6851

121

hydroelectric power generation
Developer User3898｜Date and time 23/7/4 0:50:14
Build time 35.818 sec｜Game capacity 3.748KB｜

了解しました。以下は、シンプルなゲーム「水力発電」を実装したHTMLファイルの例です。プレイヤーはスマホの画面をタップして水力発電所を制御し、できるだけ多くの電力を発生させることを目指します。

このゲームでは、プレイヤーが水力発電所を操作して落下する電力マークを集めることでポイントを獲得します。画面をタップするとプレイヤーがその位置に移動し、電力マークとの衝突判定を行います。画面上には現在の獲得ポイント数が表示されます。この例では、canvas要素を利用してゲーム画面を描画しています。JavaScriptを使ってプレイヤーや電力マークの位置を更新し、衝突判定を行っています。また、requestAnimationFrameを使ってゲームループを実現しています。プログラムの実行開始は、HTMLファイルをブラウザで開くことで行います。ブラウザ上で表示されるゲーム画面で、スマホの操作に応じてプレイヤーを操作することができます。

→ 　

1　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

了解しました。以下は、シンプルなゲーム「水力発電」を実装したHTMLファイルの例です。プレイヤーはスマホの画面をタップして水力発電所を制御し、できるだけ多くの電力を発生させることを目指します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水力発電</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

<script>
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

var gameWidth = canvas.width;
        var gameHeight = canvas.height;

var player = {
            x: gameWidth / 2,
            y: gameHeight - 50,
            width: 50,
            height: 50,
            speed: 5
        };

var electricity = {
            x: getRandomInt(0, gameWidth),
            y: 0,
            width: 10,
            height: 10,
            speed: 2,
            collected: 0
        };

function update() {
            movePlayer();
            moveElectricity();
            checkCollision();

drawGame();
        }

function movePlayer() {
            document.onmousedown = function(event) {
                player.x = event.clientX - canvas.offsetLeft - player.width / 2;
            }
        }

function moveElectricity() {
            electricity.y += electricity.speed;
            if (electricity.y > gameHeight) {
                electricity.x = getRandomInt(0, gameWidth);
                electricity.y = 0;
            }
        }

function checkCollision() {
            if (player.x < electricity.x + electricity.width &&
                player.x + player.width > electricity.x &&
                player.y < electricity.y + electricity.height &&
                player.y + player.height > electricity.y) {
                electricity.collected++;
                electricity.x = getRandomInt(0, gameWidth);
                electricity.y = 0;
            }
        }

function drawGame() {
            context.clearRect(0, 0, gameWidth, gameHeight);

context.fillStyle = "#73C2FB";
            context.fillRect(player.x, player.y, player.width, player.height);

context.fillStyle = "#FBC273";
            context.fillRect(electricity.x, electricity.y, electricity.width, electricity.height);

context.fillStyle = "black";
            context.font = "20px Arial";
            context.fillText("Collected: " + electricity.collected, 10, 30);

requestAnimationFrame(update);
        }

function getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

update();
    </script>
</body>
</html>
```

このゲームでは、プレイヤーが水力発電所を操作して落下する電力マークを集めることでポイントを獲得します。画面をタップするとプレイヤーがその位置に移動し、電力マークとの衝突判定を行います。画面上には現在の獲得ポイント数が表示されます。

この例では、canvas要素を利用してゲーム画面を描画しています。JavaScriptを使ってプレイヤーや電力マークの位置を更新し、衝突判定を行っています。また、requestAnimationFrameを使ってゲームループを実現しています。

プログラムの実行開始は、HTMLファイルをブラウザで開くことで行います。ブラウザ上で表示されるゲーム画面で、スマホの操作に応じてプレイヤーを操作することができます。