るろ わね ぬめ まほ われ さち リソ ウワ ヌス ラヲ シツ 石右 知和 白自 田出 田由 王玉 爪瓜 活治 水永 氷永 水氷 氏民 比北 村林 末未 木本 木水 旬句 千于 干于 千干 午牛 左在 右左 子干 似以 比此 土士 合令 叉又 先失 力刀 主王 名各 夭天 上土 旦且 日月 失矢 失朱 耳目 太大 平半 人入 占古 己巳 斥斤 犬大 尤犬 子孑 巴巳 己巴 日曰 申中 貝具 仄灰 巨臣 休体 抜技 五伍 伸神 闇間 開閉 迷逆 逃送 黙點 波破 頂頃 項頃 頂項 釘針 険倹 都部 追迫 妺妹 雲雪 鯖鰆 零雰 雑難 離難 雑離 陳陣 開閉 遺遣 輸輪 車東 販敗 責貴 貿賀 賃貸 貨貸 賃貨 諸緒 誠試 診珍 議儀 説設 詳評 複復 衝衛 藉籍 般船 與興 考老 続読 紀記 績続 織職 職識 織識 綱鋼 網鋼 綱網 緑縁 終絡 給絡 終給 紛粉 怒努 薄簿 端瑞 祝視 社祉 短矩 盲育 衆象 當常 欧歌 梢稍 栽裁 松杉 東束 書畫 普晋 施旋 旅族 放故 収牧 改政 攻政 改攻 友反 接按 捐損 拾捨 技枝 挟狭 抱拘 析折 手年 今令 糸系 心必 弔吊 幻幼 対討 客容 戴載 憶臆 快怏 思恩 悩脳 感惑 恕怒 態熊 寒塞 蓄畜 審番 官宮 宇字 孤狐 存有 娘狼 姓性 妨防 奪奮 堅竪 貧貪 宣宜 埋理 基墓 壌壊 城域 国団 因困 厄危 卯卵 幣弊 助肋 制判 刊刑 到倒 別列 滅減 回同 両雨 全金 兎免 児見 做倣 池他 地池 他地 傅博 侵浸 侮悔 仲伸 侍待 便使 便更 伴件 代伐 任仕 亨亭 世冊 炎災 隋惰 祝呪 遂逐 字学 科料 加如 万方 織職 掘堀 凜凛 沈枕 鳥島 鳥烏 柴紫 苫苦 咋昨 廉康 惜借 衝衡 荻萩 哲誓 敞敝 昂昴 易昜 皙晢 酒洒 冽洌 凅涸 浙淅 准淮 疽疸 晴睛 乗秉 春舂 茶荼 薛薜 卲邵 陜陝 候侯 苦若 搏摶 擧舉 見貝 競兢 胃冑 券劵 壺壼 夂夊 徒徙 忽怱 眠眼 舁昇 撒撤 鉃鉄 抔杯 免免 匆勿 治冶 季李 詑詫 師帥 拆折 延廷 塵麈 檸檬 鏖麈

間違い探し 似ている漢字の脳トレゲーム

間違い探し 似ている漢字の脳トレゲーム | ひまあそび-ミニゲーム hi0a.com

view source

JavaScript

document.title = '間違い探し 似ている漢字の脳トレゲーム ';

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

var clearCount  = 0;

var params = new URLSearchParams(location.search.substring(1));
var c = parseInt(params.get('c'));
var t = params.get('t');
if(c){clearCount=c;}

$(function(){
  var area = $('#area');
  var mojiT = $('#moji').text();
  $('#moji').remove();
  var mojiAry = mojiT.split("\n");
  mojiAry.shift();
  mojiAry.pop();
  console.log(mojiAry);
  var setStage = function(){
    var max = mojiAry.length;
    if(clearCount<5){
      max = max/2;
    }
    if(clearCount<9){
      max = max/2;
    }
    if(clearCount<12){
      max = max/2;
    }
    var r = Math.floor(Math.random() * max);
    var mojiV = mojiAry[r];
    if(t){mojiV=t;}
    console.log(mojiV);
    var mojiP = mojiV.split('');
    var n = 12;
    if(clearCount>9999){
      n = 12;
    } else if(clearCount>49){
       n = 6400;
    } else if(clearCount>39){
       n = 4900;
    } else if(clearCount>34){
       n = 3600;
    } else if(clearCount>29){
       n = 2500;
    } else if(clearCount>26){
       n = 1600;
    } else if(clearCount>22){
       n = 900;
    } else if(clearCount>19){
       n = 625;
    } else if(clearCount>14){
       n = 400;
    } else if(clearCount>12){
       n = 144;
    } else if(clearCount>9){
       n = 81;
    } else if(clearCount>7){
       n = 64;
    } else if(clearCount>5){
       n = 49;
    } else if(clearCount>3){
       n = 36;
    } else if(clearCount>2){
       n = 25;
    } else if(clearCount>1){
       n = 16;
    } else {
      n = 9;
    }

    $('h1').addClass('abs');
    if(clearCount>0){
      $('h1').text(clearCount+1);
    }
    if(n>999){
      $('#area').css({lineHeight:'0.7em',marginTop:'0.5vmin'});
    }

    var ary = [];
    var ri = Math.floor(Math.random() * n);
    for(i=0;i<n;i++){
      if(i===ri){
        ary.push(1);
      }else{
        ary.push(0);
      }
    }

    getHint(clearCount);

    area.empty();
    ary.forEach(function(v,i){
      var m = mojiP[v];
      var b = $('<b>').text(m);
      var y = Math.pow(n, 0.5)+0.5;
      b.css({fontSize:(100/y)+ 'vmin',height:(100/y)+'vmin'});//,width:(100/y*3)+'%'
      if(v===1){b.addClass('result');}
      b.on('click', function(){
        if(v===1){
          $(this).addClass('ok');
          if(!$('.result').hasClass('i')){
            clearCount++;
          }
          $('.result').addClass('i');
          setTimeout(function(){setStage()},999);
        } else {
          $(this).addClass('ng');
          if(clearCount>3){clearCount--;}
          $('.result').addClass('i');
        }
      });
      area.append(b);
    });
  }
  setStage();

});

CSS

html,body{
  overflow:hidden;
}

#demo{
}

#target{
  margin:0 auto;
  max-width:780px;
  text-align:left;

}

#demo h1{
}

#area{
  width:99vmin;
  user-select:none;
  margin:auto;
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.abs{
  position:absolute;
  bottom:0;
  left:0;
}

b{
  display:inline-block;
  font-weight:bold;
  font-size:20vw;
  cursor:pointer;
  vertical-align: bottom;
}
b:hover{
  color:#aaa;
}

b.ok{
  color:#afa;
}
b.ng{
  color:#a00;
}
b.result.i{
  color:#0a0;
}

HTML

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

view-source:https://hi0a.com/game/game-machigai-sagashi/

ABOUT

hi0a.com 「ひまあそび」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

仕様変更、API廃止等、実験途中で動かないページもあります。