はじめに
僕は最近ポケモンの第三世代、第四世代（エメラルドとHGSS）にハマっています。
やることといえば金ネジキなどでお馴染みのバトルフロンティアです！！
バトルフロンティアを攻略するとなると旅パでは太刀打ちできません
なのでポケモンを厳選しないといけないのですが、そこで必要となるのが努力値振りです。
分からない人向けにざっくり説明するとバトルでポケモンに勝つと『経験値』とは別に『努力値』という値がもらえます。(ゲーム中では基礎ポイントと呼ばれています。)
しかし、努力値はあくまで隠しステータスなので自分が育てたいポケモンに今どのくらい努力値がたまっているのかをゲーム中で細かく確認することができません。
なので紙にメモるなりスマホのアプリでカウントするなりしないといけないのです。
僕は今までスマホのアプリで努力値振りの計算を行っていたのですが、如何せん使い勝手が悪いアプリしかない
なので、自分で作ることにしました
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="counter.css" rel="stylesheet" href="">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>努力値カウンター</h1>
<h2>0</h2>
<div class="buttons">
<button id="increment1">1</button>
<button id="increment2">2</button>
<button id="increment3">3</button>
<br>
<button id="increment4">4</button>
<button id="increment5">5</button>
<button id="increment6">6</button>
<br>
<button id="increment7">7</button>
<button id="increment8">8</button>
<button id="increment10">10</button>
<br>
<button id="increment12">12</button>
<button id="increment14">14</button>
<br>
<br>
<button id="increment">-1</button>
<button id="reset">リセット</button>
</div>
<script src="counter.js"></script>
</div>
</body>
</html>
CSS
body {
margin-right: 900px;
}
button {
height: 100px;
width: 180px;
margin: 0 10px;
background: #0d7df5;
color: white;
font-size: 30px;
font-weight: bold;
border-radius: 20px;
border: 5px solid lightgray;
}
JS
const number = document.querySelector("h2");
const plusButton100 = document.querySelector("#increment");
const plusButton1 = document.querySelector("#increment1");
const plusButton2 = document.querySelector("#increment2");
const plusButton3 = document.querySelector("#increment3");
const plusButton4 = document.querySelector("#increment4");
const plusButton5 = document.querySelector("#increment5");
const plusButton6 = document.querySelector("#increment6");
const plusButton7 = document.querySelector("#increment7");
const plusButton8 = document.querySelector("#increment8");
const plusButton10 = document.querySelector("#increment10");
const plusButton12 = document.querySelector("#increment12");
const plusButton14 = document.querySelector("#increment14");
const resetButton0 = document.querySelector("#reset");
let count = 0;
const maxCount = 152; // 上限を設定
plusButton100.addEventListener("click", () => {
count--;
number.innerHTML = count;
});
plusButton1.addEventListener("click", () => {
if (count + 1 <= maxCount) {
count = count + 1;
number.innerHTML = count;
}
});
plusButton2.addEventListener("click", () => {
if (count + 2 <= maxCount) {
count = count + 2;
number.innerHTML = count;
}
});
plusButton3.addEventListener("click", () => {
if (count + 3 <= maxCount) {
count = count + 3;
number.innerHTML = count;
}
});
plusButton4.addEventListener("click", () => {
if (count + 4 <= maxCount) {
count = count + 4;
number.innerHTML = count;
}
});
plusButton5.addEventListener("click", () => {
if (count + 5 <= maxCount) {
count = count + 5;
number.innerHTML = count;
}
});
plusButton6.addEventListener("click", () => {
if (count + 6 <= maxCount) {
count = count + 6;
number.innerHTML = count;
}
});
plusButton7.addEventListener("click", () => {
if (count + 7 <= maxCount) {
count = count + 7;
number.innerHTML = count;
}
});
plusButton8.addEventListener("click", () => {
if (count + 8 <= maxCount) {
count = count + 8;
number.innerHTML = count;
}
});
plusButton10.addEventListener("click", () => {
if (count + 10 <= maxCount) {
count = count + 10;
number.innerHTML = count;
}
});
plusButton12.addEventListener("click", () => {
if (count + 12 <= maxCount) {
count = count + 12;
number.innerHTML = count;
}
});
plusButton14.addEventListener("click", () => {
if (count + 14 <= maxCount) {
count = count + 14;
number.innerHTML = count;
}
});
resetButton0.addEventListener("click", () => {
count = 0;
number.innerHTML = count;
});
完成
強制ギプス、パワー〇〇、ポケルスなどそれぞれの状況に応じて一度でもらえる値が大きくなるのでそれに合わせて一回でカウントできる値の種類を増やしました。（上の太線三つの説明が難しいので気になった方は調べてください
）
こだわり
ポケモンの努力値は一つのステータスにつき最大252までしか振ることができません。しかし、諸々の作業を行うと、振る値は実質152です。
なのでこのカウンターは152が上限となっています。
現在の状況は14のボタンを10回押した状態です。
しかし、次に14のボタンを押してしまうと値が154になってしまうので、これ以上14は押せないようになっています。
まとめ
今回のプログラムは自分しか使わないため、雑に作りました。
なのでCSSはめちゃくちゃ少ないです。
ですが出来栄えはそれなりに満足しています
特に152で値がストップするところとか。
参考にさせていただいた偉大なるサイト様