AI game creator

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

No:5100

791

←

Prev Next

→

Developer もちきなこ｜Date and time 23/6/29 18:15:03
Build time 35.223 sec｜Game capacity 3.343KB｜

Script

了解です。以下に、スマホで遊べるシンプルなゲームの例を示します。

このプログラムでは、HTMLの`canvas`要素を使ってプレイヤーが敵を避けるシンプルなゲームを実装しています。プレイヤーは左右に移動し、敵は上から下に向かって移動します。プレイヤーと敵が衝突した場合、ゲームオーバーとなります。スコアが表示され、ゲームオーバー時にはアラートでスコアが表示されます。ご参考になれば幸いです。もし別のゲームや機能が欲しい場合はお知らせください。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です。以下に、スマホで遊べるシンプルなゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>スマホゲーム</title>
</head>
<body>
  <canvas id="canvas" width="300" height="400"></canvas>

start: function() {
        this.canvas = document.getElementById('canvas');
        this.context = this.canvas.getContext('2d');
        this.player = new Player(150, 350, 30, 30);
        this.enemy = new Enemy(0, 0, 30, 30);

this.intervalId = setInterval(() => {
          this.update();
          this.draw();
          this.checkCollision();
        }, 10);

window.addEventListener('keydown', (event) => {
          this.player.move(event.keyCode);
        });
      },

update: function() {
        this.enemy.y += this.speed;

if (this.enemy.y > 400) {
          this.enemy.x = Math.random() * 270;
          this.enemy.y = 0;
          this.score++;
        }
      },

draw: function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

this.context.fillStyle = "blue";
        this.context.fillRect(this.player.x, this.player.y, this.player.width, this.player.height);

this.context.fillStyle = "red";
        this.context.fillRect(this.enemy.x, this.enemy.y, this.enemy.width, this.enemy.height);

this.context.font = "20px Arial";
        this.context.fillText(`Score: ${this.score}`, 10, 30);
      },

checkCollision: function() {
        if (this.enemy.x < this.player.x + this.player.width &&
            this.enemy.x + this.enemy.width > this.player.x &&
            this.enemy.y < this.player.y + this.player.height &&
            this.enemy.y + this.enemy.height > this.player.y) {
          clearInterval(this.intervalId);
          alert("ゲームオーバー！\nスコア: " + this.score);
        }
      }
    };

// プレイヤーオブジェクトの定義
    function Player(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;

this.move = function(keyCode) {
        switch (keyCode) {
          case 37: // 左
            if (this.x > 0) this.x -= 5;
            break;
          case 39: // 右
            if (this.x < 270) this.x += 5;
            break;
        }
      };
    }

// 敵オブジェクトの定義
    function Enemy(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    }

game.start();
  </script>
</body>
</html>
```

ご参考になれば幸いです。もし別のゲームや機能が欲しい場合はお知らせください。