Glad to hear youve responded to the sound.'s game | AI game creator

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

No:6732

145

Glad to hear youve responded to the sound.
Developer もちきなこ｜Date and time 23/7/3 12:32:33
Build time 37.878 sec｜Game capacity 4.291KB｜

了解しました。以下に、簡単なゲームとして動作するHTMLファイルを示します。このゲームでは、「アステロイド」と呼ばれる絵文字が画面内を動き回り、プレイヤーはタップ操作でアステロイドを避けることを目指します。また、ゲーム内で効果音を再生します。

このゲームでは、アステロイドが画面内をランダムに移動します。プレイヤーは画面をタップすることでプレイヤーキャラクターを移動させます。アステロイドに接触すると爆発音が再生され、ゲームオーバーとなります。スコアは画面上部に表示されます。アステロイドがランダムに生成され、プレイヤーがゲームオーバーになるまで続けられます。なお、効果音を再生するには、「explosion.mp3」というファイルを用意し、ゲームファイルと同じディレクトリに置いてください。また、アステロイドの絵文字は画像ファイルとして用意し、上記のコード中の「asteroid.png」というファイル名を実際のファイル名に変更してください。以上が、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>Asteroid Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            overflow: hidden;
        }
    </style>
    <script>
        window.addEventListener('load', function () {
            var canvas = document.createElement('canvas');
            document.body.appendChild(canvas);

canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

var context = canvas.getContext('2d');

var asteroidImage = new Image();
            asteroidImage.src = 'asteroid.png';

var playerX = canvas.width / 2;
            var playerY = canvas.height / 2;
            var playerSize = 20;

var asteroids = [];
            var asteroidSize = 50;
            var asteroidSpeed = 2;

var score = 0;

var explosionSound = new Audio('explosion.mp3');

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

for (var i = 0; i < asteroids.length; i++) {
                    var asteroid = asteroids[i];
                    asteroid.x += asteroid.dx;
                    asteroid.y += asteroid.dy;

context.drawImage(asteroidImage, asteroid.x, asteroid.y, asteroidSize, asteroidSize);

if (playerX < asteroid.x + asteroidSize &&
                        playerX + playerSize > asteroid.x &&
                        playerY < asteroid.y + asteroidSize &&
                        playerY + playerSize > asteroid.y) {
                        // Player collided with asteroid
                        explosionSound.play();
                        endGame();
                    }
                }

context.fillStyle = 'white';
                context.font = '20px monospace';
                context.fillText('Score: ' + score, 10, 30);

requestAnimationFrame(update);
            }

function createAsteroid() {
                var asteroid = {
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    dx: Math.random() * asteroidSpeed - asteroidSpeed / 2,
                    dy: Math.random() * asteroidSpeed - asteroidSpeed / 2
                };

asteroids.push(asteroid);
            }

function onKeyPress(event) {
                playerX = event.touches[0].clientX;
                playerY = event.touches[0].clientY;
            }

function endGame() {
                alert('Game Over! Final Score: ' + score);
                location.reload();
            }

document.addEventListener('touchstart', onKeyPress);

for (var i = 0; i < 10; i++) {
                createAsteroid();
            }

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

このゲームでは、アステロイドが画面内をランダムに移動します。プレイヤーは画面をタップすることでプレイヤーキャラクターを移動させます。アステロイドに接触すると爆発音が再生され、ゲームオーバーとなります。スコアは画面上部に表示されます。アステロイドがランダムに生成され、プレイヤーがゲームオーバーになるまで続けられます。

なお、効果音を再生するには、「explosion.mp3」というファイルを用意し、ゲームファイルと同じディレクトリに置いてください。また、アステロイドの絵文字は画像ファイルとして用意し、上記のコード中の「asteroid.png」というファイル名を実際のファイル名に変更してください。

以上が、HTMLファイルとして実装されたゲームの例です。