document.title = 'お金 ぜんぶでいくら？';
//硬貨と紙幣の合計を数えるゲーム

var clearCount = 0;
var r = Math.min(window.innerWidth,window.innerHeight)/12;
console.log(r);
var checkCollision = function(x1,y1,x2,y2){
  let a = x1-x2;
  let b = y1-y2;
  let c = (a**2+b**2)**(1/2);
  return r < c;
}
let yenAry = [
1,
5,
10,
50,
100,
500,
1000,
5000,
10000,
];

$(function(){

  var xyAry = [];

  var demo = $('#demo');
  var hh = demo.height();
  var ww = demo.width();
  var total = 0;

  var setStage = function(){
    demo.empty();
    total = 0;
    var max = 19;
    if(clearCount<2){
      max = 4;
    }else if(clearCount<4){
      max = 5;
    }else if(clearCount<5){
      max = 6;
    }else if(clearCount<6){
      max = 9;
    }else if(clearCount<8){
      max = 11;
    }else if(clearCount<12){
      max = 13;
    }else if(clearCount<14){
      max = 16;
    }else if(clearCount<19){
      max = 17;
    }

    let yenAryTmp = _.clone(yenAry);
    if(clearCount<8){
      for(ii=0;ii<(8-clearCount);ii++){
        yenAryTmp.pop();
      }
    }
    yenAryTmp.forEach(function(v,i){
      var n = Math.floor(Math.random()*max);
      if(i<3 && n === 0){n=Math.floor(Math.random()*max)+1;}
      for(var jj=0;jj<n;jj++){
        let j = jj;
        let x = Math.floor(Math.random()*ww*5/8)+ww*1/8;
        let y = Math.floor(Math.random()*hh*5/8)+hh*1/8;
        let z = 20-i;
        let src = 'c'+v+'.png';
        let w = r*4;
        let d = Math.floor(Math.random()*240)-120;
        let rot = 'rotate('+d+'deg)';
        console.log(rot);
        let isCol = false
        xyAry.forEach(function(vv){
          if(checkCollision(x,y,vv[0],vv[1])){isCol=true;}
        });
        if(isCol){return;}
        if(v<1000){w=r*2;}
        xyAry.push([x.y]);
        let img = $('<img>',{src:src,i:i,j:j}).css({top:y,left:x,zIndex:z,width:w,transform:rot});
        if(i<6){img.addClass('coin');} 
        img.on('dblclick', function(){
          if($(this).hasClass('set')){
            $(this).css({top:r*i*1.6,left:(j*30)});
          }
          $(this).css({transform:'rotate(0)'}).addClass('set');
        });

        img[0].onpointermove = function(event){
          if(event.buttons){
              this.style.left     = this.offsetLeft + event.movementX + 'px'
              this.style.top      = this.offsetTop  + event.movementY + 'px'
              this.style.position = 'absolute'
              this.draggable      = false
              this.setPointerCapture(event.pointerId)
          }
        }

        demo.append(img);
        console.log(v);
        total+=v;
      }
    });

    var input = $('<input>',{type:'number',pattern:'\d*',min:0,placeholder:document.title});
    demo.append(input);
    input.trigger('focus');
    input.on('click', function(){
      input.trigger('change');
    });
    input.on('dblclick', function(){
      $('#demo img').trigger('dblclick');
    });
    input.on('change', function(){
      var vvv = $(this).val();
      vvv =Number(vvv);
      if(total === vvv){
        $(this).addClass('ok');
        setTimeout(function(){
          clearCount++;
          setStage();
        },999);
      } else if(vvv>1) {
        $(this).addClass('ng');
      }
    });
    var em = $('<em>').text(clearCount);
    demo.append(em);
    console.log(total);
  }
  setStage();

  
});

//https://chuunikingdom.booth.pm/items/5275598

html,body{
  overflow:hidden;
}

#demo{
  position:relative;
  top:0;
  left:0;
}
#demo img{
  position:absolute;
  top:0;
  left:0;
  transform-origin: center;
  cursor:pointer;
  user-select:none;
}
#demo img.coin{
  border-radius:50%;
}

#demo em{
  position:absolute;
  top:0;
  right:0;
  font-size:64px;
  font-weight:bold;
}
#demo input{
  position:absolute;
  bottom:1vmin;
  left:0;
  height:8vmin;
  width:calc(100vw - 20px);
  opacity:0.6;
  z-index:99;
  font-size:32px;
  border:8px solid #000;
}

#demo input.ng{
  border:8px solid #a00;
}
#demo input.ok{
  border:8px solid #0a0;
}

#demo input:hover{
  opacity:1;
}

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

view-source:https://hi0a.com/demo/-js/js-money-change/