被最近很火的小游戏 吸引了，去玩了两把 发现那个开发者老坏了，全是随机的
仔细思考了一下，发现仿造一个并不难，就着手开始敲代码，下面是成果，分享给大家
对于这个游戏呢，其实就是简单的元素块移动，然后判断消除
这个是成品效果图
我们通过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";
}
【博学谷学习记录】超强总结，用心分享
扫一扫
3129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
