このサイトは、只今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

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

LLaMAモデル GGMLフォーマット(llama.cpp)をRustフレームワーク Leptosを用いて M1MacMiniでサクッと動かす。

Rust

2024.01.11

2024年 狙っているモバイルノートPC

tool

2024.01.07

MacOS XcodeにSDL2を追加

tool

2023.12.26

php 7.4にアップデート

PHP

2023.12.24

5分で覚える Flutter Flameで作る Wave Function Collapse - 波動関数崩壊アルゴリズム

AI・Bot・algorithm

2023.12.20

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US