ファミコン風CSSデザインでライフゲージを作る #JavaScript

概要

NES.cssを用いて、ライフゲージの減少させるプログラムを書きました。

ポケモンのようなバトル機能を作りたい場合にお使いいただけると思います。

記事を作成した理由

とても可愛いcssフレームワークを見つけました!

NES.cssはファミコン風(8bit ライク) なCSSフレームワークです。

特に、プログレスバーがポケモンのライフゲージみたいだったので、自分でポケモンのようなバトル機能が作れるかもしれない！と考えました。

使用技術

HTML
css
js

最終的なコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NES.css</title>
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
  <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
  <style>
    .nes-progress {
    height: 1rem;
    width: 6rem;
    }
    .nes-container.is-rounded {
    padding: 0;
    }
    .nes-table th::after, .nes-table th::before, .nes-table td::after, .nes-table td::before {
    background: none;
    }
    .nes-table th, .nes-table td {
    border: none;
    }
  </style>
</head>

<body>

<div class="nes-table-responsive">
  <table class="nes-table">
    <thead>
      <tr>
        <th>
          <p>ユーザー</p>
        </th>
        <th>
          <p>モンスター</p>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <p>HP:</p>
          <progress class="nes-progress is-success" id="life_user" value="100" max="100"></progress>
        </td>
        <td>
          <p>HP:</p>
          <progress class="nes-progress is-error" id="life_monster" value="100" max="100"></progress>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<p id="comment">どちらか選べ!!</p>

<button id="attack" class="nes-btn is-success">attack</button>
<button id="dameged" class="nes-btn is-error">dameged</button>

<script>    
// ライフゲージ
const lifeBar_user = document.getElementById('life_user')
const lifeBar_monster = document.getElementById('life_monster')
// アタックコマンド、ダメージコマンド
const attackBtn = document.getElementById('attack')
const damegedBtn = document.getElementById('dameged')
// 一回のダメージは25とする
const damege = -25
// ライフゲージ初期値は100とする
let life = 100
let life_monster = 100
let comment = document.getElementById('comment')

attackBtn.addEventListener('click', alterLife);   
damegedBtn.addEventListener('click', alterLife_monster);     

// ユーザーのライフゲージ変更処理
function alterLife(){
  // lifeの値を算出する
  life += damege 
  comment.textContent = 'ユーザーがアタックした!!';
  comment.style.background = 'lime';
  if ( life <= 0 ){
  // ユーザーがバトルに勝利した場合
  life = 0
  comment.textContent = 'ユーザーの勝利!!';
  damegedBtn.disabled = true;
  }
  // ライフバーの値を更新する
  lifeBar_monster.value = life
}
    
function alterLife_monster(){
  // life_monsterの値を算出する
  life_monster += damege 
  comment.textContent = 'ユーザーがダメージを受けた!!';
  comment.style.background = 'tomato';
  if ( life_monster <= 0 ){
  // 算出の結果 0 以下になった場合
  life_monster = 0
  comment.textContent = 'モンスターの勝利!!';
  attackBtn.disabled = true;
  }
  // ライフバーの値を更新する
  lifeBar_user.value = life_monster
}
</script>
          
</body>
</html>

準備

NES.cssのCDNを読み込みます。

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />

以下は見た目を整えるためのCSSです。
なくても構いません。

.nes-progress {
  height: 1rem;
  width: 6rem;
}
.nes-container.is-rounded {
  padding: 0;
}
.spel-box .nes-btn,.gram-over .nes-btn {
  padding: 0;
  margin: 0;
}
.nes-table th::after, .nes-table th::before, .nes-table td::after, .nes-table td::before {
  background: none;
}
.nes-table th, .nes-table td {
  border: none;
}

ライフゲージ

見た目にわかりやすいようにテーブルにライフゲージを入れました。
テーブルが不要な場合はプログレスタグを抜き出してください。

<div class="nes-table-responsive">
<table class="nes-table">
  <thead>
    <tr>
      <th>
        <p>ユーザー</p>
      </th>
      <th>
        <p>モンスター</p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>HP:</p>
        <progress class="nes-progress is-success" id="life_user" value="100" max="100"></progress>
      </td>
      <td>
        <p>HP:</p>
        <progress class="nes-progress is-error" id="life_monster" value="100" max="100"></progress>
      </td>
    </tr>
  </tbody>
</table>
</div>

コマンド部分

コメント部分は、ダメージ時やアタック時にコメントを表示させるための部分です。

<p id="comment">どちらか選べ!!</p>

<button id="attack" class="nes-btn is-success">attack</button>
<button id="dameged" class="nes-btn is-error">dameged</button>

ダメージのロジック

ここでは両方のライフゲージの初期値を100とし、そこから攻撃やダメージによって-25引かれるようにしました。

// ライフゲージ
const lifeBar_user = document.getElementById('life_user')
const lifeBar_monster = document.getElementById('life_monster')
// アタックコマンド、ダメージコマンド
const attackBtn = document.getElementById('attack')
const damegedBtn = document.getElementById('dameged')
// 一回のダメージは25とする
const damege = -25
// ライフゲージ初期値は100とする
let life = 100
let life_monster = 100
// コメント表示
let comment = document.getElementById('comment')

attackBtn.addEventListener('click', alterLife);   
damegedBtn.addEventListener('click', alterLife_monster);     

// ユーザーのライフゲージ変更処理
function alterLife(){
  // lifeの値を算出する
  life += damege 
  comment.textContent = 'ユーザーがアタックした!!';
  comment.style.background = 'lime';
  if ( life <= 0 ){
  // ユーザーがバトルに勝利した場合
  life = 0
  comment.textContent = 'ユーザーの勝利!!';
  damegedBtn.disabled = true;
  }
  // ライフバーの値を更新する
  lifeBar_monster.value = life
}

// ユーザーのライフゲージ変更処理
function alterLife_monster(){
  // lifeの値を算出する
  life_monster += damege 
  comment.textContent = 'ユーザーがダメージを受けた!!';
  comment.style.background = 'tomato';
  if ( life_monster <= 0 ){
  // 算出の結果 0 以下になった場合
  life_monster = 0
  comment.textContent = 'モンスターの勝利!!';
  attackBtn.disabled = true;
  }
  // ライフバーの値を更新する
  lifeBar_user.value = life_monster
}

まとめ

クラスを指定するだけでボタンなどの見た目を変えられるのでとても便利でした！
技を作って動的に出せるようにしたらより面白そうですね！