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);
    }
  }
}

#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;
}

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

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