AI game creator

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

No:286

896

←

Prev Next

→

scientific ninja
Developer User2942｜Date and time 23/6/11 16:30:04
Build time 56.959 sec｜Game capacity 5.23KB｜

Script

Score: 0

このゲームは、プレイヤーが火の鳥で、敵を避けながら弾を撃って倒すという内容です。プレイヤーはスマホを傾けて移動できます。スコアは画面上部に表示され、敵を倒すごとに増えていきます。ただし、プレイヤーが敵と接触するとゲームオーバーになります。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>科学忍法火の鳥ゲーム</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-size: 3vw;
    }
    
    canvas {
      width: 100%;
      height: 70%;
      display: block;
    }
    
    #score {
      position: relative;
      top: 10px;
      left: 10px;
      font-size: 4vw;
    }
  </style>
</head>

<body>
  <canvas id="gameCanvas"></canvas>
  <div id="score">Score: 0</div>
  <script>
    // ゲームの設定
    var GAME_WIDTH = 640;
    var GAME_HEIGHT = 480;
    var MAX_ENEMIES = 3;
    var PLAYER_SPEED = 5;
    var ENEMY_SPEED = 2;
    var BULLET_SPEED = 8;
    var SCORE_RATE = 100;

// ゲームオブジェクト
    var canvas = document.getElementById("gameCanvas");
    var context = canvas.getContext("2d");
    var player;
    var enemies = [];
    var bullets = [];
    var score = 0;

// ゲーム開始
    function startGame() {
      player = {
        x: GAME_WIDTH / 2,
        y: GAME_HEIGHT - 50,
        width: 25,
        height: 50
      };

updateScore();

setInterval(function() {
        if (enemies.length < MAX_ENEMIES) {
          var x = Math.random() * GAME_WIDTH;
          var y = 0;
          var width = 25;
          var height = 50;
          var enemy = {
            x: x,
            y: y,
            width: width,
            height: height
          };
          enemies.push(enemy);
        }
      }, 500);

setInterval(updateGame, 1000 / 30);

canvas.addEventListener("touchmove", function(event) {
        movePlayer(event.touches[0].clientX);
      });
      canvas.addEventListener("mousemove", function(event) {
        movePlayer(event.clientX);
      });
      canvas.addEventListener("click", shootBullet);
    }

// ユーザー操作
    function movePlayer(x) {
      var newX = x - canvas.offsetLeft;
      newX = Math.max(player.width / 2, newX);
      newX = Math.min(GAME_WIDTH - player.width / 2, newX);
      player.x = newX;
    }

function shootBullet() {
      var x = player.x;
      var y = player.y - player.height / 2;
      var width = 10;
      var height = 20;
      var bullet = {
        x: x,
        y: y,
        width: width,
        height: height
      };
      bullets.push(bullet);
    }

// ゲームの更新
    function updateGame() {
      context.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
      drawPlayer();
      drawEnemies();
      drawBullets();
      updateEnemies();
      updateBullets();
      updateScore();
    }

function updateScore() {
      context.fillStyle = "#000000";
      context.fillText("Score: " + score, 10, 30);
    }

// 衝突判定
    function checkCollision(a, b) {
      var hit =
        ((a.x + a.width) >= b.x && a.x <= (b.x + b.width)) &&
        ((a.y + a.height) >= b.y && a.y <= (b.y + b.height));
      return hit;
    }

// ゲームの描画
    function drawPlayer() {
      context.fillStyle = "#FF0000";
      var x = player.x - player.width / 2;
      var y = player.y - player.height / 2;
      context.fillRect(x, y, player.width, player.height);
    }

function drawEnemies() {
      context.fillStyle = "#0000FF";
      for (var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        var x = enemy.x - enemy.width / 2;
        var y = enemy.y - enemy.height / 2;
        context.fillRect(x, y, enemy.width, enemy.height);
      }
    }

function drawBullets() {
      context.fillStyle = "#00FF00";
      for (var i = 0; i < bullets.length; i++) {
        var bullet = bullets[i];
        var x = bullet.x - bullet.width / 2;
        var y = bullet.y - bullet.height / 2;
        context.fillRect(x, y, bullet.width, bullet.height);
      }
    }

// ゲームオーバー
    function gameOver() {
      alert("Game Over!");
      location.reload();
    }

// ゲーム開始
    startGame();
  </script>
</body>

</html>