【Javascript】桜が舞い散る演出のスクリプト

桜をモチーフにしたゲームが十数年の時を得て、
今年の9月ごろにリメイク版が発売されますね。

公式サイトを見ていたら、桜が降ってくる演出が素敵だったので、
AI君に実現できるスクリプトを生成してもらいました。

BardとChatGPT 3.5 Turboで試しましたが、
Bardはまだ試験運用の為か、ダメでした。。。

ChatGPT編

質問

HP上で桜が舞い散るような演出をするJSとHTMLを記述してください。

回答

以下は、HTMLとJavaScriptを使用して桜が舞い散る演出を作成する例です。

<!DOCTYPE html>
<html>
<head>
    <title>Sakura Falling</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="sakuraCanvas"></canvas>

    <script>
        // キャンバスの初期設定
        var canvas = document.getElementById("sakuraCanvas");
        var ctx = canvas.getContext("2d");
        var width = window.innerWidth;
        var height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;

        // 桜の画像を読み込む
        var sakuraImage = new Image();
        sakuraImage.src = "sakura.png";

        // 桜のパラメーター
        var sakuraCount = 100; // 桜の数
        var sakuraSize = 30; // 桜のサイズ
        var sakuraSpeed = 1; // 桜の降下速度
        var sakuraArray = [];

        // 桜オブジェクトの定義
        function Sakura(x, y) {
            this.x = x;
            this.y = y;
            this.speed = sakuraSpeed + Math.random() * 0.5;
            this.radius = Math.random() * sakuraSize + 5;
        }

        Sakura.prototype.draw = function() {
            ctx.drawImage(sakuraImage, this.x, this.y, this.radius, this.radius);
        }

        Sakura.prototype.update = function() {
            this.y += this.speed;
            if (this.y > height + this.radius) {
                this.y = -this.radius;
                this.x = Math.random() * width;
            }
        }

        // 初期化関数
        function init() {
            for (var i = 0; i < sakuraCount; i++) {
                var x = Math.random() * width;
                var y = Math.random() * height;
                sakuraArray.push(new Sakura(x, y));
            }
        }

        // アニメーションループ
        function animate() {
            ctx.clearRect(0, 0, width, height);
            for (var i = 0; i < sakuraArray.length; i++) {
                sakuraArray[i].update();
                sakuraArray[i].draw();
            }
            requestAnimationFrame(animate);
        }

        // 初期化とアニメーションの開始
        sakuraImage.onload = function() {
            init();
            animate();
        };
    </script>
</body>
</html>

上記のコードをHTMLファイルに保存し、
同じディレクトリにsakura.pngという名前の桜の画像ファイルを用意してください。
これにより、指定した数の桜が画面上を降りる演出が実現されます。

なお、この例では桜の画像ファイルとしてsakura.pngを使用していますが、
他の画像を使用する場合は、sakuraImage.srcの値を適切なパスに変更してください。

実行結果

桜の花びらをCSSでなく、画像を利用するとのことなので、
いらすとや様の画像をお借りしました。

ちゃんと動きますね！

EX：質問

☆記述がES6出ないのが気になるので修正してもらった。

ちなみに書き方が古いようですが、ES6の記法に修正できますか？

EX：回答

もちろんです！以下は、ES6の記法を使用した修正版のコードです。

<!DOCTYPE html>
<html>
<head>
    <title>Sakura Falling</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="sakuraCanvas"></canvas>

    <script>
        // キャンバスの初期設定
        const canvas = document.getElementById("sakuraCanvas");
        const ctx = canvas.getContext("2d");
        let width = window.innerWidth;
        let height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;

        // 桜の画像を読み込む
        const sakuraImage = new Image();
        sakuraImage.src = "sakura.png";

        // 桜のパラメーター
        const sakuraCount = 100; // 桜の数
        const sakuraSize = 30; // 桜のサイズ
        const sakuraSpeed = 1; // 桜の降下速度
        const sakuraArray = [];

        // 桜オブジェクトの定義
        class Sakura {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.speed = sakuraSpeed + Math.random() * 0.5;
                this.radius = Math.random() * sakuraSize + 5;
            }

            draw() {
                ctx.drawImage(sakuraImage, this.x, this.y, this.radius, this.radius);
            }

            update() {
                this.y += this.speed;
                if (this.y > height + this.radius) {
                    this.y = -this.radius;
                    this.x = Math.random() * width;
                }
            }
        }

        // 初期化関数
        function init() {
            for (let i = 0; i < sakuraCount; i++) {
                const x = Math.random() * width;
                const y = Math.random() * height;
                sakuraArray.push(new Sakura(x, y));
            }
        }

        // アニメーションループ
        function animate() {
            ctx.clearRect(0, 0, width, height);
            sakuraArray.forEach((sakura) => {
                sakura.update();
                sakura.draw();
            });
            requestAnimationFrame(animate);
        }

        // 初期化とアニメーションの開始
        sakuraImage.onload = function() {
            init();
            animate();
        };
    </script>
</body>
</html>

上記の修正版では、varの代わりにletやconstを使用し、
関数の代わりにアロー関数を使用しています。
また、forループの代わりにforEachメソッドを使用しています。
これにより、より現代的なJavaScriptの書き方になっています。

素晴らしいの一言ですね。

Bard編　エラーコードを生成

質問

HP上で桜が舞い散るような演出をするJSとHTMLを記述してください。

回答

はい、喜んで。HP上で桜が舞い散るような演出をするJSとHTMLは次のようになります。

<html>

<head>
  <title>桜舞い散るHP</title>
</head>

<body>
  <div id="sakura"></div>
  <script>
    var sakura = document.getElementById("sakura");
    var sakuras = [];
    for (var i = 0; i < 100; i++) {
      var sakura = document.createElement("div");
      sakura.className = "sakura";
      sakura.style.top = Math.random() * 100 + "%";
      sakura.style.left = Math.random() * 100 + "%";
      sakura.style.width = 20 + "px";
      sakura.style.height = 20 + "px";
      sakura.style.background = "pink";
      sakura.style.border - radius = 100 %;
      sakuras.push(sakura);
      sakura.onclick = function () {
        this.parentNode.removeChild(this);
      };
    }

    var intervalId = setInterval(function () {
      for (var i = 0; i < sakuras.length; i++) {
        var sakura = sakuras[i];
        sakura.style.top = sakura.style.top - 10 + "%";
        if (sakura.style.top < 0) {
          sakura.parentNode.removeChild(sakura);
        }
      }
    }, 100);
  </script>
</body>

</html>

このコードは、桜の画像を100個作成し、画面上にランダムに配置します。
桜をクリックすると、画面から消えます。
また、桜は1秒ごとに10％ずつ下に移動し、画面の下に到達すると消えます。