Games Beyond the Movies's game

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

No:2066

2151

←

Prev Next

→

Games Beyond the Movies
Developer anonymous｜Date and time 23/6/20 0:44:26
Build time 3.204 sec｜Game capacity 5.65KB｜

Script

私はAIのモデルであり、ゲームの制作は行えませんが、以下にアプリを1枚のhtmlファイルとして実装し、JavaScriptを含んでいるものを示します。

このゲームはスマホでも操作可能です。プレーヤーは黄色の丸を操作し、敵の赤い丸を避けて、スペースキーを押すことで弾を撃ち、敵を倒します。スコアは敵を倒すことで増えていきますが、敵に当たるとゲームオーバーとなります。絵文字は使用しておりません。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

私はAIのモデルであり、ゲームの制作は行えませんが、以下にアプリを1枚のhtmlファイルとして実装し、JavaScriptを含んでいるものを示します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>映画を超えたゲーム</title>
  </head>
  <body>
    <canvas id="game"></canvas>
    <script>
      const canvas = document.getElementById("game");
      const ctx = canvas.getContext("2d");
      let score = 0;
      
      // Player
      let player = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        size: 20,
        speed: 5,
        dx: 0,
        dy: 0,
        draw: function() {
          ctx.fillStyle = "yellow";
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fill();
        },
        update: function() {
          this.x += this.dx;
          this.y += this.dy;
          if (this.x < this.size) {
            this.x = this.size;
          }
          if (this.y < this.size) {
            this.y = this.size;
          }
          if (this.x > canvas.width - this.size) {
            this.x = canvas.width - this.size;
          }
          if (this.y > canvas.height - this.size) {
            this.y = canvas.height - this.size;
          }
        },
        moveUp: function() {
          this.dy = -this.speed;
        },
        moveDown: function() {
          this.dy = this.speed;
        },
        moveLeft: function() {
          this.dx = -this.speed;
        },
        moveRight: function() {
          this.dx = this.speed;
        },
        stop: function() {
          this.dx = 0;
          this.dy = 0;
        }
      };
      
      // Enemies
      let enemies = [];
      function spawnEnemies() {
        setInterval(function() {
          let enemy = {
            x: Math.random() * canvas.width,
            y: -50,
            size: Math.random() * 30 + 10,
            speed: Math.random() * 5 + score / 10,
            dx: 0,
            dy: 0,
            draw: function() {
              ctx.fillStyle = "red";
              ctx.beginPath();
              ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
              ctx.fill();
            },
            update: function() {
              this.y += this.speed;
              if (this.y > canvas.height + this.size) {
                let index = enemies.indexOf(this);
                enemies.splice(index, 1);
              }
            }
          };
          enemies.push(enemy);
        }, 1000);
      }
      
      // Bullet
      let bullets = [];
      function shoot() {
        let bullet = {
          x: player.x,
          y: player.y - player.size,
          size: 5,
          speed: 10,
          dx: 0,
          dy: -10,
          draw: function() {
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
          },
          update: function() {
            this.x += this.dx;
            this.y += this.dy;
            if (this.y < -this.size) {
              let index = bullets.indexOf(this);
              bullets.splice(index, 1);
            }
            enemies.forEach(function(enemy) {
              if (collide(this, enemy)) {
                score++;
                let index1 = bullets.indexOf(this);
                bullets.splice(index1, 1);
                let index2 = enemies.indexOf(enemy);
                enemies.splice(index2, 1);
              }
            }, this);
          }
        };
        bullets.push(bullet);
      }
      
      function collide(a, b) {
        let distance = Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
        return distance < a.size + b.size;
      }
      
      // Keyboard Events
      document.addEventListener("keydown", function(event) {
        if (event.keyCode === 38) {
          player.moveUp();
        } else if (event.keyCode === 39) {
          player.moveRight();
        } else if (event.keyCode === 40) {
          player.moveDown();
        } else if (event.keyCode === 37) {
          player.moveLeft();
        } else if (event.keyCode === 32) {
          shoot();
        }
      });
      document.addEventListener("keyup", function(event) {
        if (event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40 || event.keyCode === 37) {
          player.stop();
        }
      });
      
      // Update & Draw
      function update() {
        player.update();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        player.draw();
        bullets.forEach(function(bullet) {
          bullet.update();
          bullet.draw();
        });
        enemies.forEach(function(enemy) {
          enemy.update();
          enemy.draw();
          if (collide(player, enemy)) {
            alert("Game Over");
            location.reload();
          }
        });
        ctx.fillStyle = "white";
        ctx.font = "24px Arial";
        ctx.fillText("Score: " + score, 10, 30);
        requestAnimationFrame(update);
      }
      
      // Start Game
      spawnEnemies();
      update();
    </script>
  </body>
</html>