document.title = 'カップシャッフル ボールの入ったカップを当てるゲーム';

var h1= $('<h1>').text(document.title);
$('#demo').append(h1);

var clearCount = 0;
var maxW = window.innerWidth - window.innerWidth/10;

var demo;
var ul;
var ary=[];
var max=0;
var lis=[];
var w=0;
var h=0;
var speed=0;
var shuffleCount = 0;

var shuffleCups = function(){
  const selected = ary.slice().sort(function(){ return Math.random() - 0.5; }).slice(0, 2);
  console.log(selected);
  var left0 = lis[selected[0]].position().left;
  var left1 = lis[selected[1]].position().left;
  lis[selected[0]].animate({left:left1},speed/2);
  lis[selected[1]].animate({left:left0},speed/2);
}

var setStage = function(){
  ul.empty();
  max = clearCount + 3;
  if(max>10){
    max = 10;
  }
  shuffleCount = (clearCount+2)*2;
  var aryOrg = [...Array(max)].map((_, i) => i);
  ary = _.shuffle(aryOrg);
  lis = [];
  w = maxW/max;
  h = w;
  speed = 1000/(clearCount+1);
  var selectCount = 0;
  console.log(ary);
  ary.forEach(function(v, i){
    console.log(v);
    var li = $('<li>').css({height:h,width:w,left:i*w});
    var cup = $('<img>',{src:'cup.png'}).addClass('cup');
    
    li.append(cup);
    ul.append(li);
    if(v===0){
      var ball = $('<img>',{src:'ball.png'}).addClass('ball');
      ball.css({bottom:-h/5});
      li.append(ball);
    }
    lis.push(li);
    cup.on('click', function(){
      selectCount++;
      cup.animate({top:0});
      if(v===0){
        if(selectCount < 2){
          clearCount++;
          h1.text(clearCount);
        }
        setTimeout(function(){
          setStage();
        }, 1999);
      }
    });
  });
  var layer = $('<div>').addClass('layer');
  demo.append(layer)
  layer.one('click', function(){
    gameStart();
    setTimeout(function(){
      layer.remove();
    },speed*shuffleCount+400);
  });
}


var gameStart = function(){
  $('.cup').animate({top:h/2});
  for(let i=0;i<shuffleCount;i++){
    setTimeout(function(){
      shuffleCups();
    }, i*speed+400);
  }
}


$(function(){
  demo = $('#demo');
  ul = $('<ul>');
  demo.append(ul);
  setStage();
});

htbl,body{
  overflow:hidden;
}

h1{
  position:absolute;
  left:0;
  bottom:0;
}

#demo{
  position:relative;
  top:0;
  left:0;
}
#demo ul{
  position:relative;
  left:0;
  top:10vmin;
  width:90%;
  margin:0 auto;
  user-select:none;
}
#demo ul li{
  position:absolute;
  cursor:pointer;
  top:0;
  text-align:center;
}

#demo ul li img{
  position:absolute;
}
.cup{
  z-index:3;
  width:100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor:pointer;
}
.cup:hover{
  transform: translateY(4px);
}

.ball{
  z-index:1;
  width:20%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.layer{
  position:absolute;
  top: 0;
  right: 0;
  z-index:99;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.1);
  cursor:pointer;
}

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

view-source:https://hi0a.com/demo/-js/js-game-cup-shuffle/