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

No:12812

67

ファック
Developer User5574｜Date and time 23/8/23 19:32:19
Build time 45.672 sec｜Game capacity 4.753KB｜

了解しました。では、スマホで遊べるシンプルなゲームを実装してみましょう。以下にサンプルコードを示します。

スマホゲーム

Score: 0

このコードは、プレイヤーが敵を避けながらスコアを稼ぐシンプルなゲームです。プレイヤーは左右に移動し、敵は上からランダムに降ってきます。ゲームオーバーになると、アラートが表示され、スコアが表示されます。なお、スマホ操作に対応するために、キーボードイベントを使用しています。スマホではキーボードがないので、適宜タッチイベントなどに変更してください。絵文字を使用して、より楽しいゲームになることを願っています。

→ 　

0　

0　

　
　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

了解しました。では、スマホで遊べるシンプルなゲームを実装してみましょう。以下にサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>スマホゲーム</title>
    <style>
        body {
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>スマホゲーム</h1>
    <p id="score">Score: 0</p>
    <canvas id="gameCanvas" width="300" height="500"></canvas>

<script>
        // ゲームオブジェクト
        var game = {
            canvas: document.getElementById("gameCanvas"),
            ctx: null,
            score: 0,
            interval: null,
            player: null,
            enemies: [],
            
            initialize: function() {
                this.ctx = this.canvas.getContext("2d");
                this.player = new Player(150, 450);
                this.interval = setInterval(this.update.bind(this), 20);
                window.addEventListener("keydown", this.handleKeyDown.bind(this));
                window.addEventListener("keyup", this.handleKeyUp.bind(this));
            },
            
            update: function() {
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                this.player.draw(this.ctx);
                for (var i = 0; i < this.enemies.length; i++) {
                    this.enemies[i].draw(this.ctx);
                    if (this.collisionDetection(this.player, this.enemies[i])) {
                        alert("ゲームオーバー！スコア: " + this.score);
                        clearInterval(this.interval);
                        break;
                    }
                    if (this.enemies[i].y > this.canvas.height) {
                        this.enemies.splice(i, 1);
                        i--;
                        this.score++;
                        document.getElementById("score").textContent = "Score: " + this.score;
                    }
                }
                if (Math.random() < 0.02) {
                    this.enemies.push(new Enemy(Math.random() * (this.canvas.width - 50), -50));
                }
            },
            
            handleKeyDown: function(event) {
                if (event.keyCode === 37) {
                    this.player.vx = -5;
                } else if (event.keyCode === 39) {
                    this.player.vx = 5;
                }
            },
            
            handleKeyUp: function(event) {
                if (event.keyCode === 37 || event.keyCode === 39) {
                    this.player.vx = 0;
                }
            },
            
            collisionDetection: function(obj1, obj2) {
                return obj1.x < obj2.x + obj2.width &&
                    obj1.x + obj1.width > obj2.x &&
                    obj1.y < obj2.y + obj2.height &&
                    obj1.y + obj1.height > obj2.y;
            }
        };
        
        // プレイヤーオブジェクト
        function Player(x, y) {
            this.x = x;
            this.y = y;
            this.width = 50;
            this.height = 50;
            this.vx = 0;
        }
        
        Player.prototype.draw = function(ctx) {
            ctx.fillStyle = "👾";
            ctx.fillRect(this.x, this.y, this.width, this.height);
            this.x += this.vx;
            if (this.x < 0) {
                this.x = 0;
            } else if (this.x > game.canvas.width - this.width) {
                this.x = game.canvas.width - this.width;
            }
        };
        
        // 敵オブジェクト
        function Enemy(x, y) {
            this.x = x;
            this.y = y;
            this.width = 50;
            this.height = 50;
            this.vy = 3;
        }
        
        Enemy.prototype.draw = function(ctx) {
            ctx.fillStyle = "👺";
            ctx.fillRect(this.x, this.y, this.width, this.height);
            this.y += this.vy;
        };
        
        // ゲームの初期化
        game.initialize();
    </script>
</body>
</html>
```

このコードは、プレイヤーが敵を避けながらスコアを稼ぐシンプルなゲームです。プレイヤーは左右に移動し、敵は上からランダムに降ってきます。ゲームオーバーになると、アラートが表示され、スコアが表示されます。

なお、スマホ操作に対応するために、キーボードイベントを使用しています。スマホではキーボードがないので、適宜タッチイベントなどに変更してください。

絵文字を使用して、より楽しいゲームになることを願っています。