このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

前回の

HTML5 Webストレージでデータを保存 その4（なんちゃってソーシャルゲーム・ゲージ）

の続きとなります。

前回までは、以下のデモページの様に

デモページ

https://www.webcyou.com/?p=4233

クリックすると「Quest進捗」「Ex」「Gold」それぞれの値が10づつ増加しておりました。

「Quest進捗」「Ex」に関しては100%を超えると0%に戻る様に設定しました。

ここでは、「Ex」は経験値のことを表しているので、この値がMAX値になるとLvの値が上がらないといけません。

ということで「Ex」がMAX値になるとLvの値が1つ上がる設定を行います。

LV

前回記述した関数、setStatus関数内にあるif文 if(exVal >= 100){〜〜 に追記していきます。

lv += 1;
lvElem.innerHTML = lv;

以上の2行を追加。

if(exVal >= 100){
  exVal = 0;
  lv += 1;
  lvElem.innerHTML = lv; 
}

このような感じで追加すると、Ex」がMAX値になるとLvの値が1つ上がることになります。

続いてGoldの設定を行いましょう。

Gold

ここで一旦、

HTML5 Webストレージでデータを保存 その２（なんちゃってソーシャルゲーム作成）

に書かれている仕様に関して振り返ってみたいかと思います。

– ボタンを押すことによって起きる処理 –

※ Quest進捗のゲージが増える

※ Exのゲージが増える。（いっぱいになるとLvがUP。ゲージは元に戻る。）

※ たまにGoldが手に入る。

※ 背景が変化する。（進んでいる感のアニメ）

と、なっておりまして Goldに関しては「たまにGoldが手に入る。」となっておりますので「たまに」感を出したいかと思います。

getGold関数を新たに作成し、Goldが手に入る仕組みを作成致します。

まず、0~3までの乱数を発生させるためMath.random関数を使います。

ランダム関数に関しては以下の記事を参照して頂ければと思います。

JavaScript ランダム関数 Math.random() まとめ + css3

変数名はrndとします。

var rnd = Math.floor(Math.random()*4);

続いて、rndの値が2か3の時つまり、2/4 （50%）の確率の時にGoldが手に入る様にします。

if( rnd == 2 || rnd == 3) {}

このif文内に gold += 10; と記述すれば2/4 （50%）の確率でgoldを10手に入れることができますが、10という固定の数字だと面白くないため、Lvにより変動するランダムのgoldを手に入れる様に設定します。</p> <p>変数rndGoldにランダムのゴールドの値を格納。

var rndGold = (Math.floor(Math.random()*5))*5;

上記の設定によって0〜20（詳しくは0,5,10,15,20）の値が算出できます。しかし、このままだと0の時も発生いたしますので、0の場合は18（適当）の値にします。

if(rndGold == 0) { rndGold = 18; }

さらに、レベルによって追加する値を変更致します。

var addGold = Math.floor(rndGold * (1 + (lv/10)));

レベル1の場合は1.1倍、レベル2の場合は1.2倍、レベル3の場合は1.3倍とどこかのカップラーメンみたいな数値ではありますが、このように増加する式をaddGold変数に格納。

gold += addGold;

最後は変数goldに追加。

ここまでのscriptは以下になります。

function game(){
  var btn = document.querySelector('.btn'),
      questImg = document.querySelector('.questImg'),
      img = questImg.querySelector('img'),
      lvElem = document.querySelector('.lv > .val'),
      questValElem = document.querySelector('.quest > .val'),
      exValElem = document.querySelector('.ex > .val'),
      goldElem = document.querySelector('.gold > .val'),
      questGauge = document.querySelector('.quest > .Gauge > b'),
      exGauge = document.querySelector('.ex > .Gauge > b'),
      lv = 1,
      questVal = 0,
      exVal = 0,
      gold = 0;

  img.addEventListener('webkitAnimationEnd', function(){
      questImg.classList.remove('move');
  }, false);

  btn.addEventListener("click", function(e){
    e.preventDefault()
    questImg.classList.add('move');

    questVal += 10;
    exVal += 10;
    getGold();
    setStatus();
  }, false);

  function setStatus(){
    questValElem.innerHTML = questVal;
    exValElem.innerHTML = exVal;
    goldElem.innerHTML = gold;

    questGauge.style.width = questVal + "%";
    exGauge.style.width = exVal + "%";

    if(questVal >= 100){
      questVal = 0;
    }
    if(exVal >= 100){
      exVal = 0;
      lv += 1;
      lvElem.innerHTML = lv;
    }
  }

  function getGold(){
    var rnd = Math.floor(Math.random()*4);    
    if( rnd == 2 || rnd == 3) {
      var rndGold = (Math.floor(Math.random()*5))*5;
      if(rndGold == 0) { rndGold = 18; }
      var addGold = Math.floor(rndGold * (1 + (lv/10)));
      gold += addGold;
    }
  }
  setStatus();
}
window.addEventListener("DOMContentLoaded", game, false);

ここまでのデモページは以下のリンクより

デモページ

http://webcyou.com/demo/js/webstorage/index006.html

今回はここまで。

余談：すぐ完成するかと思いきや、結構やることありましたね。。。