<div class="wrap">
  <h4 class="tit">鼠標按下蓄力，松開鼠標小球開始運動</h4>
  <h2>分數：</h2>
  <h3>歷史最高：</h3>
  <div class="con"></div>
  <div class="blc1"></div>
</div>

* {
   margin: 0;
   padding: 0;
  }

  .wrap {
   height: 500px;
   position: relative;
   overflow: hidden;
  }

  .con {
   background-color: hotpink;
   /*左邊的沒有背景色，右邊的加了背景色*/
   background-image: radial-gradient(10px at 4px 4px,
     rgba(0, 0, 0, 0),
     rgba(2, 2, 2, 1));
   width: 20px;
   height: 20px;
   border-radius: 50%;
   position: absolute;
   left: 30px;
   bottom: 30px;
   z-index: 2;
  }

  .blc1 {
   box-shadow: 10px 10px 7px #000;
   border-radius: 30%;
   width: 40px;
   height: 40px;
   background-color: midnightblue;
   position: absolute;
   left: 20px;
   bottom: 20px;
  }

  .tit {
   text-align: center;
  }

function randomInt(min, max) { //產生[min,max]范圍內的整數
   return Math.round(Math.random() * (max - min)) + min;
  }

  function randomColor() { //產生隨機的顏色
   var map = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
   var str = '#';
   for (var i = 0; i < 6; i++) {
    var index = randomInt(0, 15);
    str += map[index];
   }
   return str;
  }
  var wrap = document.querySelector('.wrap');
  var con = document.querySelector('.con');
  var oldtime = 0; //記錄鼠標按下的時間
  var timer2 = null; //小球平拋運動定時器
  var timer3 = null; //鼠標按下變形定時器
  var num = 0; //游戲成績
  var mouseD = false; //記錄鼠標是否按下
  var mouseUp = true; //記錄鼠標是否松開
  var h2 = document.querySelector('h2');
  var h3 = document.querySelector('h3');
  var max = localStorage.getItem('max');
  var div = document.createElement('div'); //創建下一個平臺
  h3.innerText = '歷史最高：' + localStorage.getItem('max'); //從瀏覽器數據庫獲取最高分
  div.style.left = 35 + randomInt(30, 60) + 'px'; //初始化平臺距離左邊的值
  var div_sex = randomInt(30, 70); //初始化平臺大小，范圍
  div.style.bottom = 40 - div_sex / 2 + 'px'; //平臺距離底部為小球底部減去平臺
  div.style.height = div_sex + 'px';
  div.style.width = div_sex + 'px';
  div.className = 'blc1'; //添加初始化樣式
  div.style.backgroundColor = randomColor(); //隨機顏色
  wrap.appendChild(div); //存入平臺
  document.onmousedown = function () { //監聽頁面點擊事件
   if (!mouseD) { //如果鼠標按下沒有抬起
    var blc = document.querySelectorAll('.blc1'); //獲取所有平臺
    oldtime = Date.now(); //記錄鼠標按下的時間
    var target = blc[blc.length - 2]; //小球所在的平臺
    var down_c = 10; //平臺最大下沉距離
    var left = target.offsetLeft; //記錄鼠標按下后下沉效果之前平臺的left值
    var bottom = 40 - target.offsetHeight / 2; //記錄鼠標按下后下沉效果之前平臺的bottom值
    var con_l = con.offsetLeft; //記錄鼠標按下后下沉效果之前小球的left值
    var con_b = 30; //記錄鼠標按下后下沉效果之前小球的bottom值
    timer3 = setInterval(() => { //下沉效果定時器
     down_c -= 0.03; //每一次變化0.03px
     if (down_c <= 0) { //最小值為0
      down_c = 0.03;
     }
     target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c +
     'px #000'; //邊框陰影向里縮，實現3D效果
     target.style.left = left + 10 - down_c + 'px';
     target.style.bottom = bottom + -10 + down_c + 'px';
     con.style.left = con_l + 10 - down_c + 'px';
     con.style.bottom = con_b - 10 + down_c + 'px'; //小球和平臺一起向右下角移動，配合陰影達到3D效果
    }, 1);
    mouseD = true; //鼠標已經按下
    mouseUp = false; //鼠標即將松開
   }
  }
  document.onmouseup = function () {
   if (!mouseUp) { //如果沒有觸發mousedown事件不會執行以下代碼
    mouseUp = true; //鎖定事件，小球運動結束前不能執行以下代碼
    clearInterval(timer3); //清除下沉動畫
    var timer4 = null; //上升動畫
    var blc = document.querySelectorAll('.blc1'); //獲取所有平臺
    var target = blc[blc.length - 2]; //同下沉動畫
    var left = target.offsetLeft;
    var down_time = 0;
    var down_c = 0;
    var click_time = Date.now() - oldtime; //鼠標按下的時間
    var bottom = 40 - target.offsetHeight / 2 - (click_time * 0.03 > 10 &#63; 10 : click_time *
    0.03); //原來的bottom-下沉的距離，最大為10
    timer4 = setInterval(() => { //恢復原來的狀態
     down_time++;
     if (down_time > click_time) {
      clearInterval(timer4);
     }
     down_c += 0.03;
     if (down_c >= 10) {
      down_c = 10;
     }
     target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c + 'px #000';
     target.style.left = left - down_c + 'px';
     target.style.bottom = bottom + down_c + 'px';
    }, 1);
    var clicktime = (Date.now() - oldtime) * 1.5; //小球運動時間為鼠標按下的1.5倍，減少蓄力時間
    var time2 = 0; //小球跳一跳計時器
    var y = 30; //小球初始bottom值
    var x = con.offsetLeft; //小球初始left值
    clearTimeout(tout); //清除延時器
    timer2 = setInterval(() => { //小球彈跳計時器
     time2 += 20;
     y = 30 + clicktime / 50 * Math.sin(time2 * Math.PI /
     clicktime); //將總的時間分成180份通過sin(0,180)從0到0的特性完成一個圓滑的拋物線
     con.style.left = x + time2 / 20 + 'px';
     con.style.bottom = y + 'px';
    }, 20);
    var tout = setTimeout(function () { //控制小球運動的時間與鼠標按下的時間*1.5相等，控制小球運動的時間
     clearInterval(timer2); //結束小球運動
     x = con.offsetLeft; //獲取運動結束后小球的left值
     var blc = document.querySelectorAll('.blc1'); //獲取所有的平臺
     if (con.offsetLeft >= wrap.lastElementChild.offsetLeft && con.offsetLeft <= wrap
      .lastElementChild.offsetLeft + wrap.lastElementChild.offsetHeight - 10
      ) { //判斷小球是否位于平臺里面
      num += 10; //每跳一次加10分
      h2.innerText = '分數：' + num; //動態展示分數
      //生成下一個平臺
      var div_sex2 = randomInt(40, 60);
      var newdiv = document.createElement('div');
      newdiv.style.bottom = 40 - div_sex2 / 2 + 'px';
      newdiv.style.height = div_sex2 + 'px';
      newdiv.style.width = div_sex2 + 'px';
      newdiv.style.left = x + randomInt(80, 120) + 'px';
      newdiv.style.backgroundColor = randomColor();
      newdiv.className = 'blc1';
      wrap.appendChild(newdiv);
     } else {
      alert('游戲結束,分數：' + num);
      max = max > num &#63; max : num;
      localStorage.setItem('max', max) //更新最高分
      location.reload(); //刷新當前頁面
     }
     wrap.scrollLeft = wrap.scrollWidth; //控制滾動條位于最右邊
     mouseD = false; //完成一次事件，重新開啟
     mouseUp = true; //
    }, clicktime)
   }
  }