46
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-03-02

概要

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

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

記事を作成した理由

とても可愛い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;
}

ライフゲージ

スクリーンショット 2022-03-02 15.20.55.png

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

<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>

コマンド部分

スクリーンショット 2022-03-02 16.30.42.png

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

<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
}

まとめ

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

46
42
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?