【JavaScript】クリックパワーを溜めろ!(コード付き)

ゲーム

ひたすらボタンをクリックしてパワーを溜めるだけのアプリです。

日々の鬱憤を思う存分マウスにぶつけろ!!




保存ボタンを押すと現在のパワーが保存され、次回このページに来た際に続きからプレイ(?)できます。

このページはローカルストレージ機能を利用しています。
ローカルストレージ機能がOFFの場合は保存されません。




ソースコード

カスタムHTMLに書いているコードは以下です。

<button id="button" onclick="buttonClick()" disabled="true" style="font-weight: bold;height:100px;font-size:large;padding: 10px 20px 10px 20px;">クリックパワーを溜めろ!</button>
<br>
<input type="text" value="0" id="count" readonly="">
<br><br>
<button id="save" onclick="save()" disabled="true" style="padding:10px">保存</button>

<script>
window.onload = function(){
  count = localStorage.getItem('count');
  if(!count){
    count = 0;
  }
  var elm = document.getElementById("count");
  elm.value = count;

  var btn = document.getElementById("button");
  console.log(btn);
  btn.disabled = false;
  var save = document.getElementById("save");
  save.disabled = false;
}
function save(event){
  var elm = document.getElementById("count");
  count = parseInt(elm.value);

  localStorage.setItem('count', count)
  alert("保存しました。");
}
function buttonClick(event){
  var elm = document.getElementById("count");
  count = parseInt(elm.value);
  if (!count){
    count = 0
  }
  count += 1;
  elm.value = count;
}
</script>

なぜ作った?

今更こんなものを作ったのには以下の理由があります。

  • ローカルストレージを使用したセーブ/ロード機能を検証する
  • WordPressのカスタムHTMLを利用して、「(iframeを使わずに)記事内に直接コンテンツを置けるか」を検証する
  • PyScript+iframeとJavaScriptのどちらが開発しやすいかを確かめる

現段階での結論としては、

手軽さならJavaScriptだけど、中規模以上の開発ならPyScript

という感じです。

僕自身がJavaScriptにそこまで慣れていないというのもあるんですけどね💦

引き続き色々と試していきたいと思います。

コメント

タイトルとURLをコピーしました