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++;
                getHint(clearCount);
                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廃止等で動かないページもあります。