{"id":4254,"date":"2013-02-09T15:49:39","date_gmt":"2013-02-09T06:49:39","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=4254"},"modified":"2013-02-09T15:54:58","modified_gmt":"2013-02-09T06:54:58","slug":"html5-web%e3%82%b9%e3%83%88%e3%83%ac%e3%83%bc%e3%82%b8%e3%81%a7%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e4%bf%9d%e5%ad%98-%e3%81%9d%e3%81%ae5%ef%bc%88%e3%81%aa%e3%82%93%e3%81%a1%e3%82%83%e3%81%a3%e3%81%a6","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=4254","title":{"rendered":"HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e5\uff08\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u30fbLv\u3001Gold\u7de8\uff09"},"content":{"rendered":"

\u524d\u56de\u306e<\/p>\n

HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e4\uff08\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u30fb\u30b2\u30fc\u30b8\uff09<\/a><\/h3>\n

\u306e\u7d9a\u304d\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n

\u524d\u56de\u307e\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u30c7\u30e2\u30da\u30fc\u30b8\u306e\u69d8\u306b<\/p>\n

\u30c7\u30e2\u30da\u30fc\u30b8<\/strong><\/a><\/p>\n

https:\/\/www.webcyou.com\/?p=4233<\/a><\/p>\n

\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u300cQuest\u9032\u6357\u300d\u300cEx\u300d\u300cGold\u300d<\/strong>\u305d\u308c\u305e\u308c\u306e\u5024\u304c10\u3065\u3064\u5897\u52a0\u3057\u3066\u304a\u308a\u307e\u3057\u305f\u3002<\/p>\n

\u300cQuest\u9032\u6357\u300d\u300cEx\u300d<\/strong>\u306b\u95a2\u3057\u3066\u306f100%\u3092\u8d85\u3048\u308b\u30680%\u306b\u623b\u308b\u69d8\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u3053\u3053\u3067\u306f\u3001\u300cEx\u300d<\/strong>\u306f\u7d4c\u9a13\u5024\u306e\u3053\u3068\u3092\u8868\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u5024\u304cMAX\u5024\u306b\u306a\u308b\u3068Lv\u306e\u5024\u304c\u4e0a\u304c\u3089\u306a\u3044\u3068\u3044\u3051\u307e\u305b\u3093\u3002<\/p>\n

\u3068\u3044\u3046\u3053\u3068\u3067\u300cEx\u300d\u304c<\/strong>MAX\u5024\u306b\u306a\u308b\u3068Lv\u306e\u5024\u304c1\u3064\u4e0a\u304c\u308b\u8a2d\u5b9a\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n

LV<\/h4>\n

\u524d\u56de\u8a18\u8ff0\u3057\u305f\u95a2\u6570\u3001setStatus\u95a2\u6570\u5185\u306b\u3042\u308bif\u6587\u00a0if(exVal >= 100){\u301c\u301c<\/strong>\u00a0\u306b\u8ffd\u8a18\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n

\r\nlv += 1;\r\nlvElem.innerHTML = lv;\r\n<\/pre>\n
\u4ee5\u4e0a\u306e2\u884c\u3092\u8ffd\u52a0\u3002<\/p>\n
\r\nif(exVal >= 100){\r\n  exVal = 0;\r\n  lv += 1;\r\n  lvElem.innerHTML = lv; \r\n}<\/pre>\n
\u3053\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u8ffd\u52a0\u3059\u308b\u3068\u3001Ex\u300d\u304c<\/strong>MAX\u5024\u306b\u306a\u308b\u3068Lv\u306e\u5024\u304c1\u3064\u4e0a\u304c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u7d9a\u3044\u3066Gold\u306e\u8a2d\u5b9a\u3092\u884c\u3044\u307e\u3057\u3087\u3046\u3002<\/p>\n
Gold<\/h4>\n
\u3053\u3053\u3067\u4e00\u65e6\u3001<\/p>\n
HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e\uff12\uff08\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u4f5c\u6210\uff09<\/a><\/h3>\n
\u306b\u66f8\u304b\u308c\u3066\u3044\u308b\u4ed5\u69d8\u306b\u95a2\u3057\u3066\u632f\u308a\u8fd4\u3063\u3066\u307f\u305f\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
\u2013 \u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3053\u3068\u306b\u3088\u3063\u3066\u8d77\u304d\u308b\u51e6\u7406 \u2013<\/strong><\/p>\n
\u203b Quest\u9032\u6357\u306e\u30b2\u30fc\u30b8\u304c\u5897\u3048\u308b<\/p>\n
\u203b Ex\u306e\u30b2\u30fc\u30b8\u304c\u5897\u3048\u308b\u3002\uff08\u3044\u3063\u3071\u3044\u306b\u306a\u308b\u3068Lv\u304cUP\u3002\u30b2\u30fc\u30b8\u306f\u5143\u306b\u623b\u308b\u3002\uff09<\/p>\n
\u203b \u305f\u307e\u306bGold\u304c\u624b\u306b\u5165\u308b\u3002<\/p>\n
\u203b \u80cc\u666f\u304c\u5909\u5316\u3059\u308b\u3002\uff08\u9032\u3093\u3067\u3044\u308b\u611f\u306e\u30a2\u30cb\u30e1\uff09<\/p>\n
\u3068\u3001\u306a\u3063\u3066\u304a\u308a\u307e\u3057\u3066\u00a0Gold\u306b\u95a2\u3057\u3066\u306f\u300c\u305f\u307e\u306bGold\u304c\u624b\u306b\u5165\u308b\u3002\u300d\u3068\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u306e\u3067\u300c\u305f\u307e\u306b\u300d<\/strong>\u611f\u3092\u51fa\u3057\u305f\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
getGold\u95a2\u6570\u3092\u65b0\u305f\u306b\u4f5c\u6210\u3057\u3001Gold\u304c\u624b\u306b\u5165\u308b\u4ed5\u7d44\u307f\u3092\u4f5c\u6210\u81f4\u3057\u307e\u3059\u3002<\/p>\n
\u307e\u305a\u30010~3\u307e\u3067\u306e\u4e71\u6570\u3092\u767a\u751f\u3055\u305b\u308b\u305f\u3081Math.random\u95a2\u6570\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n
\u30e9\u30f3\u30c0\u30e0\u95a2\u6570\u306b\u95a2\u3057\u3066\u306f\u4ee5\u4e0b\u306e\u8a18\u4e8b\u3092\u53c2\u7167\u3057\u3066\u9802\u3051\u308c\u3070\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
JavaScript \u30e9\u30f3\u30c0\u30e0\u95a2\u6570 Math.random() \u307e\u3068\u3081 + css3<\/a><\/h3>\n
\u5909\u6570\u540d\u306frnd\u3068\u3057\u307e\u3059\u3002<\/p>\n
var rnd = Math.floor(Math.random()*4);<\/pre>\n
\u7d9a\u3044\u3066\u3001rnd\u306e\u5024\u304c2\u304b3\u306e\u6642\u3064\u307e\u308a\u30012\/4 \uff0850%\uff09\u306e\u78ba\u7387\u306e\u6642\u306bGold\u304c\u624b\u306b\u5165\u308b\u69d8\u306b\u3057\u307e\u3059\u3002<\/p>\n
if( rnd == 2 || rnd == 3) {}<\/pre>\n
\u3053\u306eif\u6587\u5185\u306b gold += 10; \u3068\u8a18\u8ff0\u3059\u308c\u30702\/4 \uff0850%\uff09\u306e\u78ba\u7387\u3067gold\u309210\u624b\u306b\u5165\u308c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u304c\u300110\u3068\u3044\u3046\u56fa\u5b9a\u306e\u6570\u5b57\u3060\u3068\u9762\u767d\u304f\u306a\u3044\u305f\u3081\u3001Lv\u306b\u3088\u308a\u5909\u52d5\u3059\u308b\u30e9\u30f3\u30c0\u30e0\u306egold\u3092\u624b\u306b\u5165\u308c\u308b\u69d8\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p> <p>\u5909\u6570rndGold\u306b\u30e9\u30f3\u30c0\u30e0\u306e\u30b4\u30fc\u30eb\u30c9\u306e\u5024\u3092\u683c\u7d0d\u3002<\/p>\n
var rndGold = (Math.floor(Math.random()*5))*5;<\/pre>\n
\u4e0a\u8a18\u306e\u8a2d\u5b9a\u306b\u3088\u3063\u30660\u301c20\uff08\u8a73\u3057\u304f\u306f0,5,10,15,20\uff09\u306e\u5024\u304c\u7b97\u51fa\u3067\u304d\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u3053\u306e\u307e\u307e\u3060\u30680\u306e\u6642\u3082\u767a\u751f\u3044\u305f\u3057\u307e\u3059\u306e\u3067\u30010\u306e\u5834\u5408\u306f18\uff08\u9069\u5f53\uff09\u306e\u5024\u306b\u3057\u307e\u3059\u3002<\/p>\n
if(rndGold == 0) { rndGold = 18; }<\/pre>\n
\u3055\u3089\u306b\u3001\u30ec\u30d9\u30eb\u306b\u3088\u3063\u3066\u8ffd\u52a0\u3059\u308b\u5024\u3092\u5909\u66f4\u81f4\u3057\u307e\u3059\u3002<\/p>\n
var addGold = Math.floor(rndGold * (1 + (lv\/10)));<\/pre>\n
\u30ec\u30d9\u30eb1\u306e\u5834\u5408\u306f1.1\u500d\u3001\u30ec\u30d9\u30eb2\u306e\u5834\u5408\u306f1.2\u500d\u3001\u30ec\u30d9\u30eb3\u306e\u5834\u5408\u306f1.3\u500d\u3068\u3069\u3053\u304b\u306e\u30ab\u30c3\u30d7\u30e9\u30fc\u30e1\u30f3\u307f\u305f\u3044\u306a\u6570\u5024\u3067\u306f\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u306e\u3088\u3046\u306b\u5897\u52a0\u3059\u308b\u5f0f\u3092addGold\u5909\u6570\u306b\u683c\u7d0d\u3002<\/p>\n
gold += addGold;<\/pre>\n
\u6700\u5f8c\u306f\u5909\u6570gold\u306b\u8ffd\u52a0\u3002<\/p>\n
\u3053\u3053\u307e\u3067\u306escript\u306f\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
function game(){\r\n  var btn = document.querySelector('.btn'),\r\n      questImg = document.querySelector('.questImg'),\r\n      img = questImg.querySelector('img'),\r\n      lvElem = document.querySelector('.lv > .val'),\r\n      questValElem = document.querySelector('.quest > .val'),\r\n      exValElem = document.querySelector('.ex > .val'),\r\n      goldElem = document.querySelector('.gold > .val'),\r\n      questGauge = document.querySelector('.quest > .Gauge > b'),\r\n      exGauge = document.querySelector('.ex > .Gauge > b'),\r\n      lv = 1,\r\n      questVal = 0,\r\n      exVal = 0,\r\n      gold = 0;\r\n\r\n  img.addEventListener('webkitAnimationEnd', function(){\r\n      questImg.classList.remove('move');\r\n  }, false);\r\n\r\n  btn.addEventListener("click", function(e){\r\n    e.preventDefault()\r\n    questImg.classList.add('move');\r\n\r\n    questVal += 10;\r\n    exVal += 10;\r\n    getGold();\r\n    setStatus();\r\n  }, false);\r\n\r\n  function setStatus(){\r\n    questValElem.innerHTML = questVal;\r\n    exValElem.innerHTML = exVal;\r\n    goldElem.innerHTML = gold;\r\n\r\n    questGauge.style.width = questVal + "%";\r\n    exGauge.style.width = exVal + "%";\r\n\r\n    if(questVal >= 100){\r\n      questVal = 0;\r\n    }\r\n    if(exVal >= 100){\r\n      exVal = 0;\r\n      lv += 1;\r\n      lvElem.innerHTML = lv;\r\n    }\r\n  }\r\n\r\n  function getGold(){\r\n    var rnd = Math.floor(Math.random()*4);    \r\n    if( rnd == 2 || rnd == 3) {\r\n      var rndGold = (Math.floor(Math.random()*5))*5;\r\n      if(rndGold == 0) { rndGold = 18; }\r\n      var addGold = Math.floor(rndGold * (1 + (lv\/10)));\r\n      gold += addGold;\r\n    }\r\n  }\r\n  setStatus();\r\n}\r\nwindow.addEventListener("DOMContentLoaded", game, false);<\/pre>\n
\u3053\u3053\u307e\u3067\u306e\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u4ee5\u4e0b\u306e\u30ea\u30f3\u30af\u3088\u308a<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/strong><\/a><\/p>\n
http:\/\/webcyou.com\/demo\/js\/webstorage\/index006.html<\/a><\/p>\n
\u4eca\u56de\u306f\u3053\u3053\u307e\u3067\u3002<\/p>\n
\u4f59\u8ac7<\/strong>\uff1a\u3059\u3050\u5b8c\u6210\u3059\u308b\u304b\u3068\u601d\u3044\u304d\u3084\u3001\u7d50\u69cb\u3084\u308b\u3053\u3068\u3042\u308a\u307e\u3057\u305f\u306d\u3002\u3002\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u56de\u306e HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e4\uff08\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u30fb\u30b2\u30fc\u30b8\uff09 \u306e\u7d9a\u304d\u3068\u306a\u308a\u307e\u3059\u3002 \u524d\u56de\u307e\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u30c7\u30e2\u30da\u30fc\u30b8\u306e\u69d8\u306b \u30c7\u30e2\u30da\u30fc\u30b8 https:\/\/www.webcyou.com\/?p […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[171,59,177,168,176,40,166,37,47,46,39,178,138],"class_list":["post-4254","post","type-post","status-publish","format-standard","hentry","category-html5","tag-android","tag-android-sdk","tag-css3","tag-html","tag-html5","tag-ios-sdk","tag-iphone","tag-iphone-","tag-javascript-2","tag-js","tag-39","tag-178","tag-138"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4254"}],"version-history":[{"count":4,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4254\/revisions"}],"predecessor-version":[{"id":4258,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4254\/revisions\/4258"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}