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

Archives Details

HTML5 Webストレージでデータを保存 その6 複数保存(なんちゃってソーシャルゲーム・quest進捗、ex調整)

HTML5

2013.02.10

この記事は最終更新日から1年以上が経過しています。

前回の

HTML5 Webストレージでデータを保存 その5(なんちゃってソーシャルゲーム・Lv、Gold編)

の続きとなります。

今回はいよいよ本題へと。

その前に、現在、クリックするとクエスト進捗、exの値が10づつ増えていく固定の数値となっておりますのでこれを少しばらします。

クエスト進捗 ex調整

クエスト進捗の設定の為、新たに setQuestVal関数とexの設定の為 setExVal関数を用意します。

その為、「現在のクエストステージ」の数値を使いそれぞれの値を算出したいため、新たにstageVal変数を用意します。

stageVal = 1;

クエスト進捗の値は、現在いるステージ数を基にします。100%をステージ数で割り、更に4で割った数値を1回クリックする度に得られる(進む)数値とします。こうすることによって、ステージを進むにつれて進むのが困難になってきます。

scriptで書きますと

Math.floor((100/stageVal)/4);

こんな感じですね。この数値をaddQuestValとし、現在の進捗の値に増加します。

数値によって100%を超えてしまうので、100を超える数値に関しては100とするように記述します。

function setQuestVal() {
  var addQuestVal = Math.floor((100/stageVal)/4);
  questVal += addQuestVal;
  if(questVal >= 100){ questVal = 100;}
}

questVal += 10;としていた箇所をこの関数を呼び出すようにします。

setQuestVal();

exもクエスト進捗同様なのですが、exに関してはlvの値を基準とします。100で現在のLvで割り、更に5で割ります。その数値をaddExValとして現在のexの値に増加します。

function setExVal(){
  var addExVal = Math.floor((100/lv)/5);
  exVal += addExVal;
  if(exVal >= 100){ exVal = 100;}
}

こちらも同様 exVal += 10;としていたところにsetExValを呼び出すようにします。

setExVal();

こうすることによって、少しバラつき感が出てゲームっぽくなったかと思います。

ここまでのデモページは以下のリンクから。

デモページ

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

localStorageを複数保存

いやぁ。長かったぁ。。。

やっと本題に入る気がします。。

localStorageを一つのキーに一つのデータしか保存できないのですが、(オブジェクトとしての保存は出来ず、テキストデータの保存となるため)今回は複数保存を行ってみたいと思います。

複数扱う場合はJSON(リテラル)形式で保存致します。

var gameData = {
  lv:lv,
  questVal:questVal,
  exVal:exVal,
  gold:gold,
  stageVal:stageVal
}

このような感じでgameDataオブジェクトを用意し、localStorageに保存する際、JSON.stringify()関数を用いてJavaScriptオブジェクトをJSON文字列に一旦変換してlocalStorageに保存します。

JSON.stringify(data));

今回の場合だとこのような感じになります。

localStorage.setItem('LS_Data',JSON.stringify(gameData));

今度、localStorageから呼び出す場合はJSON.parse()関数を用いて、呼び出したJSON文字列を JavaScriptオブジェクトに変換して使用します

JSON.parse

今回の場合だとこのような感じになります。

lSGameData = JSON.parse(localStorage.getItem("LS_Data")

それぞれのプロパティにアクセスする際は通常どおり「.」を使いアクセスできます。

lv = lSGameData.lv;

今回の場合だとこのような感じになります。

 lv = lSGameData.lv;
 questVal = lSGameData.questVal;
 exVal = lSGameData.exVal;
 gold = lSGameData.gold;
 stageVal = lSGameData.stageVal;
 lvElem.innerHTML = lv;

localStorageに保存するsetStorage関数を作成し、クリックされたイベント内にこの関数を呼び出します。

よってクリックする度にlocalStorageに保存されることになります。

function setStorage(){
  var gameData = {
    lv:lv,
    questVal:questVal,
    exVal:exVal,
    gold:gold,
    stageVal:stageVal
  }
  localStorage.setItem('LS_Data',JSON.stringify(gameData));
}

ページを開いたときに実行されるgame関数の初期値の場所に呼び出しの変数と、localStorageのデータの有無を確認し、ある場合はそれぞれの値をセットします。

if(lSGameData !== null){
  lv = lSGameData.lv;
  questVal = lSGameData.questVal;
  exVal = lSGameData.exVal;
  gold = lSGameData.gold;
  stageVal = lSGameData.stageVal;
  lvElem.innerHTML = lv;
}

それら、もろもろを含めた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,
      stageVal = 1,
      lSGameData = JSON.parse(localStorage.getItem("LS_Data")),
      gameData;
      
  if(lSGameData !== null){
    lv = lSGameData.lv;
    questVal = lSGameData.questVal;
    exVal = lSGameData.exVal;
    gold = lSGameData.gold;
    stageVal = lSGameData.stageVal;
    lvElem.innerHTML = lv;
  }
  
  img.addEventListener('webkitAnimationEnd', function(){
      questImg.classList.remove('move');
  }, false);
  
  btn.addEventListener("click", function(e){
    e.preventDefault()
    questImg.classList.add('move');
    
    setQuestVal();
    setExVal();
    getGold();
    setStatus();
    setStorage();
  }, 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;
      stageVal += 1;
    }
    if(exVal >= 100){
      exVal = 0;
      lv += 1;
      lvElem.innerHTML = lv;
    }
  }
  
  function setQuestVal() {
    var addQuestVal = Math.floor((100/stageVal)/4);
      questVal += addQuestVal;
      if(questVal >= 100){ questVal = 100;}
  }
  
  function setExVal(){
    var addExVal = Math.floor((100/lv)/5);
      exVal += addExVal;
      if(exVal >= 100){ exVal = 100;}
  }
  
  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;
    }
  }
  
  function setStorage(){
    var gameData = {
      lv:lv,
      questVal:questVal,
      exVal:exVal,
      gold:gold,
      stageVal:stageVal
    }
    localStorage.setItem('LS_Data',JSON.stringify(gameData));
  }
  
  setStatus();
}
window.addEventListener("DOMContentLoaded", game, false);

デモページは以下のリンクから宜しくお願い致します。

デモページ

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

ブラウザを閉じても、同じブラウザを使用すれば以前終了したデータのまま再開することが出来ます。

次回は特別編とし、コインを手に入れた時の演出、レベルアップ演出、ステージによる背景チェンジ。を行いたいかと思います。ではでは。

Comment

Related Article

iPhone5s,5c 発表!! という訳でAppleサイトの仕様とかについて

2013.09.15

HTML5 History APIについて

2013.02.26

FlashをCanvas等に変換 gree/LWF(Lightweight SWF)を使ってみました。その2

2013.02.11

FlashをCanvas等に変換 gree/LWF(Lightweight SWF)を使ってみました。

2013.02.11

HTML5 Webストレージでデータを保存 その6 複数保存(なんちゃってソーシャルゲーム・quest進捗、ex調整)

2013.02.10

HTML5 Webストレージでデータを保存 その5(なんちゃってソーシャルゲーム・Lv、Gold編)

2013.02.09

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

2013.02.09

HTML5 Webストレージでデータを保存 その3(クエスト進行CSS3アニメーション)

2013.02.08

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

2013.01.22

HTML5 Webストレージでデータを保存

2013.01.20

CATEGORY LIST

LATEST NEWS

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US