Shooting Star Making Game's game

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

No:5107

4283

←

Prev Next

→

Shooting Star Making Game
Developer もちきなこ｜Date and time 23/6/29 18:17:39
Build time 31.921 sec｜Game capacity 3.584KB｜

Script

了解しました。以下に流れ星を作るゲームの実装例を示します。

上記のコードは、ブラウザ上で流れ星を生成し、左から右へ流れるアニメーションを実装しています。画面内にランダムな位置で流れ星が現れ、ランダムな速度で右へ移動します。流れ星が画面外に出ると消え、次に流れ星が生成されます。このゲームではユーザーの操作は不要で、自動的に流れ星が生成されるため、スマートフォンでも遊ぶことができます。また、流れ星のアニメーションに絵文字を使用していますが、ブラウザが絵文字をサポートしていれば、他の絵文字を使用することも可能です。なお、流れ星の生成間隔や速度、画面サイズなどの設定は変更可能です。より快適なプレイ環境に調整してみてください。

←

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>
        #canvas {
            background: black;
            position: absolute;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>

move() {
                this.x -= this.speed;
                this.element.style.left = `${this.x}px`;
            }

isOutOfScreen() {
                return this.x < -50;
            }

createElement() {
                const starElement = document.createElement('span');
                starElement.innerHTML = '✨'; // 絵文字を使用
                starElement.style.position = 'absolute';
                starElement.style.color = 'white';
                starElement.style.fontSize = '24px';
                starElement.style.top = `${this.y}px`;
                starElement.style.left = `${this.x}px`;
                document.getElementById('canvas').appendChild(starElement);
                this.element = starElement;
            }

removeElement() {
                document.getElementById('canvas').removeChild(this.element);
                this.element = null;
            }
        }

// 流れ星を生成して移動させる関数
        function createStar() {
            const screenHeight = window.innerHeight;
            const startX = window.innerWidth + 50; // 画面外でスタートする
            const startY = Math.floor(Math.random() * (screenHeight - 50)); // 画面内のランダムな位置でスタートする
            const speed = Math.floor(Math.random() * 5) + 1; // 1~5のランダムな速度で移動する

const star = new Star(startX, startY, speed);
            star.createElement();

const interval = setInterval(() => {
                star.move();
                if (star.isOutOfScreen()) {
                    clearInterval(interval);
                    star.removeElement();
                }
            }, 30); // 30ミリ秒ごとに移動する

setTimeout(createStar, Math.random() * 2000 + 500); // 0.5~2.5秒のランダムな間隔で流れ星を生成する
        }

// ゲームの開始
        createStar();
    </script>
</body>
</html>
```

上記のコードは、ブラウザ上で流れ星を生成し、左から右へ流れるアニメーションを実装しています。画面内にランダムな位置で流れ星が現れ、ランダムな速度で右へ移動します。流れ星が画面外に出ると消え、次に流れ星が生成されます。

このゲームではユーザーの操作は不要で、自動的に流れ星が生成されるため、スマートフォンでも遊ぶことができます。また、流れ星のアニメーションに絵文字を使用していますが、ブラウザが絵文字をサポートしていれば、他の絵文字を使用することも可能です。

なお、流れ星の生成間隔や速度、画面サイズなどの設定は変更可能です。より快適なプレイ環境に調整してみてください。