AI game creator

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

No:1897

←

Prev Next

→

Tower Defense Games
Developer User3436｜Date and time 23/6/19 13:32:08
Build time 50.296 sec｜Game capacity 4.924KB｜

Script

以下がタワーディフェンスゲームの実装例です。このゲームは1枚のhtmlファイルにまとめてあり、JavaScriptを含んでいます。ゲームはスマートフォンで操作可能で、絵文字を多用しています。プレイヤーは、敵を倒しながら自分の城を守ることが目的です。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<html>
  <head>
    <title>タワーディフェンスゲーム</title>
    <style>
      body {
        background-color: #d0d0d0;
        font-size: 20px;
      }
      .game-board {
        display: grid;
        grid-template-rows: repeat(5, 100px);
        grid-template-columns: repeat(5, 100px);
        gap: 10px;
        margin-top: 50px;
      }
      .game-board-cell {
        background-color: #44ee44;
        border: 5px solid #225522;
      }
      .game-board-cell.has-tower {
        background-color: #882266;
      }
      .game-board-cell.has-enemy {
        background-color: #ee4444;
      }
      .button {
        margin-top: 20px;
        padding: 10px;
        background-color: #2299ee;
        color: #ffffff;
        border: none;
        border-radius: 5px;
        font-size: 20px;
        cursor: pointer;
      }
      .button:hover {
        background-color: #2277cc;
      }
      .message {
        margin-top: 20px;
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="game-board">
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
      <div class="game-board-cell"></div>
    </div>
    <button class="button" onclick="buildTower()">タワーを建設する 😀</button>
    <button class="button" onclick="startWave()">次の敵を送り出す 🏃‍♂️</button>
    <div class="message"></div>
    <script>
      let board = [
        ["", "", "", "", ""],
        ["", "", "", "", ""],
        ["", "", "", "", ""],
        ["", "", "", "", ""],
        ["", "", "", "", ""],
      ];
      let hasTower = false;
      let hasEnemy = false;
      let message = "";

function attackEnemy(row, col) {
        board[row][col] = "";
        hasEnemy = false;
        message = "敵を撃退しました 😀";
        updateBoard();
        updateMessage();
      }

function updateMessage() {
        document.getElementsByClassName("message")[0].innerHTML = message;
      }
    </script>
  </body>
</html>