小さい順に数字を選ぶゲーム

document.title = '小さい順に数字を選ぶゲーム ';

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

var clearCount  = 0;

const shuffle = ([...array]) => {
  for (let i = array.length - 1; i >= 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

function setAry(max){
  return [...Array(max)].map((_, i) => i);
}



var x = 2;
var y = 2;

$(function(){
  var area = $('#area');
  var setStage = function(){

    var now = 0;
    var max = x * y;
    var ary = setAry(max);
    ary = shuffle(ary);
    console.log(ary);

    $('h1').addClass('abs');
    if(clearCount>0){
      $('h1').text(clearCount+1);
    }

    getHint(clearCount);

    area.empty();

    var tr = $('<tr>');
    ary.forEach(function(v,i){
      var td = $('<td>').css({width:(100/x)+'%'});
      var m = 0;
      var b = $('<b>').text((v+1));
      //var y = Math.pow(n, 0.5)+0.5;
      b.css({fontSize:(100/(y+1))+ 'vmin'});//,width:(100/y*3)+'%'
      //if(v===1){b.addClass('result');}
      if(i%x === 0){
        tr = $('<tr>').css({height:(100/y)+'vmin',lineHeight:(100/y)+'vmin'});
        area.append(tr);
      }
      tr.append(td)
      b.on('click', function(){
        if(v===now){
          now++;
          $(this).addClass('ok');
          $('.result').addClass('i');
          if(v === max-1){
            clearCount++;
            if(clearCount < 20){
              if(clearCount%2===0){y++;}
              if(clearCount%2===1){x++;}
            }
            setTimeout(function(){setStage()},999);
          }
        } else {
          $(this).addClass('ng');
          if(clearCount>3){clearCount--;}
          $('.result').addClass('i');
          setTimeout(function(){setStage()},999);
        }
      });
      td.append(b);
    });
  }
  setStage();

});

html,body{
  overflow:hidden;
}

@font-face {
    font-family: 'LeagueGothic';
    src: url(/fonts/LeagueGothic-Regular.ttf);
}

#demo{

  font-family: LeagueGothic, 'Meiryo';
}

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

}

#demo h1{
}

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

td{
  border:1px solid #999;
  text-align:center;
}

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

td{
  text-align:center;
}
b{
  display:block;
  width:100%;
  height:100%;
  font-weight:bold;
  font-size:20vw;
  cursor:pointer;
  text-align:center;
  vertical-align: middle;
}
b:hover{
  color:#aaa;
}

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

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

view-source:https://hi0a.com/demo/-js/js-game-number-step/