羊le个羊小游戏简单源码开源思路分析

羊了个羊源码分享

咸蛋不会翻身

3049人浏览 · 2022-09-25 15:49:17

咸蛋不会翻身 · 2022-09-25 15:49:17

被最近很火的小游戏吸引了，去玩了两把发现那个开发者老坏了，全是随机的

仔细思考了一下，发现仿造一个并不难，就着手开始敲代码，下面是成果，分享给大家

对于这个游戏呢，其实就是简单的元素块移动，然后判断消除

这个是成品效果图

我们通过js 开局创建3*x*n个块其中x就是我们每个不同样式的块，3呢就是保证三三消除后到最后块可以全部消除，而样式则用的是阿里巴巴的iconfont

//批量创建brand
function piliangchuanjian() {
  var obj = {};
  obj.tops = [0, 60, 120, 180, 240]; //brand可能出现的top
  obj.lefts = [0, 60, 120, 180, 240]; //brand可能出现的left
  obj.colors = [
    "#icon-kafei",
    "#icon-shutiao",
    "#icon-xuegao",
    "#icon-nailao",
    "#icon-tiantong",
    "#icon-hebaodan",
  ];
  obj.count = 3 * 10;
  var arr = [];

  for (var j = 0; j < obj.count; j++) {
    for (var i = 0; i < obj.colors.length; i++) {
      console.log(obj.colors[i]);
      var newObj = {};
      newObj.color = obj.colors[i];
      newObj.top =
        obj.tops[randomRangeNumber(0, obj.tops.length - 1)] / 3.75 + "vw";
      newObj.left =
        obj.lefts[randomRangeNumber(0, obj.lefts.length - 1)] / 3.75 + "vw";

      arr.push(newObj);
    }
  }
  for (var i = 0; i < arr.length; i++) {
    foundBrand(fence, arr[i]);
  }

  sessionStorage.setItem("fence", fence.innerHTML);
  sessionStorage.setItem("ul", ul.innerHTML);
}
// 创建一个brand 传入父亲元素
function foundBrand(parent, newObj) {
  var obj = {};
  obj.div = document.createElement("div"); //创建一个div
  obj.div.className = "brand"; //给div的class赋值成brand

  obj.div.style.top = newObj.top; //取一个随机范围的top
  obj.div.style.left = newObj.left; //取一个随机范围的left
  obj.random = newObj.color;
  obj.div.setAttribute("data-random", obj.random);
  obj.div.innerHTML =
    '<svg class="icon" aria-hidden="true"><use id="icon" xlink:href="' +
    obj.random +
    '"></use></svg>';
  parent.appendChild(obj.div);
}
//取随机范围数字
function randomRangeNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function winOrLose(flag) {
  var big = Lose.querySelector(".big");
  var countn = Lose.querySelector("h2");
  countn = countn.querySelector("span");
  sessionStorage.setItem("num", Number(sessionStorage.getItem("num")) + 1);
  if (flag) {
    big.innerHTML = "<span>你过关啦！</span>";
    countn.innerHTML = Number(sessionStorage.getItem("num"));
  } else {
    big.innerHTML = "<span>槽位已满</span>";
    countn.innerHTML = Number(sessionStorage.getItem("num"));
  }
  Lose.style.display = "block";
}

开始我们给栅栏也就是中间的区域设置一个点击响应函数

当我们点击小块的时候通过冒泡机制会响应到中间区域的点击函数

这时候我们利用 event.target 可以判断是否是小块点击的如果是的话我们就开始运行小块的移动动画，我获得小块的offsetTop offsetHeight 以及中间区域的 offsetHeight 和 top区域的offsetHeight 后通过计算公式得到小块的向下的移动距离，然后移动到了收集槽位以后，给槽位的li设置成小块的样式在遍历li的数组判断是否三个了是的话就消除，然后重新给li设置样式从而到达三个消除的状态

//给中间包围圈注册一个点击事件，然后通过冒泡机制将点击事件传递到每个小牌上
fence.addEventListener("click", function (e) {
  console.log(e.target.id);
  if (e.target.id === "icon") {
    //判断是否是brand点击的自己 是的话 就执行
    console.log("brand点我了 颜色是" + e.target.style.backgroundColor);
    //先保存操作前状态 方便撤销
    sessionStorage.setItem("fence", fence.innerHTML);
    sessionStorage.setItem("ul", ul.innerHTML);
    brandMove(e.target.parentNode.parentNode, brandRemove);
  }
});

//brand移动函数
function brandMove(brand, callback) {
  var width_left = (div_top.offsetWidth - fence.offsetWidth) / 2;
  var Height_top = (div_top.offsetHeight - fence.offsetHeight) / 2;
  var distance = div_top.offsetHeight - brand.offsetTop - Height_top;
  brand.style.zIndex = "999";

  console.log("左边框", width_left);
  console.log("上边框", Height_top);
  clearInterval(brand.timer);
  brand.timer = setInterval(function () {
    var distance_now = div_top.offsetHeight - brand.offsetTop - Height_top;
    if (distance_now <= 0) {
      callback(fence, brand);
      clearInterval(brand.timer);
    }
    brand.style.top = brand.offsetTop + 4 + "px";
  }, 1);
}

function brandRemove(fence, brand) {
  var index = -1;
  for (var i = 0; i < lis.length; i++) {
    if (
      lis[i].dataset.flag == undefined ||
      lis[i].dataset.flag == "undefined"
    ) {
      index = i;
      break;
    }
  }
  if (index != -1) {
    lis[index].innerHTML = brand.innerHTML;
    // lis[index].style.border = "1px solid black";
    lis[index].setAttribute("data-flag", brand.dataset.random);

    //整理收集区当前所有种类的数量
    for (var i = 0, obj = {}; i < lis.length; i++) {
      if (lis[i].dataset.flag !== undefined) {
        var xxx = 0;
        for (key in obj) {
          if (key === lis[i].dataset.flag) {
            xxx = 1;
            break;
          }
        }
        if (xxx === 0) {
          obj[lis[i].dataset.flag] = 1;
        } else {
          obj[lis[i].dataset.flag]++;
        }
      }
    }

    //将收集区大于三个消除
    for (key in obj) {
      if (obj[key] >= 3) {
        delete obj[key];
        console.log("消除");
      }
    }
    console.log(obj);

    //先收集区的样式全部归零
    for (var i = 0; i < lis.length; i++) {
      lis[i].dataset.flag = undefined;
      lis[i].innerHTML = "";
    }

    //再将消除三个以上剩下的赋值给收集区
    var j = 0;
    for (key in obj) {
      for (var i = 0; i < obj[key]; i++) {
        lis[j].dataset.flag = key;
        lis[j].innerHTML =
          '<svg class="icon" aria-hidden="true"><use id="icon" xlink:href="' +
          key +
          '"></use></svg>';
        // lis[j].style.border = "1px solid black";
        j++;
      }
    }

    //把没有赋值的 继续清空
    for (var i = 0; i < lis.length; i++) {
      if (
        lis[i].dataset.flag == "undefined" ||
        lis[i].dataset.flag == undefined
      ) {
        lis[i].innerHTML = "";
      }
    }
    fence.removeChild(brand);

    var index = -1;
    for (var i = 0; i < lis.length; i++) {
      if (
        lis[i].dataset.flag == undefined ||
        lis[i].dataset.flag == "undefined"
      ) {
        index = i;
        break;
      }
    }

    if (index == -1) {
      winOrLose(false);
      return;
    }

    var brands = fence.querySelectorAll(".brand");
    if (index == 0 && brands.length <= 0) {
      winOrLose(true);
    }
  } else {
    winOrLose(false);
    return;
  }
}

刷新道具：就是我们获取中间区域里面的子元素，然后通过遍历的方式修改他们的left和top的值以及z-index的值从而可以达到打乱子元素的效果

//打乱brand
function daluanBrand() {
  var obj = {};
  obj.tops = [0, 60, 120, 180, 240, 300]; //brand可能出现的top
  obj.lefts = [0, 60, 120, 180, 240]; //brand可能出现的left
  var brands = document.querySelectorAll(".brand");

  for (var i = 0; i < brands.length; i++) {
    brands[i].style.top =
      obj.tops[randomRangeNumber(0, obj.tops.length - 1)] / 3.75 + "vw";
    brands[i].style.left =
      obj.lefts[randomRangeNumber(0, obj.lefts.length - 1)] / 3.75 + "vw";
    brands[i].style.zIndex = randomRangeNumber(1, 899);
  }
}

撤回道具：我们每次点击子元素的时候都给中间区域和收集区做一个本地临时存储，当我们点击撤回道具的时候我们就将中间区域和收集区重新赋值从而达到一个撤回的效果

chehui.addEventListener("click", function () {
  console.log("撤回");
  if (
    chehui_count.firstChild.innerHTML > 0 &&
    chehui_count.firstChild.innerHTML !== "＋"
  ) {
    fence.innerHTML = sessionStorage.getItem("fence");
    ul.innerHTML = sessionStorage.getItem("ul");
    lis = document.querySelectorAll("li");
    chehui_count.firstChild.innerHTML--;
    if (chehui_count.firstChild.innerHTML == "0") {
      chehui_count.firstChild.innerHTML = "＋";
    }
  } else {
    info.style.display = "block";
    info_title.innerHTML = "撤回道具";
    info_yuan.innerHTML = this.firstElementChild.outerHTML;
    info_h2.innerHTML = "撤回上一次砖块并返回原位";
  }
});

移出道具：这个就更简单了，我们可以倒序遍历li数组然后取最后三个记录下样式，然后消除，再重新生成到我们的中间区域即可

//移出三个手牌，放回到栅栏里面
function yichuBrand() {
  var arr = [];
  for (var i = lis.length - 1; i >= 0; i--) {
    if (
      lis[i].dataset.flag != "undefined" &&
      lis[i].dataset.flag != undefined
    ) {
      var obj1 = {};
      obj1.innerHTML = lis[i].innerHTML;
      obj1.flag = lis[i].dataset.flag;
      arr.push(obj1);
      lis[i].innerHTML = "";
      lis[i].setAttribute("data-flag", "undefined");
      if (arr.length >= 3) {
        break;
      }
    }
  }

其实我做的只是简单版本，如果想要实现一模一样还需要改变小块的生成模式

比如

通过层层嵌套，达到一种我们能看得到下面但是点不到下面，只能清除上方以后再点击下方的效果，这点就希望你们自己拿到源码以后后续开发了。

感谢大家的支持，如果这篇文章对您有帮助，希望能给个赞，谢谢大家

下面是完整的源码，

html代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./lib/font/iconfont.js"></script>
    <link rel="stylesheet" href="./lib/font/iconfont.css" />
    <link rel="stylesheet" href="./css/demo.css" />

    <style></style>
    <title>仿造羊了个羊</title>
  </head>
  <body>
    <div class="cao"></div>
    <div class="content">
      <!-- 卡牌区域 -->
      <div class="top">
        <!-- 中间包围圈 -->
        <div class="fence"></div>
      </div>
      <!-- 收集区 -->
      <div class="center">
        <ul>
          <!-- 最多七个收集格子 -->
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!-- 道具区 -->
      <div class="bottom">
        <!-- 道具1 -->
        <div class="prop" id="daluan">
          <span class="iconfont icon-wangfandijia"></span>
          <div class="count"><span>＋</span></div>
        </div>
        <!-- 道具2 -->
        <div class="prop" id="chehui">
          <span class="iconfont icon-shuaxin"></span>
          <div class="count"><span>＋</span></div>
        </div>
        <!-- 道具3 -->
        <div class="prop" id="yichu">
          <span class="iconfont icon-pailie"></span>
          <div class="count"><span>＋</span></div>
        </div>
      </div>
    </div>
    <div class="info">
      <div class="box">
        <div class="box1">
          <div class="yuan">
            <span class="iconfont icon-wangfandijia"></span>
          </div>
          <h2>随机打乱未使用的所有砖块</h2>
          <p>（视频广告时间不计入通关用时）</p>
          <div id="action"><span>获得</span></div>
          <div id="noxiexie"><span>不，谢谢</span></div>
        </div>
      </div>
      <div class="title1"></div>
      <div class="title"><span id="title">洗牌道具</span></div>
      <div class="x1"></div>
      <div class="x"><span class="iconfont icon-close"></span></div>
    </div>
    <div class="Lose">
      <!--输了  -->
      <p>合理安排时间，注意劳逸结合哦</p>
      <div class="big"><span>槽位已满</span></div>
      <h2>今日已挑战<span>1</span>次</h2>
      <div class="xiaocao">
        <span>不够！还不够！我还可以再肝100回合</span>
      </div>
      <h3>您所在的地区依旧是第<span>1</span>名</h3>
      <div class="reset" id="reChallenge">
        <span>重新挑战</span>
      </div>
    </div>

    <video
      src="https://rz01-sycdn.kuwo.cn/897aff814b75b88327c175be96c060af/632ff409/resource/n3/78/31/3680212499.mp3"
      controls
      autoplay
      muted
    ></video>
  </body>
  <script src="./js/demo.js"></script>
</html>

css代码

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  box-sizing: border-box;
}
.icon {
  width: 13.33333333vw;
  height: 13.33333333vw;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
body {
  background-color: #c2fd89;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 93.33333333vw;
  height: 165.33333333vw;
}
.content .top {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  width: 93.33333333vw;
  height: 106.66666667vw;
}
.content .top .fence {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 96vw;
}
.content .top .fence .brand {
  position: absolute;
  top: 0;
  left: 0;
  width: 13.33333333vw;
  height: 13.33333333vw;
  border-radius: 1.33333333vw;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.content .center {
  position: absolute;
  top: 112vw;
  left: 0;
  width: 93.33333333vw;
  height: 16vw;
  border-radius: 1.33333333vw;
  border: 0.26666667vw solid black;
  background-color: #c58231;
}
.content .center ul {
  display: flex;
  justify-content: space-between;
  padding: 2.66666667vw;
  width: 100%;
  height: 100%;
}
.content .center ul li {
  width: 10.66666667vw;
  height: 10.66666667vw;
  border-radius: 1.33333333vw;
}
.content .center ul li .icon {
  width: 10.66666667vw;
  height: 10.66666667vw;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.content .bottom {
  position: absolute;
  top: 133.33333333vw;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 93.33333333vw;
  height: 24vw;
}
.content .bottom .prop {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18.66666667vw;
  height: 18.66666667vw;
  border-radius: 2.66666667vw;
  background-color: #23a3fe;
  border: 0.26666667vw solid black;
}
.content .bottom .prop .iconfont {
  font-size: 10.66666667vw;
  font-weight: 900;
  color: #fdb115;
}
.content .bottom .prop .count {
  position: absolute;
  top: -2.66666667vw;
  right: -2.66666667vw;
  width: 8vw;
  height: 8vw;
  background-color: black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .bottom .prop .count span {
  text-align: center;
  font-size: 4.26666667vw;
  line-height: 4.26666667vw;
  font-weight: 900;
  color: #fff;
}
.info {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.info .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 53.33333333vw;
  height: 93.33333333vw;
  background-color: #fff;
  border-radius: 2.66666667vw;
  border: 1.33333333vw solid black;
}
.info .box .box1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 49.33333333vw;
  height: 89.33333333vw;
  background-color: #fff;
  border-radius: 1.33333333vw;
  border: 0.53333333vw solid grey;
  text-align: center;
}
.info .box .box1 .yuan {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26.66666667vw;
  height: 26.66666667vw;
  border-radius: 50%;
  background-color: black;
  margin: 0 auto;
  margin-top: 10.66666667vw;
}
.info .box .box1 .yuan .iconfont {
  font-size: 18.66666667vw;
  font-weight: 900;
  color: #fdb115;
}
.info .box .box1 h2 {
  margin-top: 5.33333333vw;
  font-size: 3.73333333vw;
  line-height: 3.73333333vw;
}
.info .box .box1 p {
  margin-top: 5.33333333vw;
  font-size: 2.66666667vw;
  line-height: 2.66666667vw;
  font-weight: 700;
}
.info .box .box1 div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 4vw;
  width: 40vw;
  height: 10.66666667vw;
  border: 0.53333333vw solid black;
  border-radius: 1.33333333vw;
}
.info .box .box1 div span {
  font-weight: 900;
  line-height: 4.26666667vw;
  font-size: 4.26666667vw;
}
.info .title {
  position: absolute;
  top: 37.33333333vw;
  left: 36vw;
  width: 26.66666667vw;
  height: 10.66666667vw;
  background-color: black;
  color: #eee22f;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info .title span {
  font-size: 4.26666667vw;
  line-height: 4.26666667vw;
}
.info .title1 {
  position: absolute;
  top: 38.4vw;
  left: 36vw;
  width: 26.66666667vw;
  height: 10.66666667vw;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.info .x1 {
  position: absolute;
  top: 39.46666667vw;
  right: 20vw;
  width: 9.33333333vw;
  height: 9.33333333vw;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}
.info .x {
  position: absolute;
  top: 38.66666667vw;
  right: 20vw;
  width: 9.33333333vw;
  height: 9.33333333vw;
  border-radius: 50%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info .x .iconfont {
  line-height: 6.13333333vw;
  font-size: 6.13333333vw;
  color: #fff;
}
.cao {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 1px;
  height: 1px;
  background-color: transparent;
}
.Lose {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
}
.Lose p {
  margin: 0 auto;
  margin-top: 13.33333333vw;
  width: 53.33333333vw;
  height: 5.33333333vw;
  color: #fff;
  font-size: 3.2vw;
  text-align: center;
}
.Lose .big {
  margin: 0 auto;
  margin-top: 5.33333333vw;
  width: 66.66666667vw;
  height: 26.66666667vw;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2.66666667vw;
}
.Lose .big span {
  font-size: 12vw;
  font-weight: 900;
  line-height: 12vw;
  color: red;
}
.Lose h2 {
  margin: 0 auto;
  text-align: center;
  width: 26.66666667vw;
  height: 5.33333333vw;
  font-size: 2.66666667vw;
  font-weight: 400;
  line-height: 5.33333333vw;
  background-color: black;
  color: #fff;
  border-radius: 0 0 2.66666667vw 2.66666667vw;
}
.Lose .xiaocao {
  margin: 0 auto;
  margin-top: 5.33333333vw;
  width: 32vw;
  height: 16vw;
  padding: 2.66666667vw;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10.66666667vw 8vw 8vw 10.66666667vw;
}
.Lose .xiaocao span {
  font-size: 2.66666667vw;
  font-weight: 400;
  line-height: 4vw;
}
.Lose h3 {
  margin: 0 auto;
  margin-top: 34.66666667vw;
  text-align: center;
  width: 37.33333333vw;
  height: 5.33333333vw;
  font-size: 2.66666667vw;
  font-weight: 400;
  line-height: 5.33333333vw;
  background-color: black;
  color: #fff;
  border-radius: 1.33333333vw;
}
.Lose .reset {
  margin: 0 auto;
  margin-top: 10.66666667vw;
  width: 32vw;
  height: 10.66666667vw;
  background-color: #fff;
  border-radius: 1.33333333vw;
  border: 0.8vw solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Lose .reset span {
  font-size: 4.26666667vw;
  font-weight: 900;
  line-height: 4.26666667vw;
}
video {
  visibility: hidden;
}

js代码

console.log("开始了");

var fence = document.querySelector(".fence"); //获取中间包围圈的元素对象
var ul = document.querySelector("ul");
var lis = document.querySelectorAll("li");
var div_top = document.querySelector(".top");
var div_center = document.querySelector(".center");
var x = document.querySelector(".x");
var noxiexie = document.querySelector("#noxiexie");

var daluan = document.querySelector("#daluan");
var chehui = document.querySelector("#chehui");
var yichu = document.querySelector("#yichu");
var daluan_count = daluan.querySelector(".count");
var chehui_count = chehui.querySelector(".count");
var yichu_count = yichu.querySelector(".count");

var info = document.querySelector(".info");
var info_title = info.querySelector("#title");
var info_yuan = info.querySelector(".yuan");
var info_h2 = info.querySelector("h2");
var info_action = info.querySelector("#action");
var Lose = document.querySelector(".Lose");
var reChallenge = document.querySelector("#reChallenge");
var video = document.querySelector("video");

//重新挑战
reChallenge.addEventListener("click", function () {
  console.log("重新开始");
  window.location.reload();
});

daluan.addEventListener("click", function () {
  //   console.log(this.firstElementChild.outerHTML);
  if (
    daluan_count.firstChild.innerHTML > 0 &&
    daluan_count.firstChild.innerHTML !== "＋"
  ) {
    daluanBrand();
    daluan_count.firstChild.innerHTML--;
    if (daluan_count.firstChild.innerHTML == "0") {
      daluan_count.firstChild.innerHTML = "＋";
    }
  } else {
    info.style.display = "block";
    info_title.innerHTML = "洗牌道具";
    info_yuan.innerHTML = this.firstElementChild.outerHTML;
    info_h2.innerHTML = "随机打乱未使用的所有砖块";
  }
});

chehui.addEventListener("click", function () {
  console.log("撤回");
  if (
    chehui_count.firstChild.innerHTML > 0 &&
    chehui_count.firstChild.innerHTML !== "＋"
  ) {
    fence.innerHTML = sessionStorage.getItem("fence");
    ul.innerHTML = sessionStorage.getItem("ul");
    lis = document.querySelectorAll("li");
    chehui_count.firstChild.innerHTML--;
    if (chehui_count.firstChild.innerHTML == "0") {
      chehui_count.firstChild.innerHTML = "＋";
    }
  } else {
    info.style.display = "block";
    info_title.innerHTML = "撤回道具";
    info_yuan.innerHTML = this.firstElementChild.outerHTML;
    info_h2.innerHTML = "撤回上一次砖块并返回原位";
  }
});

yichu.addEventListener("click", function () {
  if (
    yichu_count.firstChild.innerHTML > 0 &&
    yichu_count.firstChild.innerHTML !== "＋"
  ) {
    yichuBrand();
    yichu_count.firstChild.innerHTML--;
    if (yichu_count.firstChild.innerHTML == "0") {
      yichu_count.firstChild.innerHTML = "＋";
    }
  } else {
    info.style.display = "block";
    info_title.innerHTML = "移出道具";
    info_yuan.innerHTML = this.firstElementChild.outerHTML;
    info_h2.innerHTML = "移出三个砖块并堆放到旁边";
  }
});

x.addEventListener("click", function () {
  this.parentNode.style.display = "none";
});
noxiexie.addEventListener("click", function () {
  info.style.display = "none";
});

//给中间包围圈注册一个点击事件，然后通过冒泡机制将点击事件传递到每个小牌上
fence.addEventListener("click", function (e) {
  if (video.muted != false) {
    video.play();
    video.muted = false;
    console.log("开始唱歌");
  }

  console.log(e.target.id);
  if (e.target.id === "icon") {
    //判断是否是brand点击的自己 是的话 就执行
    console.log("brand点我了 颜色是" + e.target.style.backgroundColor);
    //先保存操作前状态 方便撤销
    sessionStorage.setItem("fence", fence.innerHTML);
    sessionStorage.setItem("ul", ul.innerHTML);
    brandMove(e.target.parentNode.parentNode, brandRemove);
  }
});
info_action.addEventListener("click", function () {
  console.log(info_title.innerHTML);
  if (info_title.innerHTML === "撤回道具") {
    if (chehui_count.firstChild.innerHTML == "＋") {
      chehui_count.firstChild.innerHTML = 0;
    }
    chehui_count.firstChild.innerHTML++;
  } else if (info_title.innerHTML === "洗牌道具") {
    if (daluan_count.firstChild.innerHTML == "＋") {
      daluan_count.firstChild.innerHTML = 0;
    }
    daluan_count.firstChild.innerHTML++;
  } else if (info_title.innerHTML === "移出道具") {
    if (yichu_count.firstChild.innerHTML == "＋") {
      yichu_count.firstChild.innerHTML = 0;
    }
    yichu_count.firstChild.innerHTML++;
  }
  info.style.display = "none";
});
piliangchuanjian();

//brand移动函数
function brandMove(brand, callback) {
  var width_left = (div_top.offsetWidth - fence.offsetWidth) / 2;
  var Height_top = (div_top.offsetHeight - fence.offsetHeight) / 2;
  var distance = div_top.offsetHeight - brand.offsetTop - Height_top;
  brand.style.zIndex = "999";

  console.log("左边框", width_left);
  console.log("上边框", Height_top);
  clearInterval(brand.timer);
  brand.timer = setInterval(function () {
    var distance_now = div_top.offsetHeight - brand.offsetTop - Height_top;
    if (distance_now <= 0) {
      callback(fence, brand);
      clearInterval(brand.timer);
    }
    brand.style.top = brand.offsetTop + 4 + "px";
  }, 1);
}
//brand删除
function brandRemove(fence, brand) {
  var index = -1;
  for (var i = 0; i < lis.length; i++) {
    if (
      lis[i].dataset.flag == undefined ||
      lis[i].dataset.flag == "undefined"
    ) {
      index = i;
      break;
    }
  }
  if (index != -1) {
    lis[index].innerHTML = brand.innerHTML;
    // lis[index].style.border = "1px solid black";
    lis[index].setAttribute("data-flag", brand.dataset.random);

    //整理收集区当前所有种类的数量
    for (var i = 0, obj = {}; i < lis.length; i++) {
      if (lis[i].dataset.flag !== undefined) {
        var xxx = 0;
        for (key in obj) {
          if (key === lis[i].dataset.flag) {
            xxx = 1;
            break;
          }
        }
        if (xxx === 0) {
          obj[lis[i].dataset.flag] = 1;
        } else {
          obj[lis[i].dataset.flag]++;
        }
      }
    }

    //将收集区大于三个消除
    for (key in obj) {
      if (obj[key] >= 3) {
        delete obj[key];
        console.log("消除");
      }
    }
    console.log(obj);

    //先收集区的样式全部归零
    for (var i = 0; i < lis.length; i++) {
      lis[i].dataset.flag = undefined;
      lis[i].innerHTML = "";
    }

    //再将消除三个以上剩下的赋值给收集区
    var j = 0;
    for (key in obj) {
      for (var i = 0; i < obj[key]; i++) {
        lis[j].dataset.flag = key;
        lis[j].innerHTML =
          '<svg class="icon" aria-hidden="true"><use id="icon" xlink:href="' +
          key +
          '"></use></svg>';
        // lis[j].style.border = "1px solid black";
        j++;
      }
    }

    //把没有赋值的 继续清空
    for (var i = 0; i < lis.length; i++) {
      if (
        lis[i].dataset.flag == "undefined" ||
        lis[i].dataset.flag == undefined
      ) {
        lis[i].innerHTML = "";
      }
    }
    fence.removeChild(brand);

    var index = -1;
    for (var i = 0; i < lis.length; i++) {
      if (
        lis[i].dataset.flag == undefined ||
        lis[i].dataset.flag == "undefined"
      ) {
        index = i;
        break;
      }
    }

    if (index == -1) {
      winOrLose(false);
      return;
    }

    var brands = fence.querySelectorAll(".brand");
    if (index == 0 && brands.length <= 0) {
      winOrLose(true);
    }
  } else {
    winOrLose(false);
    return;
  }
}

//移出三个手牌，放回到栅栏里面
function yichuBrand() {
  var arr = [];
  for (var i = lis.length - 1; i >= 0; i--) {
    if (
      lis[i].dataset.flag != "undefined" &&
      lis[i].dataset.flag != undefined
    ) {
      var obj1 = {};
      obj1.innerHTML = lis[i].innerHTML;
      obj1.flag = lis[i].dataset.flag;
      arr.push(obj1);
      lis[i].innerHTML = "";
      lis[i].setAttribute("data-flag", "undefined");
      if (arr.length >= 3) {
        break;
      }
    }
  }

  for (var i = 0; i < arr.length; i++) {
    var obj = {};
    obj.lefts = [0, 60, 120, 180]; //brand可能出现的left
    obj.div = document.createElement("div"); //创建一个div
    obj.div.className = "brand"; //给div的class赋值成brand
    obj.div.style.top = 300 / 3.75 + "vw";
    obj.div.style.left = obj.lefts[i] / 3.75 + "vw";
    obj.random = arr[i].flag;
    obj.div.setAttribute("data-random", obj.random);
    obj.div.innerHTML =
      '<svg class="icon" aria-hidden="true"><use id="icon" xlink:href="' +
      obj.random +
      '"></use></svg>';
    fence.appendChild(obj.div);
  }
}

//打乱brand
function daluanBrand() {
  var obj = {};
  obj.tops = [0, 60, 120, 180, 240, 300]; //brand可能出现的top
  obj.lefts = [0, 60, 120, 180, 240]; //brand可能出现的left
  var brands = document.querySelectorAll(".brand");

  for (var i = 0; i < brands.length; i++) {
    brands[i].style.top =
      obj.tops[randomRangeNumber(0, obj.tops.length - 1)] / 3.75 + "vw";
    brands[i].style.left =
      obj.lefts[randomRangeNumber(0, obj.lefts.length - 1)] / 3.75 + "vw";
    brands[i].style.zIndex = randomRangeNumber(1, 899);
  }
}

//批量创建brand
function piliangchuanjian() {
  var obj = {};
  obj.tops = [0, 60, 120, 180, 240]; //brand可能出现的top
  obj.lefts = [0, 60, 120, 180, 240]; //brand可能出现的left
  obj.colors = [
    "#icon-kafei",
    "#icon-shutiao",
    "#icon-xuegao",
    "#icon-nailao",
    "#icon-tiantong",
    "#icon-hebaodan",
  ];
  obj.count = 3 * 10;
  var arr = [];

  for (var j = 0; j < obj.count; j++) {
    for (var i = 0; i < obj.colors.length; i++) {
      console.log(obj.colors[i]);
      var newObj = {};
      newObj.color = obj.colors[i];
      newObj.top =
        obj.tops[randomRangeNumber(0, obj.tops.length - 1)] / 3.75 + "vw";
      newObj.left =
        obj.lefts[randomRangeNumber(0, obj.lefts.length - 1)] / 3.75 + "vw";

      arr.push(newObj);
    }
  }
  for (var i = 0; i < arr.length; i++) {
    foundBrand(fence, arr[i]);
  }

  sessionStorage.setItem("fence", fence.innerHTML);
  sessionStorage.setItem("ul", ul.innerHTML);
}
// 创建一个brand 传入父亲元素
function foundBrand(parent, newObj) {
  var obj = {};
  obj.div = document.createElement("div"); //创建一个div
  obj.div.className = "brand"; //给div的class赋值成brand

  obj.div.style.top = newObj.top; //取一个随机范围的top
  obj.div.style.left = newObj.left; //取一个随机范围的left
  obj.random = newObj.color;
  obj.div.setAttribute("data-random", obj.random);
  obj.div.innerHTML =
    '<svg class="icon" aria-hidden="true"><use id="icon" xlink:href="' +
    obj.random +
    '"></use></svg>';
  parent.appendChild(obj.div);
}
//取随机范围数字
function randomRangeNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function winOrLose(flag) {
  var big = Lose.querySelector(".big");
  var countn = Lose.querySelector("h2");
  countn = countn.querySelector("span");
  sessionStorage.setItem("num", Number(sessionStorage.getItem("num")) + 1);
  if (flag) {
    big.innerHTML = "<span>你过关啦！</span>";
    countn.innerHTML = Number(sessionStorage.getItem("num"));
  } else {
    big.innerHTML = "<span>槽位已满</span>";
    countn.innerHTML = Number(sessionStorage.getItem("num"));
  }
  Lose.style.display = "block";
}

【博学谷学习记录】超强总结，用心分享