简易版本“叠叠乐”小游戏

我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

前言

不记得是在电玩厅还是手机上玩过的叠叠乐小游戏了，规则非常简单，就是通过点击一直在循环变大变小的动物，使其在下方堆叠，上层比下层小为成功，上层比下层大为失败。

使用经典的 HTML + CSS + JS实现简易版本“叠叠乐”小游戏。

👉👉 在线试玩

👉👉 码上掘金 code.juejin.cn/pen/7090165…

游戏截图

初始化布局（绝对定位）

上下两部分，上面为动画区域和点击操作区域。上面直接采用了图片，通过控制其宽度实现缩放效果。

• HTML部分

  <p>点击乌龟，叠加乌龟在上层，上层比下层小为成功，上层比下层大为失败</p>
  <div class="mainContent">
    <div class="topContent">
      <img class="animationBox" src="./wugui.jpg" alt="乌龟" srcset="./wugui.jpg" />
    </div>
    <div class="bottomContent">
      
    </div>
  </div>

• CSS 部分

p {
  text-align: center;
}
.mainContent {
  min-width: 720px;
  height: calc(100vh - 80px);
  margin: 0 auto;
  border: 1px solid #ccc;
  position: relative;
}

.topContent {
  position: relative;
  height: 20%;
}
.animationBox {
  position: absolute;
  top: 10px;
  display: none;
  height: 50px;
  /* background-image: url(./wugui.jpg); */
  /* background-size: 100% 100%; */
  cursor: pointer;
}

.bottomContent {
  position: relative;
  height: 80%;
}
.chooseBox {
  position: absolute;
  height: 50px;
  /* background-image: url(./wugui.jpg); */
  /* background-size: 100% 100%; */
}

动效

动效使用的JS，定时器setInterval实现，因为点击时候需要记录点击操作时的大小和位置，所以不能用CSS动效。缩放设置最大值，定时器里判断是否超出最大值，超出则重置为初始值，重新开始动效，实现循环效果。

通过控制定时器事件大小，和缩放步长， 可以控制动效速度。

选中后展示区域

点击选中后，根据点击时动效图片的大小和位置，生成新的图片放置在选中后展示区域。

判断游戏结果

每次点击时判断本次选择的大小是否比前一个大，如果小于前一个，则提示太大了，游戏结束；如果多次都正确，由于高度有限，设置了最大数量，达到最大数量则游戏胜利并结束。

游戏结果提示

采用了浏览器自带的 Window.confirm() 进行弹窗提示结果，自带两个按钮，点击确认时候，confirm() 返回true，否则为false，可以进行用户选择后的不同处理。

const time = 200;
  const mainWidth = 720;
  const initWidth = 100;
  const initHeight = 50;
  const maxWidth = 500;
  let newWidth = initWidth;
  const initLeft = (mainWidth - newWidth) / 2;
  let newLeft = initLeft;
  let chooseBox = [];

  const mainContent = document.querySelector('.mainContent');
  const animationBox = document.querySelector('.animationBox');
  const bottomContent = document.querySelector('.bottomContent');

  mainContent.style.width = `${mainWidth}px`;
  animationBox.style.display = 'block';
  animationBox.style.left =  `${newLeft}px`;

  const animationTimer = setInterval(() => {
    newWidth +=  newWidth * 0.1;
    if (newWidth > maxWidth) {
      newWidth = initWidth;
    }
    animationBox.style.width = `${newWidth}px`;
    newLeft = (mainWidth - newWidth) / 2;
    animationBox.style.left =  `${newLeft}px`;
  }, time);

  animationBox.addEventListener('click', () => {
    if (newWidth > chooseBox[chooseBox.length - 1]) {
      clearInterval(animationTimer);
      const msg = 'Oops! It\'s too big, play again?';
      if (confirm(msg) === true) {
        window.location.reload();
      }
    } else if (chooseBox.length > 10) {
      clearInterval(animationTimer);
      const msg = 'Wow, you\'re amazing! play again?';
      if (confirm(msg) === true) {
        window.location.reload();
      }
    } else {
      const chooses = bottomContent.innerHTML;
      const chooseDivBottom = (chooseBox.length + 1) * initHeight;
      bottomContent.innerHTML = `<img class="chooseBox" src="./wugui.jpg" alt="乌龟" srcset="./wugui.jpg" style="width: ${newWidth}px; bottom: ${chooseDivBottom}px; left: ${newLeft}px;" />` + chooses;
      // bottomContent.innerHTML = `<div class="chooseBox" style="width: ${newWidth}px; bottom: ${chooseDivBottom}px; left: ${newLeft}px;"></div>` + chooses;
      chooseBox.push(newWidth);
    }
  });

总结

这个简易版本比较简单，还可以从下面角度进行完善和优化。

• 缩放控制宽高；
• 选中后通过动效落下；
• 展示大于高度时将整体进行缩小，从而可以继续游戏；

后面有时间再修改下。