ナンプレって脳トレをするのに非常にいいって知ってました？
確かに頭使うよね・・・
ってことで、今回はナンプレゲームを自分で構築しておこうと思ったので、製作工程を含め、ソースコードをシリーズ化して掲載することにしました。
Summery
「NumberPlace（ナンプレ）」は、９✕９マスで縦横、3x3ブロックが１〜９を順番に入れ込んでいき、同じ数字が重複しないようにするゲームです。
初回の今回は、以下の３つの機能を搭載します。
1. サンプル問題１０問
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
};
//子階層依存※下に１つのみの子を持つ場合サイズチェックを行う;
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
ご注意
とりあえず、このページのソースコードは、個人利用はフリーですが、商用はサイト管理者までお問い合わせくださいませ。
