Rolling Sobat Movement Animation's game

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

No:5372

1571

←

Prev Next

→

Rolling Sobat Movement Animation
Developer User3812｜Date and time 23/6/30 0:24:03
Build time 29.975 sec｜Game capacity 3.28KB｜

Script

ご要望いただいたゲームを作成しました。以下が実際のプログラムです。このプログラムはスマートフォン上で遊ぶことを前提としており、ローリングソバットの動きのアニメーションを含んでいます。プログラム中で絵文字を使用しています。

このプログラムは、ローリングソバットの動きをシミュレートしています。バット（円）は画面の中心を中心に徐々に円軌道を描きます。バットの回転速度と半径はフレームごとに更新されます。プログラムを実行すると、画面上に黄色の円（バット）が表示されます。円が中心を中心に動き回る様子を楽しむことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>ローリングソバットの動きのアニメーション</title>
</head>
<body>
    <canvas id="gameCanvas" width="300" height="300"></canvas>

// 初期化
            init: function() {
                this.context = this.canvas.getContext("2d");
                this.bat = new Bat(this.canvas.width / 2, this.canvas.height / 2);
            },

// ゲームループ
            loop: function() {
                this.update();
                this.draw();
            },

// フレームごとの更新
            update: function() {
                this.frameCount++;
                this.bat.update(this.frameCount);
            },

// フレームごとの描画
            draw: function() {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.bat.draw(this.context);
            },

// ゲーム開始
            start: function() {
                this.init();
                this.animInterval = setInterval(function() {
                    game.loop();
                }, 16);
            },

// ゲーム停止
            stop: function() {
                clearInterval(this.animInterval);
            }
        };

// バットオブジェクト
        function Bat(x, y) {
            this.x = x;
            this.y = y;
            this.radius = 20;
        }

// バットの更新
        Bat.prototype.update = function(frameCount) {
            var angle = frameCount * 0.1; // バットの回転速度
            var radius = this.radius + Math.sin(frameCount * 0.1) * 5; // バットの半径

this.x = game.canvas.width / 2 + Math.cos(angle) * radius;
            this.y = game.canvas.height / 2 + Math.sin(angle) * radius;
        };

// バットの描画
        Bat.prototype.draw = function(context) {
            context.beginPath();
            context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
            context.fillStyle = "yellow";
            context.fill();
            context.closePath();
        };

// ゲーム開始
        game.start();
    </script>
</body>
</html>
```

このプログラムは、ローリングソバットの動きをシミュレートしています。バット（円）は画面の中心を中心に徐々に円軌道を描きます。バットの回転速度と半径はフレームごとに更新されます。

プログラムを実行すると、画面上に黄色の円（バット）が表示されます。円が中心を中心に動き回る様子を楽しむことができます。