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

Archives Details

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

HTML5

2013.02.09

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

前回の

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

の続きとなります。

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

デモページ

http://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ストレージでデータを保存 その2(なんちゃってソーシャルゲーム作成)

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

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

※ 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

今回はここまで。

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

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