[Game] Javascriptでナンプレ

2016年12月6日

Javascript テクノロジー プログラミング 特集

t f B! P L
ナンプレって脳トレをするのに非常にいいって知ってました? 確かに頭使うよね・・・ ってことで、今回はナンプレゲームを自分で構築しておこうと思ったので、製作工程を含め、ソースコードをシリーズ化して掲載することにしました。

Summery

「NumberPlace(ナンプレ)」は、9✕9マスで縦横、3x3ブロックが1〜9を順番に入れ込んでいき、同じ数字が重複しないようにするゲームです。 初回の今回は、以下の3つの機能を搭載します。
1. サンプル問題10問 2. 途中経過の保存機能 3. 正解判定

こだわり

外部ライブラリは一切使わずにコーディングするので、各種参考になると思います。 また、今回の構成はjavascriptのみで動作するようにしているので、ローカル環境でも動くので、インターネットに接続していなくても遊べるようにしています。 セーブデータは、ローカルストレージに保存するので、各自の端末で削除してしまうと、セーブデータも無くなります。ご注意ください。

ソースコード

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title>NumberPlace</title> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT"> <link type='text/css' rel='stylesheet' href='css/numberplace.css' /> <script type='text/javascript' src='js/lib.js'></script> <script type='text/javascript' src='js/numberplace.js'></script> </head> <body class='design_black' data-transition='scroll_stop'> <h1>NumberPlace</h1> <hr> <div id='game'> <table class="numberplace"> <tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td> <td></td><td></td><td></td> <td></td><td></td><td></td></tr> </table> </div> <div id="key"> <table class="numberKey"> <tr> <td data-key="1">1</td> <td data-key="2">2</td> <td data-key="3">3</td> </tr> <tr> <td data-key="4">4</td> <td data-key="5">5</td> <td data-key="6">6</td> </tr> <tr> <td data-key="7">7</td> <td data-key="8">8</td> <td data-key="9">9</td> </tr> <tr> <td class="clear" data-key="" colspan="3">clear</td> </tr> </table> </div> <hr> <div> <button id="clear">Clear</button> <button id="finish">Finish</button> </div> <div> <button id="load">Load</button> <button id="save">Save</button> </div> <hr> <ol id="lists"> </ol> </body> </html> !(function(){ var $$={}; /** * Library --------------------- */ /** * Event-Set * param @ t : Target-element * param @ m : mode ["onload"->"load" , "onclick"->"click"] * param @ f : function **/ $$.eventAdd=function(t, m, f){ //other Browser if (t.addEventListener){t.addEventListener(m, f, false)} //IE else{ if(m=='load'){ var body = document.body; if(typeof(body)!='undefined'){body = w;} if((typeof(onload)!='undefined' && typeof(body.onload)!='undefined' && onload == body.onload) || typeof(eval(onload))=='object'){ t.attachEvent('on' + m, function() { f.call(t , window.event); }); } else{f.call(t, w.event)} } else{t.attachEvent('on' + m, function() { f.call(t , window.event); })} } }; /** * Get URL-property * return @ [url , domain , querys{}]; **/ $$.urlProperty=function(url){ if(!url){url=location.href} var res = {}; var urls = url.split("?"); res.url = urls[0]; res.domain = urls[0].split("/")[2]; res.querys={}; if(urls[1]){ var querys = urls[1].split("&"); for(var i=0;i<querys.length;i++){ var keyValue = querys[i].split("="); if(keyValue.length!=2||keyValue[0]===""){continue} res.querys[keyValue[0]] = keyValue[1]; } } return res; }; /** * Ajax * $$.ajax.set({ * url:"**", * method:"POST", * async:true, * query:{}, * querys:[], * onSuccess:function(){} * }); **/ $$.ajax = { createHttpRequest:function(){ //Win ie用 if(window.ActiveXObject){ //MSXML2以降用; try{return new ActiveXObject("Msxml2.XMLHTTP")} catch(e){ //旧MSXML用; try{return new ActiveXObject("Microsoft.XMLHTTP")} catch(e2){return null} } } //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用; else if(window.XMLHttpRequest){return new XMLHttpRequest()} else{return null} }, //XMLHttpRequestオブジェクト生成 set:function(options){ if(!options){return} var httpoj = new $$.ajax.createHttpRequest(); if(!httpoj){return;} //open メソッド; option = $$.ajax.setOption(options); httpoj.open( option.method , option.url , option.async ); //type //httpoj.setRequestHeader('Content-Type', option.type); if(typeof option.type != "undefined"){ httpoj.setRequestHeader('Content-Type', option.type); } else{ httpoj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } //onload-check // httpoj.onreadystatechange = this.readystate(httpoj,option); httpoj.onreadystatechange = function(){ //readyState値は4で受信完了; if (httpoj.readyState==4){ //コールバック option.onSuccess(httpoj.responseText); } }; //query整形 var data = $$.ajax.setQuery(option); //send メソッド if(data.length){ httpoj.send(data.join("&")); } else{ httpoj.send(); } }, dataOption:{ url:"", query:{}, // same-key Nothing querys:[], // same-key OK data:{}, // ETC-data event受渡用 async:"true", // [trye:非同期 false:同期] method:"POST", // [POST / GET] type:"application/x-www-form-urlencoded", // [text/javascript]... //call-back onSuccess:function(res){console.log("Success:"+res)}, onError:function(res){console.log("Error:"+res)} }, setOption:function(options){ var option = {}; for(var i in $$.ajax.dataOption){ if(typeof options[i] != "undefined"){ option[i] = options[i]; } else{ option[i] = $$.ajax.dataOption[i]; } } return option; }, setQuery:function(option){ var data = []; if(typeof option.query != "undefined"){ for(var i in option.query){ data.push(i+"="+encodeURIComponent(option.query[i])); } } if(typeof option.querys != "undefined"){ for(var i=0;i<option.querys.length;i++){ if(typeof option.querys[i] == "Array"){ data.push(option.querys[i][0]+"="+encodeURIComponent(option.querys[i][1])); } else{ var sp = option.querys[i].split("="); data.push(sp[0]+"="+encodeURIComponent(sp[1])); } } } return data; }, _:0 }; //path-info Ex):p=location.href $$.pathinfo = function(p){ var basename="", dirname=[], filename=[], ext=""; var p2 = p.split("?"); var urls = p2[0].split("/"); for(var i=0; i<urls.length-1; i++){ dirname.push(urls[i]); } basename = urls[urls.length-1]; var basenames = basename.split("."); for(var i=0;i<basenames.length-1;i++){ filename.push(basenames[i]); } ext = basenames[basenames.length-1]; return { "hostname":urls[2], "basename":basename, "dirname":dirname.join("/"), "filename":filename.join("."), "extension":ext, "query":(p2[1])?p2[1]:"", "path":p2[0] }; }; $$.urlinfo=function(uri){ if(!uri){uri = location.href} var url = uri; //URLとクエリ分離分解; var query={}; // set-query if(uri.indexOf("?")!=-1){ var sp1 = uri.split("?"); url = sp1[0]; query = $$.getQuery(sp1[1],"&","="); } // semi-colon-split else if(uri.indexOf(";")!=-1){ var sp = uri.split(";"); url = sp[0]; query = $$.getQuery(sp1[1],";","="); } //基本情報取得; var sp = url.split("/"); var selfpath = ""; for(var i=3;i<sp.length;i++){ //selfpaths.push(sp[i]); selfpath += "/"+sp[i]; } var data={ url:url, dirname:this.pathinfo(url).dirname, domain:sp[2], protocol:sp[0].replace(":",""), selfpath:selfpath, query:query }; return data; }; // ex) $$.getQuery("a=1&b=2&c=3","&","="); $$.getQuery = function(data, splitValue, keyValueSplit){ var query = {}; var sp = data.split(splitValue); for(var i=0; i<sp.length; i++){ var sp2 = sp[i].split(keyValueSplit); query[sp2[0]] = sp2[1]; } return query; }; //cookie $$.cookie = { //init-data options:{ name : 'temporary_cookie', day : 0, hour : 0, min : 1, sec : 0 }, //expires date : function(add) { if(!add){add = 0} var exp = new Date(); if(add){ exp.setTime(exp.getTime()+ add); } else{ exp.setTime(exp.getTime() + (this.options.day * 1000 * 60 * 60 * 24) + (this.options.hour * 1000 * 60 * 60) + (this.options.min * 1000 * 60) + (this.options.sec * 1000)); } return exp.toGMTString(); }, //secure-check checkSecure : function() { if (location.href.match(/^https:/)) {return true} else {return false} }, set : function(name, val, addTime) { if(!addTime){addTime = 3600;} if(!name){name = this.options.name} val = this.encode(val); if (this.checkSecure()) { document.cookie = name + "=" + val + ";expires=" + this.date(addTime) + ";secure"; } else { document.cookie = name + "=" + val + ";expires=" + this.date(addTime); } }, del : function(name){ if(!name){name = this.options.name} var exp = new Date(); exp.setTime(exp.getTime()-1); var d = exp.toGMTString(); if (this.checkSecure()) { document.cookie = name + "='';expires=" + d + ";secure"; } else { document.cookie = name + "='';expires=" + d; } }, get : function(name){ return this.val(name); }, val : function(name) { var ck0 = document.cookie.split(" ").join(""); var ck1 = ck0.split(";"); for ( var i = 0; i < ck1.length; i++) { var ck2 = ck1[i].split("="); if (ck2[0] == name) { ck2[1] = this.encode(ck2[1]); return ck2[1]; } } return ''; }, encode:function(val){ if (!val) {return ""} val = val.split("¥r") .join(""); val = val.split("¥n") .join(""); val = val.split("<") .join("-"); val = val.split("%3c").join("-"); val = val.split("%3C").join("-"); val = val.split(">") .join("-"); val = val.split("%3e").join("-"); val = val.split("%3E").join("-"); return val; } }; /** // set-value -> element [ex) $$.getElement("id","#sample")] // type @ [id , class , querySelector] // caution issue return multi-element **/ $$.getElement = function(type , str , num){ //single if(type == "id"){ return document.getElementById(str); } //multi var elements; if(type == "class"){ elements = document.getElementsByClassName(str); } else if(type == "name"){ elements = document.getElementsByName(str); } else if(type == "querySelector"){ elements = document.querySelector(str); } // return-- if(num == "multi"){ return elements; } else if(num == "first"){ return elements[0]; } }; $$.getScriptTag = function(){ var protechScript = document.getElementById("ProtechScript"); if(protechScript == null){return null} return __PROTECH_COMMON.urlinfo(protechScript.src); }; $$.getServiceData = function(service , srcInfo){ if(typeof(__PROTECH_INFO)=="undeifned" || typeof(__PROTECH_INFO.services)=="undeifned"){return null} var data = null; for(var i=0; i<__PROTECH_INFO.services.length; i++){ if(typeof __PROTECH_INFO.services[i] == "undefined"){continue} if(service && service != __PROTECH_INFO.services[i].api){continue} // solid-id if(typeof srcInfo.query.p != "undefined"){ if(typeof __PROTECH_INFO.services[i].pid == "undefined"){continue} if(srcInfo.query.p == __PROTECH_INFO.services[i].pid){ data = __PROTECH_INFO.services[i]; break; } else{continue} } // url-match if(typeof __PROTECH_INFO.services[i]["url"] == "undefined"){continue} if(__PROTECH_INFO.services[i]["url"] == location.href){ data = __PROTECH_INFO.services[i]; break; } } return data; }; /** * Servide Use Function **/ $$.getCookie = function(name){ if(!name || typeof __PROTECH != "undefined" || typeof __PROTECH.cookieName != "undefined" ){name = __PROTECH.cookieName} var cookieData = $$.cookie.get(name); if(!cookieData){ return {"pv":"","uu":"","su":""}; } else{ var sp = cookieData.split("."); return {"uu":sp[0],"su":sp[1],"pv":sp[2]}; } } /** * Log write */ $$.logWrite = function(data){ var uidCookie = $$.getCookie(); var q = [ 'mode=' + 'log', 'd=' + escape(__PROTECH[service].uKey), 'pv=' + escape(uidCookie["pv"]), 'su=' + escape(uidCookie["su"]), 'uu=' + escape(uidCookie["uu"]), 'data=' + escape(data) ]; var sc = document.createElement('script'); sc.src = __PROTECH[service].scriptPath + 'load.php'+'?t='+ (+new Date()) + "&" +q.join("&"); sc.type = 'text/javascript'; sc.async = true; document.body.appendChild(sc); console.log(sc.src); } /** * 62進数 **/ $$.hex62 = { chars:function(){ var str = ""; str += "0123456789"; str += "abcdefghijklmnopqrstuvwxyz"; str += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; return str; }, encode:function(num){ var chars = this.chars(); var cn = chars.length; var str = []; var a1 , a2; while (num != 0) { a1 = parseInt(num / cn); a2 = num - (a1 * cn); str.unshift(chars.substr(a2,1)); num = a1; } var res = str.join(""); res = (!res)?"0":res; return res; }, decode:function(num){ var chars = this.chars(); var char2 = {}; var cn = chars.length; for (var i=0; i< cn; i++) { char2[chars[i]] = i; } var str = 0; for (var i=0; i<num.toString().length; i++) { str += char2[num.substr((i+1)*-1, 1)] * Math.pow(cn, i); } return str; } }; /** * 100進数 **/ $$.digit100 = { chars:function(){ var str = ""; str += "0123456789"; str += "abcdefghijklmnopqrstuvwxyz"; str += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // -+*/@_?,.;:^!#$%&'()[]{}<>=~|`¥ //str += "!"; return str; }, encode:function(num){ var chars = this.chars(); var cn = chars.length; var str = []; var a1 , a2; while (num != 0) { a1 = parseInt(num / cn); a2 = num - (a1 * cn); str.unshift(chars.substr(a2,1)); num = a1; } var res = str.join(""); res = (!res)?"0":res; return res; }, decode:function(num){ var chars = this.chars(); var char2 = {}; var cn = chars.length; for (var i=0; i< cn; i++) { char2[chars[i]] = i; } var str = 0; for (var i=0; i<num.toString().length; i++) { str += char2[num.substr((i+1)*-1, 1)] * Math.pow(cn, i); } return str; } }; // Transformation $$.getPos = function(elm){ //エレメント確認処理 if(!elm){return;} //途中指定のエレメントチェック(指定がない場合はbody) var target = document.body; //デフォルト座標 var pos={x:0,y:0}; do{ //指定エレメントでストップする。 if(elm == target){break} //対象エレメントが存在しない場合はその辞典で終了 if(typeof(elm)=='undefined' || elm==null){break} //座標を足し込む pos.x += elm.offsetLeft; pos.y += elm.offsetTop; } //上位エレメントを参照する while(elm = elm.offsetParent); //最終座標を返す return pos; }; //targetの中心座標にelmの中心座標を移動する。 $$.getPosCenter = function(elm,target){ var pos1 = $$.getPos(target); var size1 = $$.getSize(target); var size2 = $$.getSize(elm); return { x:(pos1.x+(size1.x/2)-(size2.x/2)), y:(pos1.y+(size1.y/2)-(size2.y/2)) }; }; $$.getSize = function(elm){ //対象element if(typeof(elm)=='undefined'){ if (navigator.userAgent.match("MSIE")&&document.compatMode!='BackCompat'){ elm = document.documentElement; } else{ elm = document.getElementsByTagName("body")[0]; } } //サイズ取得; var size={ x:elm.offsetWidth, y:elm.offsetHeight }; //子階層依存※下に1つのみの子を持つ場合サイズチェックを行う; if(elm.childNodes.length==1 && elm.tagName=='A'){ var chk ={ x:elm.childNodes[0].offsetWidth, y:elm.childNodes[0].offsetHeight }; if(chk.x > size.x){ size.x = chk.x; } if(chk.y > size.y){ size.y = chk.y; } } return size; }; //Emveronment $$.getWindowSize = function(){ var d={x:0,y:0}; var e; if(window.innerWidth){ document.x = window.innerWidth; document.y = window.innerHeight; } else if(navigator.userAgent.indexOf("MSIE")!=-1&&document.compatMode=='BackCompat'){ document.x = document.body.clientWidth; document.y = document.body.clientHeight; } else{ document.x = document.documentElement.clientWidth; document.y = document.documentElement.clientHeight; } return d; }; //mouse $$.getMouse = { pos:{x:0,y:0}, proc:function(e){ //IE以外のブラウザ; if(e){ this.pos={ x:e.clientX, y:e.clientY }; } //IE処理; else{ this.pos={ x:event.x, y:event.y }; } } }; window.$$LIB = $$; })(); !(function(){ $$={}; $$.data = { game:null, key :null }; $$.datas = []; $$.targetElm = null; $$.__construct = function(){ // numberplace $$.data.game = document.getElementById("game"); if($$.data.game===null){return} var tables = $$.data.game.getElementsByTagName("table"); if(!tables.length){return} var table = tables[0]; if(table.className !== "numberplace"){return} $$.setClassName(table); $$.setInputEvent(table); // key $$.data.key = document.getElementById("key"); if(key===null){return} var keyTables = $$.data.key.getElementsByTagName("table"); if(!keyTables.length){return} $$.setKeyEvent(keyTables[0]); // Button $$.setButtonLoad(); $$.setButtonSave(); $$.setButtonProgramSave(); $$.setButtonProgramLoad(); $$.setButtonClear(); $$.setButtonFinish(); //load-sample $$.loadSample(); //$$.getCache(); }; $$.setClassName = function(table){ //cells var td = table.getElementsByTagName("td"); // set-array for(var i=0; i<td.length; i++){ td[i].setAttribute("data-num" , i); var classes = []; var row = parseInt(i/9 , 10); classes.push("row-" + row); var col = (i%9); classes.push("col-" + col); var block = Number(parseInt(i/27)*3 ,10) + Number(parseInt(parseInt(i%9 ,10)/3 ,10)); classes.push("block-" + block); td[i].className = classes.join(" "); td[i].setAttribute("data-row" , row); td[i].setAttribute("data-col" , col); td[i].setAttribute("data-block" , block); } }; $$.setInputEvent = function(table){ var td = table.getElementsByTagName("td"); for(var i=0; i<td.length; i++){ td[i].onclick = $$.viewKeyElement; } }; $$.viewKeyElement = function(event){ var elm = event.target; $$.setCellsColorOn(elm); $$.targetElm = elm; var key = document.getElementById("key"); $$.setKeyPosition(key , elm); }; $$.setKeyPosition = function(key , elm){ var win = $$LIB.getWindowSize(); var pos = $$LIB.getPos(elm); if(pos.x < win.x/2){ key.style.setProperty("right","0",""); key.style.setProperty("left","auto",""); } else{ key.style.setProperty("right","auto",""); key.style.setProperty("left","16px",""); } key.style.setProperty("display","block",""); }; $$.setKeyEvent = function(table){ var td = table.getElementsByTagName("td"); for(var i=0; i<td.length; i++){ td[i].onclick = $$.clickKey; } }; $$.clickKey = function(event){ if($$.targetElm === null){return} var elm = event.target; var key = document.getElementById("key"); key.style.setProperty("display","none",""); $$.targetElm.innerHTML = elm.getAttribute("data-key"); $$.setCellsColorOff($$.targetElm); $$.targetElm = null; }; $$.setCellsColorOn = function(elm){ if($$.targetElm !== null){ $$.setCellsColorOff($$.targetElm); } // cross var row = elm.getAttribute("data-row"); var rows = $$.data.game.getElementsByClassName("row-"+row); for(var i=0; i<rows.length; i++){ rows[i].style.setProperty("background-color","#FEE",""); } var col = elm.getAttribute("data-col"); var cols = $$.data.game.getElementsByClassName("col-"+col); for(var i=0; i<cols.length; i++){ cols[i].style.setProperty("background-color","#FEE",""); } //target elm.style.setProperty("background-color","#FCC",""); }; $$.setCellsColorOff = function(elm){ //cross + target var row = elm.getAttribute("data-row"); var rows = $$.data.game.getElementsByClassName("row-"+row); for(var i=0; i<rows.length; i++){ rows[i].style.setProperty("background-color","#FFF",""); } var col = elm.getAttribute("data-col"); var cols = $$.data.game.getElementsByClassName("col-"+col); for(var i=0; i<cols.length; i++){ cols[i].style.setProperty("background-color","#FFF",""); } }; // Button $$.setButtonClear = function(){ var elm = document.getElementById("clear"); if(elm===null){return} elm.onclick = function(){ $$.clearPazzle(); }; }; $$.setButtonLoad = function(){ var elm = document.getElementById("load"); if(elm===null){return} elm.onclick = function(){ //$$.setLoad(); $$.getCache(); }; }; $$.setButtonSave = function(){ var elm = document.getElementById("save"); if(elm===null){return} elm.onclick = function(){ $$.setSave(); }; }; $$.setButtonProgramSave = function(){ var elm = document.getElementById("programSave"); if(elm===null){return} elm.onclick = function(){ $$.setProgramSave(); }; }; $$.setButtonProgramLoad = function(){ var elm = document.getElementById("programLoad"); if(elm===null){return} elm.onclick = function(){ $$.setProgramLoad(); }; }; $$.setButtonFinish = function(){ var elm = document.getElementById("finish"); if(elm===null){return} elm.onclick = function(){ if($$.checkPazzle()){ } else{ alert("complete"); } }; }; $$.clearPazzle = function(){ var tables = $$.data.game.getElementsByTagName("table"); var table = tables[0]; var td = table.getElementsByTagName("td"); for(var i=0; i<td.length; i++){ td[i].innerHTML = ""; } }; $$.checkPazzle = function(){ var tables = $$.data.game.getElementsByTagName("table"); var table = tables[0]; //flg var flg = 0; for(var i=0; i<9; i++){ //check-row var rows = table.getElementsByClassName("row-"+i); var arrRow = []; for(var j=0; j<rows.length; j++){ var num = rows[j].innerHTML; if(num===""){flg++;continue;} if(arrRow.indexOf(num)!==-1){flg++;} arrRow.push(num); } //check-col var cols = table.getElementsByClassName("col-"+i); var arrCol = []; for(var j=0; j<cols.length; j++){ var num = cols[j].innerHTML; if(num===""){flg++;continue;} if(arrCol.indexOf(num)!==-1){flg++;} arrCol.push(num); } //check-block var blocks = table.getElementsByClassName("block-"+i); var arrBlock = []; for(var j=0; j<blocks.length; j++){ var num = blocks[j].innerHTML; if(num===""){flg++;continue;} if(arrBlock.indexOf(num)!==-1){flg++;} arrBlock.push(num); } } return flg; }; $$.setSave = function(){ var tables = $$.data.game.getElementsByTagName("table"); var table = tables[0]; var td = table.getElementsByTagName("td"); var data = []; var emptyFlg = 0; for(var i=0; i<td.length; i++){ var num = td[i].innerHTML; if(num === ""){ data[i] = "-"; } else{ data[i] = Number(num); } if(td[i].innerHTML!==""){emptyFlg++;} } if(emptyFlg > 0){ var str = $$.getSave_arr2str(data); localStorage.setItem("numberplace", str); } else{ localStorage.removeItem("numberplace"); } }; $$.setProgramSave = function(){ var tables = $$.data.game.getElementsByTagName("table"); var table = tables[0]; var td = table.getElementsByTagName("td"); var data = []; var emptyFlg = 0; for(var i=0; i<td.length; i++){ var num = td[i].innerHTML; if(num === ""){ data[i] = "-"; } else{ data[i] = Number(num); } if(td[i].innerHTML!==""){emptyFlg++;} } if(emptyFlg > 0){ var str = $$.getSave_arr2str(data); localStorage.setItem("numberplace_program", str); } else{ localStorage.removeItem("numberplace_program"); } }; $$.setProgramLoad = function(){ var tables = $$.data.game.getElementsByTagName("table"); var table = tables[0]; var td = table.getElementsByTagName("td"); var ls = localStorage.getItem("numberplace_program"); if(!ls){return} var data = $$.getSave_str2arr(ls); for(var i=0; i<td.length; i++){ //if(!data[i] || !data[i].match(/[1-9]/)){data[i] = ""} if(!data[i].toString().match(/[1-9]/)){data[i] = ""} td[i].innerHTML = data[i]; } }; $$.getCache = function(){ var tables = $$.data.game.getElementsByTagName("table"); var table = tables[0]; var td = table.getElementsByTagName("td"); var ls = localStorage.getItem("numberplace"); if(!ls){return} var data = $$.getSave_str2arr(ls); for(var i=0; i<td.length; i++){ // if(data[i] === 0){data[i] = ""} // if(data[i] === "-"){data[i] = ""} if(!data[i].toString().match(/[1-9]/)){data[i] = ""} td[i].innerHTML = data[i]; } }; $$.getProgramData = function(){ var ls = localStorage.getItem("numberplace_program"); if(!ls){return ""} return $$.getSave_str2arr(ls); }; /** * LocalStorage-Save Value * condition : Numeric (1-digit) */ $$.getSave_arr2str = function(arr){ var str=""; for(var i=0; i<arr.length; i++){ str += arr[i].toString(); } return str; }; $$.getSave_str2arr = function(str){ str = str.replace(/\"/g , ''); var arr=[]; for(var i=0; i<str.length; i++){ arr.push(Number(str.charAt(i))); } return arr; }; $$.loadSample = function(){ $$LIB.ajax.set({ url:"./data/sample.json", method:"GET", async:"true", //type:"text/javascript", //query:{}, onSuccess:function(res){ if(!res){return} var json = JSON.parse(res); var lists = document.getElementById("lists"); for(var i=0; i<json.length; i++){ var li = document.createElement("li"); li.innerHTML = json[i].name; li.setAttribute("data-np" , json[i].data); li.onclick = $$.clickDataLists; lists.appendChild(li); } } }); }; $$.clickDataLists = function(event){ var elm = event.target; var data = elm.getAttribute("data-np"); if(!data){return} $$.setData_list2view(data); } $$.setData_list2view = function(data_np){ if(!data_np){return} var tables = $$.data.game.getElementsByTagName("table"); var table = tables[0]; var td = table.getElementsByTagName("td"); var data = $$.getSave_str2arr(data_np); for(var i=0; i<td.length; i++){ if(!data[i].toString().match(/[1-9]/)){data[i] = ""} td[i].innerHTML = data[i]; } // cache localStorage.setItem("numberplace_program" , data_np); }; $$LIB.eventAdd(window , "load" , $$.__construct); })(); body,html{ width:100%; height:100%; } body{ text-align:center; } #game{ display:inline-block; box-shadow:4px 4px 4px rgba(0,0,0,0.4); margin:auto auto; } table{ border-collapse:collapse; } td{ padding:0; margin:0; } /*numberPlace*/ .numberplace td{ width:32px; height:32px; border:1px solid #666; cursor:pointer; text-align:center; vertical-align:middle; background-color:white; font-size:20px; font-weight:bold; } .numberplace td:hover{ background-color:#DDD; } .numberplace tr:nth-child(1){ border-top:2px solid #000; } .numberplace tr:nth-child(3){ border-bottom:2px solid #000; } .numberplace tr:nth-child(6){ border-bottom:2px solid #000; } .numberplace tr:nth-child(9){ border-bottom:2px solid #000; } .numberplace td:nth-child(1){ border-left:2px solid #000; } .numberplace td:nth-child(3){ border-right:2px solid #000; } .numberplace td:nth-child(6){ border-right:2px solid #000; } .numberplace td:nth-child(9){ border-right:2px solid #000; } /*numberKey*/ #key{ position:absolute; display:none; box-shadow:10px 10px 10px rgba(0,0,0,0.4); margin:8px; } .numberKey td{ width:40px; height:40px; background-color:blue; color:white; cont-weight:bold; text-align:center; vertical-align:middle; font-size:32px; border:1px solid white; cursor:pointer; } .numberKey td.clear{ width:auto; background-color:#666; font-size:24px; } .numberKey td:hover{ background-color:red; } .numberKey td:active{ background-color:black; } /*etc*/ button{ margin:8px; font-size:12px; font-weight:bold; cursor:pointer; border:1px solid #CCC; border-radius:4px; padding:8px; } button:hover{ opacity:0.5; } #lists li{ text-align:left; cursor:pointer; font-size:24px; } [ { "name":"sample-1", "data":"--7---2-----6-4---4----2--8-----1--52---5--1---6-8--7--8-------1--59-8-372-4-----" }, { "name":"sample-2", "data":"--1---3-----9-1--423---7-69--8-6--71---------19----------8-9--6---3---4-42-------" }, { "name":"sample-3", "data":"--2---6-----3-895-7-8--5-------56--8-7--9--2--8----5-----92----5-3----------431--" }, { "name":"sample-4", "data":"--4---3---9---867-12---9--8------725--------49---2-------5----7----6-94-2-8-1--3-" }, { "name":"sample-5", "data":"--2---5---86---------5--71-89--5---2--4-8--3-2--------4----2---7---4--8---9--826-" }, { "name":"sample-6", "data":"--7---3--8------4956------12-3-9-----7---3--6--5--1----8-1--5----4----9-71-2-----" }, { "name":"sample-7", "data":"--9---6--4--2--9------------754--------9-2-8-6------25-4----1979---3-----1--8----" }, { "name":"sample-8", "data":"--6---1--4--1-8-597--2------5-9--4-------6391-67-4-2------7---81------7----4-----" }, { "name":"sample-9", "data":"--6---5--3-1-8--699----5-1-5--6--8----8---1---6-87---------1953---496----1------2" }, { "name":"sample-10", "data":"--9---6--61-----2--5--3-1---7-5-826--62--4--------14-52---6--5-18-----9-9----5---" } ]

サンプルURL

https://mynt-blog-tools.netlify.app/numberplace/index.html

ご注意

とりあえず、このページのソースコードは、個人利用はフリーですが、商用はサイト管理者までお問い合わせくださいませ。

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出。

ブログ アーカイブ

QooQ