view source
JavaScript
document.title = 'PAIR PATTERN 同じ模様の組み合わせを見つけるゲーム';
const seOK = new Audio('/mp3/ok.mp3');
var svgFiles = [
'sample0-opacity01.svg',
'sample0-opacity05.svg',
'sample0-opacity09.svg',
'sample-dot-rect2.svg',
'sample-dot-rect3.svg',
'sample-dot-rect4.svg',
'sample-dot-rect3x2.svg',
'sample-line-path.svg',
'sample-line.svg',
'sample-line-tate.svg',
'sample-line-naname.svg',
'sample-line-path-shadow.svg',
'sample-line-path-cross.svg',
'sample-line-path-cross4.svg',
'sample-line-path-cross4-dia.svg',
'sample-line-path-cross8.svg',
'sample-line-path-cross8-hisigata.svg',
'sample-line-path-chain-ko.svg',
'sample-line-path-arrow.svg',
'sample-line-path-x.svg',
'sample-line-path-plus.svg',
'sample-line-path-kazaguruma.svg',
'sample-line-path-kazaguruma2.svg',
'sample-line-path-gusya.svg',
'sample-line-path3.svg',
'sample-line-path3-siba.svg',
'sample-line-target.svg',
'sample-line-path-stripes.svg',
'sample-line8-path-dot.svg',
'sample-line8-path-sewing.svg',
'sample-line-width.svg',
'sample-line-circle.svg',
'sample-line-circle-cross.svg',
'sample-rect.svg',
'sample-rect-stroke.svg',
'sample-rect-stroke-naname.svg',
'sample-rect2.svg',
'sample-rect4-3.svg',
'sample-rect4-3-stroke.svg',
'sample-rect4-3-naname.svg',
'sample-rect8.svg',
'sample-rect8-stroke.svg',
'sample-rect8-belt.svg',
'sample-rect8-6-stroke.svg',
'sample-rect8-in-rect.svg',
'sample-rect8-cross.svg',
'sample-rect8-chain.svg',
'sample-rect8-diamond.svg',
'sample-rect8-ta.svg',
'sample-rect-rope.svg',
'sample-rect2-zure.svg',
'sample-rect2-stroke-kasane.svg',
'sample-checkered2.svg',
'sample-checkered4.svg',
'sample-checkered8.svg',
'sample-circle.svg',
'sample-circle-stroke.svg',
'sample-circle-stroke-width.svg',
'sample-circle-stroke-in.svg',
'sample-circle-stroke-cross.svg',
'sample-circle-naname.svg',
'sample-circle-naname-stroke.svg',
'sample-circle-min.svg',
'sample-circle-min-stroke.svg',
'sample-circle-mask-shichihou.svg',
'sample-circle4-in.svg',
'sample-circle4-rect.svg',
'sample-circle4-in-in.svg',
'sample-circle4-in-in2.svg',
'sample-circle4-shirokuro.svg',
'sample-circle4-chain.svg',
'sample-circle4-line.svg',
'sample-circle4-shichihou.svg',
'sample-circle-hex.svg',
'sample-circle-hex-zure.svg',
'sample-circle2-ellipse.svg',
'sample-circle-half.svg',
'sample-circle-path.svg',
'sample-circle-arc-uroko.svg',
'sample-circle-seiganha.svg',
'sample-circle-seiganha-mask.svg',
'sample-circle-clip.svg',
'sample-circle-foot-cat.svg',
'sample-peke-hex.svg',
'sample-line-sankuzushi.svg',
'sample-line-sankuzushi-scale4.svg',
'sample-tri.svg',
'sample-tri-min.svg',
'sample-tri-kazaguruma.svg',
'sample-tri2.svg',
'sample-tri2-scale05.svg',
'sample-tri2-stroke.svg',
'sample-tri3.svg',
'sample-tri-in.svg',
'sample-tri4-naname.svg',
'sample-tri3-asanoha.svg',
'sample-tri6-hex-star.svg',
'sample-tri-mask.svg',
'sample-path-twist.svg',
'sample-path-wave.svg',
'sample-path-wave-high.svg',
'sample-path-wave-high2.svg',
'sample-path-wave-dense.svg',
'sample-path-wave-lambda',
'sample-path-wave4-chain.svg',
'sample-path-gizagiza.svg',
'sample-path-rect-chain.svg',
'sample-path-hishigata.svg',
'sample-path-diamond.svg',
'sample-path-dia-cross.svg',
'sample-path-moon2.svg',
'sample-path-arrow.svg',
'sample-path-arrow2.svg',
'sample-path-arrow3.svg',
'sample-path-arrow-sakushi.svg',
'sample-path-arrow-sayu.svg',
'sample-path-cross8.svg',
'sample-path-branch.svg',
'sample-path-stroke-dasharray.svg',
'sample-path-stroke-dasharray8.svg',
'sample-path-stroke-dasharray-grid.svg',
'sample-path4-line.svg',
'sample-path4-tri.svg',
'sample-path-jigsaw.svg',
'sample-path4-saw-miss.svg',
'sample-path4-saw2-miss.svg',
'sample-path4-cross.svg',
'sample-path4-bundou.svg',
'sample-path4-wave4.svg',
'sample-path4-arc-flower3.svg',
'sample-path4-polygon5.svg',
'sample-path4-polygon5-star.svg',
'sample-path4-flower.svg',
'sample-path4-flower3.svg',
'sample-path4-flower4.svg',
'sample-path4-flower4-wave.svg',
'sample-path4-flower6.svg',
'sample-path4-flower6-bold.svg',
'sample-path4-flower-sakura.svg',
'sample-path4-flower-sakura-star.svg',
'sample-rect8-iriko.svg',
'sample-rect-higaki.svg',
'sample-rect4-hochikisu.svg',
'sample-rect4-train.svg',
'sample-rect4-hebi.svg',
'sample-rect4-kaidan.svg',
'sample-stroke.svg',
'sample-check2.svg',
'sample-wave.svg',
'sample-wave2-tatewaku.svg',
'sample-plus.svg',
'sample-hex.svg',
'sample-swirl.svg',
'sample-brick.svg',
'sample-arrow.svg',
'sample-path.svg',
'sample-path-c2.svg',
'sample-path-raimon.svg',
'sample-path-rect-uzu.svg',
'sample-path-curl.svg',
'sample-path-curl-twin.svg',
'sample-path-cross.svg',
'sample-path-uroko.svg',
'sample-path-circle-half.svg',
'sample-path-uneune.svg',
'sample-path-uneune2.svg',
'sample-path-uneune4.svg',
'sample-path-hex.svg',
'sample-path-tri.svg',
'sample-path-zig.svg',
'sample-path-eye.svg',
'sample-path-chip.svg',
'sample-path-yinyang.svg',
'sample-path-y.svg',
'sample-path-wave-weight.svg',
'sample-pattern2-line.svg',
'sample-pattern2-line-naname.svg',
'sample-pattern4-line-naname2.svg',
'sample-pattern4-dot-mosaic.svg',
'sample-pattern2-circle-dot.svg',
'sample-pattern3-line-rad.svg',
'sample-pattern3-line-rad4.svg',
'sample-pattern4-path-karakusa.svg',
'sample-line8-path-mask-parallel.svg',
'sample-line8-path-mask-parallel2.svg',
'sample-line8-path-linework.svg',
'sample-line8-path-linework2.svg',
'sample-polygon-star.svg',
'sample-polygon-heart.svg',
'sample-polygon-syuriken.svg',
'sample-path-face-smile.svg',
];
var dir = '/demo/-svg/svg-pattern/';
var ary = svgFiles.concat();
var w = window.innerWidth;
var h = window.innerHeight - 40;
var clearCount = 0;
$(function(){
$('html,body').css({overflow:'hidden'});
$demo = $('#demo');
$table = $('<table>');
$demo.append($table);
var iMax = 2;
var jMax = 3;
if(h>w){
iMax = 8;
jMax = 12;
}
var max = iMax*jMax;
var selectAry = [];
function setAry(){
ary = svgFiles.concat();
ary = _.shuffle(ary);
console.log(ary);
ary = ary.slice(0, max/2);
ary = ary.concat(ary);
ary = _.shuffle(ary);
console.log(ary);
//console.log(ary.length);
//console.log(max);
}
function setTable(){
if(clearCount === 0){
iMax = 2;
jMax = 3;
} else if(clearCount === 1){
iMax = 4;
jMax = 4;
} else if(clearCount === 2){
iMax = 6;
jMax = 6;
} else {
iMax = 12;
jMax = 8;
if(h>w){
iMax = 8;
jMax = 12;
}
}
max = iMax*jMax;
setAry();
$table.empty();
var index = 0;
for(i=0;i<iMax;i++){
$tr = $('<tr>');
$table.append($tr);
$tr.css({height:h/iMax});
for(j=0;j<jMax;j++){
$td = $('<td>');
$tr.append($td);
$td.css({width:w/jMax});
$td.css({backgroundImage:'url('+dir+ary[index]+')'}).attr({p:ary[index],ix:index});
$i = $('<i>');
$td.append($i);
$td.on('click', function(){
ele = $(this);
if(ele.hasClass('open')){return;}
if(ele.hasClass('select')){
ele.removeClass('select');
selectAry = [];
return;
}
ele.addClass('select');
p = ele.attr('p');
selectAry.push(p);
console.log(selectAry);
if(selectAry.length === 2){
if(selectAry[0] === selectAry[1]){
$table.find('.select').addClass('open');
seOK.currentTime = 0;
seOK.play();
if($table.find('.open').length >=max){
clearCount++;
let key = getURLKEY();
if(key && clearCount === 3){
$key = $('<p>',{id:'keyCrypto'}).text(key);
$key.on('dblclick',function(){$(this).remove();});
$('#demo').append($key);
}
setTable();
}
}
$table.find('.select').removeClass('select');
selectAry = [];
}
});
index++;
}
}
}
setTable();
});
//
CSS
html,body{
overflow:hidden;
}
*{
box-sizing:border-box;
}
table{
width:100%;
height:100%;
min-height:calc(100vh - 40px);
}
td{
cursor:pointer;
}
i{
display:block;
width:100%;
height:100%;
}
td.select i{
border:4px solid #00ff00;
}
td:hover i{
border:4px solid #fff;
}
td.open{
background-color:#000;
cursor:crosshair;
}
td.open i{
border:4px solid #000;
background-color:#000;
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-game-pair-pattern/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。