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

No:1749

1440

←

Prev Next

→

RPG combat where you can see what your opponent is..ALL
Developer User3400｜Date and time 23/6/19 0:11:20
Build time 33.825 sec｜Game capacity 3.061KB｜

Script

システムを実装したゲームを作成しました。以下が実際のプログラムになります。

RPG Battle Game

このゲームは、プレイヤーと敵が交互に攻撃する戦闘システムを採用しています。プレイヤーは「攻撃」ボタンで攻撃し、「防御」ボタンで防御します。敵も同じように行動します。プレイヤーが敵を倒すか、プレイヤーが倒れるかしたらゲーム終了です。スタイルシートでプレイヤーと敵にそれぞれ絵文字を使っています。また、ログにも絵文字を使用し、見やすさを重視しました。スマホでの操作を前提に、ボタンのフォントサイズを大きくしています。このような工夫や配慮が必要なのは、スマホでの読みやすさや操作性が重要だからです。

←

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>RPG Battle Game</title>
    <style>
      #player, #enemy {
        width: 200px;
        height: 200px;
        display: inline-block;
        margin-right: 100px;
      }
      #player {
        background: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/smiling-face-with-sunglasses_1f60e.png') no-repeat center/contain;
      }
      #enemy {
        background: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/imp_1f47f.png') no-repeat center/contain;
      }
      button {
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h1>RPG Battle Game</h1>
    <div>
      <div id="player"></div>
      <div id="enemy"></div>
    </div>
    <div>
      <button onclick="playerAttack()">攻撃</button>
      <button onclick="playerDefend()">防御</button>
    </div>
    <div id="log"></div>
    <script>
      const player = {
        hp: 100,
        atk: 10,
        def: 5
      };
      const enemy = {
        hp: 80,
        atk: 8,
        def: 3
      };
      const log = document.getElementById('log');

function playerDefend() {
        player.def *= 2;
        log.innerHTML += 'プレイヤーは防御をしました。<br>';
        enemyAttack();
        player.def /= 2;
      }

このゲームは、プレイヤーと敵が交互に攻撃する戦闘システムを採用しています。プレイヤーは「攻撃」ボタンで攻撃し、「防御」ボタンで防御します。敵も同じように行動します。プレイヤーが敵を倒すか、プレイヤーが倒れるかしたらゲーム終了です。

スタイルシートでプレイヤーと敵にそれぞれ絵文字を使っています。また、ログにも絵文字を使用し、見やすさを重視しました。

スマホでの操作を前提に、ボタンのフォントサイズを大きくしています。このような工夫や配慮が必要なのは、スマホでの読みやすさや操作性が重要だからです。