document.title = '１文字かるた 配列が壊れたキーボードで文字を打つゲーム';

document.oncontextmenu = function () {return false;}

$(function(){
  let textsOrg = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんー';
  let textAryOrg = textsOrg.split('');
  clearCount = 0;

  $demo = $('#demo')
  $ult = $('<ul>',{id:'word'});
  $demo.append($ult);
  $ul = $('<ul>',{id:'keyboard'});
  $demo.append($ul);
  $c = $('<c>').text(clearCount);
  $demo.append($c);
  $h1 = $('<h1>').text(document.title);
  $demo.append($h1);
  $p = $('<p>').text('配置ばらばら！疑似かるた！濁点とかは無視できます！');
  $demo.append($p);

  aryOrg = [];

//拗音（ようおん）と促音（そくおん）
  kanaConvAry = [
    ['っ', 'つ'],
    ['ゃ', 'や'],
    ['ゅ', 'ゆ'],
    ['ょ', 'よ'],
    ['ぁ', 'あ'],
    ['ぃ', 'い'],
    ['ぅ', 'う'],
    ['ぇ', 'え'],
    ['ぉ', 'お'],
    ['ゎ', 'わ'],
  ];

  var setWord = function(){
    if(!ary.length){
      setData();
      return;
    }
    clearCount++;
    $c.text(clearCount);
    $ult.empty();
    charAry = ary.pop().split('');
    charAry.forEach(function(v){
      let $li = $('<li>').text(v);
      $ult.append($li);
    });
  }

  var setKeyboard = function(){
    $ul.empty();
    $ul.removeClass('clear');
    texts = _.shuffle(textAryOrg);
    texts.forEach(function(v){
      $li = $('<li>').text(v);
      $ul.append($li);

      let r = Math.random()*9;
      if(r>7){
        $li.css({transform:'scale(-1)'});
      } else if(r>4){
        $li.css({transform:'scaleY(-1)'});
      } else if(r>1){
        $li.css({transform:'scaleX(-1)'});
      }
      $li.on('click', function(){
        $t = $ult.find('li:not(.ok)').eq(0);
        let t = $t.text().normalize('NFD')[0];
        kanaConvAry.forEach(function(k){
          t = t.replace(k[0],k[1]);
        });
        if(v===t){
          $t.addClass('ok');
          if($ult.find('li:not(.ok)').length===0){
            $ul.addClass('clear');

            let key = getURLKEY();
            if(key && clearCount === 3){
               $key = $('<p>',{id:'keyCrypto'}).text(key);
               $key.on('dblclick',function(){$(this).remove();});
               $('#demo').append($key);
               return;
            }
            setTimeout(function(){
              setKeyboard();
              setWord();
            }, 199)
          }
        }
      });
    });
  }
  setKeyboard();

  
  var setData = function(){
    var searchParams = new URLSearchParams(location.search);
    let word = searchParams.get('word');
    if(word){
      word = decodeURI(word);
      console.log(word);
      aryOrg = word.split(',');
      ary = _.shuffle(aryOrg);
      console.log(aryOrg);
      setWord();
    }

    if(!aryOrg.length){
      $.get('/csv/kana.txt', function(data){
        aryOrg = data.split('\n');
        aryOrg.pop();
        ary = _.shuffle(aryOrg);
        setWord();
      });
    }
  }
  setData();

});

html,body{
  overflow:hidden;
  user-select:none;
}

ul{
  margin:12px auto;
}

li{
  display:inline-block;
  width:9vw;
  height:9vmin;
  line-height:9vmin;
  border:2px solid #000;
  text-align:center;
  margin:1px;
}

#word li{
  height:12vmin;
  line-height:12vmin;
  background-color:#ccc;
}
#word li.ok{
  background-color:#afa;
}
#keyboard li{
}
#keyboard li:hover{
  background-color:#eee;
  cursor:pointer;
}
#keyboard.clear li{
  background-color:#000;
}

c{
  display:block;
  font-size:48px;
  font-weight:bold;
  margin:12px auto;
  text-align:center;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-game-keyboard-crusher/