tenki_mark03_gouu.png	あめ	かさ			
dance_india_group.png	いんどえいが	みゅーじかる	おどり		
fantasy_dracula_woman.png	ゔぁんぱいあ	どらきゅら	きゅうけつき	こうもり	
kandou_movie_eigakan.png	えいが	すくりーん			
halloween_obake_kasou.png	おばけ	ゆうれい	かそう	しろいぬの	
movie_tokusatsu_kaiju.png	かいじゅう	ごじら	とくさつ	はかい	
udezumou_arm.png	きんにく	うでずもう	ふというで	あくしゅ	
car_taxi2.png	くるま	たくしー	のりもの	どらいぶ	うんてん
wedding_syukufuku.png	けっこんしき	はなよめはなむこ	しんろうしんぷ		
cafe_coffee_cup.png	こーひー	えすぷれっそ	かふぇらて		
money_satsutaba.png	さつたば	かね	ひゃくまんえん		
ganka_doctor.png	しりょくけんさ	ひだり	いしゃ	けんこうしんだん	
food_surume.png	するめ	いか	ひもの	つまみ	
seiji_souridaijin_bg3.png	せいじか	こっかいぎじどう	そうりだいじん		
food_sausage.png	そーせーじ	うぃんなー	ちょうづめ		
mark_tenki_hare.png	たいよう	はれ	こうせい	さん	
space04_earth.png	ちきゅう	ほし	わくせい	あーす	
kids_school_mokuiku_tsumiki.png	つみき	きのおもちゃ	しろ		
tonkachi.png	とんかち	はんまー	かなづち	こうぐ	
door_half_open.png	とびら	どあ	いりぐち	でぐち	
obon_nasu_kyuri.png	なす	きゅうり	おぼん		
ninja_syuriken_man.png	にんじゃ	しのび			
nuigurumi_bear.png	ぬいぐるみ	くま	てでぃべあ	はくせい	
kotowaza_neko_koban.png	ねこ	にゃんこ	こばん	のらねこ	
train_shinkansen.png	のりもの	しんかんせん	でんしゃ	れっしゃ	かいそく
sakura_kaika.png	はな	さくら	えだ	かいか	
Japan.png	ひのまる	こっき	にほん	じゃぱん	
shodo_fude.png	ふで	しゅうじ			
animal_tsuchinoko.png	へび	つちのこ			
body_zugaikotsu_skull.png	ほね	ずがいこつ	がいこつ	しかばね	どくろ
sushi_maguro_dukushi_big.png	まぐろ	すし	おおとろ	てっかまき	
drink_milk_glass.png	みるく	ぎゅうにゅう	かるぴす	こっぷ	しろいえき
search_mushimegane.png	むしめがね	けんさく	さーち	ぐーぐる	
eye13_circle1.png	めだま	にじゅうまる			
animal_marmot_mike.png	もるもっと				
syougatsu_hatsuhinode_fujisan.png	やま	はつひので	ふじさん		
yuenchi_merry_go_round.png	ゆうえんち	めりーごーらんど	かいてんもくば	まわるうま	
youkai_kappa.png	ようかい	かっぱ	さごじょう	きゅうり	
music_trumpet.png	らっぱ	とらんぺっと	かんがっき	すいそうがく	
fruit_apple.png	りんご	くだもの	ふるーつ	あっぷる	かじつ
roulette.png	るーれっと	かじの	ぎゃんぶる		
norimono_character1_kikansya.png	れっしゃ	のりもの	きしゃ	じょうききかん	
space_rocket.png	ろけっと	みさいる	うちゅうりょこう		
sweets_karintou.png	わがし	かりんとう	ちょこ	うんこ	
yubiwa_ruby.png	るびー	ゆびわ	りんぐ	ほうせき	
animal_gorilla.png	ごりら	やじゅう	もりのけんじん	るいじんえん	
fashion_shitagi_woman.png	ぱんつ	したぎ	ぶらじゃー		
sports_baseball_man_asia.png	やきゅう	べーすぼーる	ほーむらん	すぽーつ	こうしえん
arrow_color13_ff.png	やじるし	まきもどし	さんかく		
sweets_yakiimo.png	やきいも	いも	さつまいも		
animal_mogura_kouji2.png	もぐら	へるめっと	こうじちゅう		
fashion_shirt1_white.png	しゃつ	わいしゃつ	ふく		
aprilfool_pierot.png	さーかす	ぴえろ	どうけし	じょーかー	
kaisou_wakame.png	わかめ	こんぶ	かいそう	めかぶ	
waraningyou.png	のろい	わらにんぎょう	うしのこくまいり	ごすんくぎ	
camp_tent_maru.png	てんと	のじゅく	きゃんぷ		
computer_jinkou_chinou.png	のうみそ	じんこうちのう	でんのう	えーあい	こんぴゅーた
bug_kabutomushi_osu_black.png	かぶとむし	こんちゅう	むし		
imagawayaki1_anko.png	おおばんやき	いまがわやき	たいこまんじゅう		
dog_doberman.png	いぬ	わんわん	どーべるまん	けいさつけん	
food_nabe_mizutaki.png	なべ	みずたき	やさいなべ	しいたけ	
kotowaza_hato_mamedeppou.png	はと	とり	まめでっぽう		
trex_kokkaku.png	かせき	きょうりゅう	てぃらのさうるす	こっかくひょうほん	
undoukai_baton_relay.png	かけっこ	りれー	うんどうかい	ばとんたっち	ときょうそう
animalface_tanuki.png	たぬき	あらいぐま	はくびしん	おこじょ	いたち
animalface_kitsune.png	きつね	おいなりさん	こんこん		
map_takara_chizu.png	ちず	たからのちず	めじるし	ぼうけん	
mezamashidokei.png	とけい	めざましどけい	はちじ	じかん	たいむましん
animal_gomafu_azarashi.png	ごまふあざらし	おっとせい	あしか	せいうち	とど
animal_usagi_white.png	うさぎ	にんじん			
keiba.png	うま	けいば	じょうば	ひひーん	
ocean_same_hire.png	さめ	しゃち	いるか	せびれ	
omocha_robot.png	ろぼっと	おもちゃ	あんどろいど	めか	ましん
bird_gachou.png	あひる	がちょう	はくちょう	とり	
yamori.png	やもり	いもり	とかげ		
bakudan_dynamite.png	だいなまいと	ばくだん	じげんばくだん		
school_randoseru2_black.png	らんどせる	りゅっく	かばん		
fish_sakana_tai.png	たい	まだい	さかな		
fruit_grape.png	ぶどう	ぐれーぷ	ますかっと	ふるーつ	
color03_yellow_banana.png	ばなな				
fruit_orange2.png	おれんじ	みかん			
enogu_fude.png	えのぐ	あかいろ			
kinoko.png	きのこ	べにてんぐたけ	やまのさち		
character_animal_rakko.png	らっこ				
nuts_almond.png	あーもんど	たね	なっつ		
hatake_tagayasu.png	のうさく	むぎわらぼうし	くわ		
nokogiri.png	のこぎり				
amount_water_glass3.png	のみみず	みず	こっぷ		
heart_blur.png	はーと	しんぞう	こころ		
royal_princess.png	ひめ	おうじょ	おんなのこ	くいーん	
building_house7.png	いえ	うち			
mark_tenki_moon.png	つき	みかづき			
tatemono_kouen.png	あすれちっく	すべりだい	こうえん		
money_chokinbako.png	ぶた	ちょきんばこ			
shingou_led4_red.png	しんごう	あかしんごう	とまれ		
eto_saru_banana.png	さる	ばなな			
eto_remake_hitsuji.png	ひつじ				
eto_remake_inoshishi.png	いのしし	うりぼう			
animal_character_nezumi_cheese.png	ねずみ	ちーず			
niwatori_hiyoko_koushin.png	にわとり	ひよこ			
mark_tenkiu_kaminari.png	かみなり	らくらい	いなづま	でんき	
umi_beach.png	うみ	やしのき	すなはま	なつ	
ocean_kurage.png	くらげ				
ocean_kani.png	かに				
ebi_aka.png	えび				
food_tamago_gohan4.png	こめ	はくまい	ごはん	ちゃわん	
jam01_strawberry.png	いちご	じゃむ	びんづめ	すとろべりー	
music_guitar_lespaul.png	ぎたー	べーす	えれきぎたー		
animal_chara_lion_king.png	らいおん	しし	おうさま	きんぐ	
tanabata_panda.png	ぱんだ	ささ	たなばた		
sleep_top_man.png	べっど	ふとん	すいみん		
school_kyoushitsu_tsukue_hanareru.png	つくえ	きょうしつ	こくばん		
tenki_typhoon.png	うずしお	たいふう			
vegetable_tamanegi.png	たまねぎ	きゅうこん			
vegetable_corn.png	とうもろこし	こーん			
bird_karasu_kowai.png	からす				
food_namahamu.png	なまはむ	べーこん	にく		
sweets_donut.png	どーなつ	わっか	なげわ	りんぐ	
medical_hasami_sentou.png	はさみ				
pen_enpitsu_mark.png	えんぴつ	ぺん			
eto_remake_ushi.png	うし				
animal_deer.png	しか				
eto_remake_tora.png	とら				
food_lettuce.png	れたす				
tomato_red.png	とまと				
food_tofu_kinu.png	とうふ				
sweets_pancake.png	ほっとけーき	ぱんけーき			
fruit_suika_red.png	すいか				
food_ham_egg.png	めだまやき	はむえっぐ	たまご		
fubuki.png	ゆき	ふぶき			
_ajisai.png	あじさい	あめ	つゆ		
cooking_syouyu_tarasu.png	しょうゆ	そーす	ちょうみりょう		
oden.png	ちくわ	こんにゃく	だいこん	おでん	
onigiri_seachicken.png	おにぎり	つなまよ	しゃけ	めんたいこ	にぎりめし
view source

JavaScript

document.title = 'モザイク画像クイズ';

var imageData;
var img = new Image();
var fileName = 'google-logo.jpg';

var labelDot = document.createElement('label');
var labelWhite = document.createElement('label');
labelDot.innerText = 'dot:';
labelWhite.innerText = 'white:';
var inputDot = document.createElement('input');
var inputWhite = document.createElement('input');
var div = document.createElement('div');
inputDot.setAttribute('type','number');
inputDot.setAttribute('value',64);
inputDot.setAttribute('max',64);
inputDot.setAttribute('min',1);
inputWhite.setAttribute('type','number');
inputWhite.setAttribute('value',235);
inputWhite.setAttribute('max',255);
inputWhite.setAttribute('min',128);


let demo = document.getElementById('demo');


var h1 = document.createElement('h1');
h1.innerText = document.title;
demo.appendChild(h1);
var h2 = document.createElement('h2');
h2.innerText = 'この画像はなーんだ?画像はだんだん鮮明になるよ!';
demo.appendChild(h2);


clearCount = 1;
var c = document.createElement('c');
c.innerText = clearCount;
demo.appendChild(c);

labelDot.appendChild(inputDot);
//labelWhite.appendChild(inputWhite);
demo.appendChild(labelDot);
//demo.appendChild(labelWhite);
demo.appendChild(div);

var canvas = document.createElement('canvas');
var canvasM = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
div.appendChild(canvas);
div.appendChild(canvasM);

const seOK = new Audio('/mp3/ok.mp3');
const seMiss = new Audio('/mp3/miss.mp3');

var ul;

var selectWordsOrg = [];
$(function(){
  ul = $('<ul>');
  $('#demo').append(ul);
  $.get('/csv/img-irasutoya.txt', function(data){
    wordsAryOrg = data.split('\n');
    wordsAryOrg.forEach(function(v){
      var ary = v.split("\t");
      selectWordsOrg.push(ary[1]);
    });
    readyStage();
  });

  $(h2).on('dblclick', function(){
    let dot = Number(inputDot.value);
    dot--;
    inputDot.value = dot;
    inputDot.dispatchEvent(new Event('change', { 'bubbles': true }));
  });
});

function setTimer(pace){
  //timer = setInterval(function(){
  timer = setTimeout(function(){
    let dot = Number(inputDot.value);
    dot--;
    inputDot.value = dot;
    inputDot.dispatchEvent(new Event('change', { 'bubbles': true }));
    if(dot < 2){
      clearInterval(timer);
      return;
    }
    if(dot === 20){pace=pace*2;}
    if(dot === 16){pace=pace*2;}
    if(dot === 12){pace=pace*2;}
    if(dot === 8){pace=pace*2;}
    setTimer(pace);
  }, pace);
}

function readyStage(){

  wordsAry = _.shuffle(wordsAryOrg);
  panelAry = [];
  wordEndAry = [];
  imageData = wordsAry.pop();
  var ary = imageData.split("\t");
  var key = ary.shift();
  var answer = ary.shift();
  var dir = '/demo/-js/js-game-shiritori-picture/img/'
  fileName = dir+key;

  let pace = 499;
  let search = location.search.substring(1);
  if(search){
    fileName = '/img/'+search;
    pace = 1999;
    c.innerText = '.';
  }

  img.src = fileName; //
  inputDot.value = 64;
  draw();
  setTimer(pace);

  if(search){return;}

  selectWords = _.shuffle(selectWordsOrg);
  answers = [];
  answers.push(answer);
  for(i=0;i<11;i++){
    answers.push(selectWords[i]);
  }
  ul.empty();
  answers = _.shuffle(answers);
  answers.forEach(function(v){
    var a = $('<a>').text(v);
    ul.append(a);
    a.on('click',function(){
      if(v===answer){
        $(this).addClass('ok');
        seOK.play();
        clearCount++;
      } else {
        $(this).addClass('ng');
        seMiss.play();
        if(clearCount>2){
          clearCount-=2;
        }
      }
      c.innerText = clearCount;
      inputDot.value = 1;
      setTimeout(function(){
        readyStage();
      }, 2999);
    });
  });

}

$('#demo input').on('change', function(){
  draw();
})


function draw() {
  //console.log('draw');
  div.innerHTML = '';
  var canvas = document.createElement('canvas');
  var canvasM = document.createElement('canvas');
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  canvas.id = 'canvas';
  canvas.setAttribute('width',w);
  canvas.setAttribute('height',h);
  let demo = document.getElementById('demo');
  div.appendChild(canvas);
  div.appendChild(canvasM);
  canvasM.style.height = '480px';

  if (!canvas || !canvas.getContext) {
    return false;
  }
  img.src = fileName; //
  img.onload = function onImageLoad() {
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.setAttribute('width',img.width);
    canvas.setAttribute('height',img.height);
    canvasM.setAttribute('width',img.width);
    canvasM.setAttribute('height',img.height);
    var ctx = canvas.getContext('2d');
    var ctxM = canvasM.getContext('2d');

    var rgba = "rgba(255,255,255,1)"
    ctx.fillStyle = rgba;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);


    var dot = parseInt(inputDot.value) || 2;
    //console.log(dot);
    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    convertMosaic(ctx,ctxM, canvas.width, canvas.height, dot);
    //whiteToAlpfa(ctxM, canvasM)
    //ctx.drawImage(imageData, 0, 0);

  }

}

function convertMosaic(ctx,ctxM, width, height, dot) {

  for (y = 0; y < height; y+=dot) {
    for (x = 0; x < width; x+=dot) {
      if (x % width < dot) {
        x -= x % width;
      }
      var i = (y * width + x) * 4;
      var cR = imageData.data[i ];
      var cG = imageData.data[i + 1];
      var cB = imageData.data[i + 2];
      var cA = imageData.data[i + 3];
      
      var data = {
        R:cR,
        G:cG,
        B:cB,
        A:cA,
      };
      cA = cA*1/255;
      var rgba = "rgba("+cR+","+cG+","+cB+","+cA+")"
      //console.log(rgba)
      ctxM.fillStyle = rgba;
      ctxM.fillRect(x, y, x + dot, y + dot);
    }
  }
}

CSS

#code,
#canvas{
  display:none;
}
canvas{
  max-width:100%;
}

label{
  display:none;
}

ul a{
  display:inline-block;
  border:1px solid #000;
  width:240px;
  padding:12px;
  margin:4px;
  box-sizing:border-box;
  cursor:pointer;
}
ul a:hover{
  background-color:#eee;
}
ul a.ok{
  background-color:#afa;
}
ul a.ng{
  background-color:#faa;
}
c{
  position:absolute;
  top:0;
  right:0;
  font-size:64px;
  font-weight:bold;
}

HTML

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

view-source:https://hi0a.com/demo/-js/js-game-quiz-mosaic/

ABOUT

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

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

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

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

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

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

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

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