MMORPG's game | AI game creator

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

No:1585

396

MMORPG
Developer AI絵師｜Date and time 23/6/18 18:59:29
Build time 48.168 sec｜Game capacity 4.619KB｜

のようなセグメンテーションされたゲーム、非常に複雑なプログラムや膨大なリソースを必要としますが、この要件を満たすシングルHTMLファイルのゲームを実装することは非常に困難です。しかし、シンプルなゲームであれば可能であり、たとえば、以下のような「Emoji Run」というゲームを考えてみます。【ゲームの概要】プレイヤーは、障害物を避けながら画面の左端から右端まで進むランゲームです。走行中に集められる枚数に応じてポイントが加算されますが、障害物にぶつかってしまうとゲームオーバーです。【プログラム】以下のようなHTMLとJavaScriptでシングルHTMLファイルのゲームを実現することができます。CSSは簡単なものを利用しています。

【結果】このプログラムによって「Emoji Run」というランゲームが作成されます。プレイヤーは画面内をスワイプまたはタップし、障害物を避けつつ右端に到達することが目的です。プレイヤーが障害物に当たると、ゲームオーバーになり、プレイヤーのスコアが表示されます。スコアは画面に常に表示されています。プログラムで使用される画像はすべて絵文字で構成されています。何度もプレイすることができ、モバイルブラウザからアクセスすることができるため、スマートフォンで簡単に遊ぶことができます。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

のようなセグメンテーションされたゲーム、非常に複雑なプログラムや膨大なリソースを必要としますが、この要件を満たすシングルHTMLファイルのゲームを実装することは非常に困難です。しかし、シンプルなゲームであれば可能であり、たとえば、以下のような「Emoji Run」というゲームを考えてみます。

【ゲームの概要】
プレイヤーは、障害物を避けながら画面の左端から右端まで進むランゲームです。走行中に集められる枚数に応じてポイントが加算されますが、障害物にぶつかってしまうとゲームオーバーです。

【プログラム】
以下のようなHTMLとJavaScriptでシングルHTMLファイルのゲームを実現することができます。CSSは簡単なものを利用しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Emoji Run</title>
  <link rel="stylesheet" type="text/css" href="emoji_run.css">
</head>
<body>
  <div id="game"></div>
  <div id="status"></div>
  <script>
    var gameDiv = document.getElementById('game');
    var statusDiv = document.getElementById('status');

var gameWidth = screen.width * 0.8;
    var gameHeight = screen.height * 0.8;

var player = {
      x: gameWidth * 0.1,
      y: gameHeight * 0.5,
      speed: 10,
      score: 0,
      isGameOver: false
    };

var obstacles = [];

function addObstacle() {
      var obstacle = {
        x: gameWidth,
        y: Math.random() * gameHeight,
        width: gameHeight * 0.1,
        height: gameHeight * 0.1,
        speed: 5
      };
      obstacles.push(obstacle);
    }

function updateObstacles() {
      for (var i = 0; i < obstacles.length; i++) {
        obstacles[i].x -= obstacles[i].speed;
        if (obstacles[i].x + obstacles[i].width < 0) {
          obstacles.splice(i, 1);
          i--;
        }
      }
      if (Math.random() < 0.1) {
        addObstacle();
      }
    }

function drawObstacles() {
      for (var i = 0; i < obstacles.length; i++) {
        var obstacleDiv = document.createElement('div');
        obstacleDiv.className = 'obstacle';
        obstacleDiv.style = 'left:' + obstacles[i].x + 'px; top:' + obstacles[i].y + 'px; width:' + obstacles[i].width + 'px; height:' + obstacles[i].height + 'px;';
        gameDiv.appendChild(obstacleDiv);
      }
    }

function updatePlayer() {
      var playerDiv = document.getElementById('player');
      if (player.isGameOver) {
        playerDiv.className = 'emoji game-over';
      } else {
        playerDiv.className = 'emoji';
        player.score++;
        player.x += player.speed;
        if (player.x + playerDiv.offsetWidth > gameWidth) {
          player.isGameOver = true;
        }
        for (var i = 0; i < obstacles.length; i++) {
          if (player.x + playerDiv.offsetWidth > obstacles[i].x && player.x < obstacles[i].x + obstacles[i].width && player.y + playerDiv.offsetHeight > obstacles[i].y && player.y < obstacles[i].y + obstacles[i].height) {
            player.isGameOver = true;
            break;
          }
        }
      }
      playerDiv.style = 'left:' + player.x + 'px; top:' + player.y + 'px;';
    }

function displayScore() {
      statusDiv.innerHTML = 'Score: ' + player.score;
    }

function gameLoop() {
      if (!player.isGameOver) {
        updateObstacles();
        drawObstacles();
        updatePlayer();
        displayScore();
        setTimeout(gameLoop, 50);
      } else {
        statusDiv.innerHTML = 'Game Over! Score: ' + player.score;
      }
    }

var playerDiv = document.createElement('div');
    playerDiv.id = 'player';
    playerDiv.className = 'emoji';
    playerDiv.style = 'left:' + player.x + 'px; top:' + player.y + 'px;';
    gameDiv.appendChild(playerDiv);

gameLoop();
  </script>
</body>
</html>

【結果】
このプログラムによって「Emoji Run」というランゲームが作成されます。プレイヤーは画面内をスワイプまたはタップし、障害物を避けつつ右端に到達することが目的です。プレイヤーが障害物に当たると、ゲームオーバーになり、プレイヤーのスコアが表示されます。スコアは画面に常に表示されています。プログラムで使用される画像はすべて絵文字で構成されています。何度もプレイすることができ、モバイルブラウザからアクセスすることができるため、スマートフォンで簡単に遊ぶことができます。