有关lodash函数的练习
有的是lodash库里面的函数，因此在使用前需要引用<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>地址
随机发牌练习
<div class="paly">
<h1>玩家一</h1>
<div id="play1"></div>
</div>
<div class="paly">
<h1>玩家二</h1>
<div id="play2"></div>
</div>
<div class="paly">
<h1>玩家三</h1>
<div id="play3"></div>
</div>
<div class="paly">
<h1>底牌</h1>
<div id="hand"></div>
</div>
css样式
.paly {
display: flex;
align-items: center;
margin-top: 20px;
}
img {
width: 50px;
margin-left: -15px;
}
h1 {
margin-right: 20px;
font-size: 20px;
}
js代码
//写法1
const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2'];
const flower = ["♠️", "♥️", "♣️", "♦️"]; // 黑桃 < 红心 < 梅花 < 方块
//生成牌函数
let arr = []; //创建一个空数组，装54张牌
function creat() {
let num = 1;
for (let i = 0; i < number.length; i++) { //遍历牌号数组，将牌和花色放在一起
for (let j = 3; j >= 0; j--) { //外层循环一次，内层循环一圈，将外层每个牌都赋予一个花色
let str = number[i] + flower[j]; //将花色和牌号拼接到一起
let cardObject = { //创建一个对象
name: str, //名字属性为花色和牌号
number: i, //数字编号属性为 i i的范围：0~12
flower: j, //花色编号属性为 j j的范围：0~3
img: `${num}`
};
num++;
arr.push(cardObject); //将创建的牌对象放入存 54 张牌的数组里面
}
}
//把 52 张牌存入数组之后，将两张王存入数组后面，因为王没有花色，所以就只有两个属性，一个名字、一个数字
arr.push({ name: "大王", img: 53 }, { name: "小王", img: 54 });
let s = new Set(); //存储不重复的牌
while (s.size < 54) { //随机生成号码牌，不重复
s.add(_.random(0, 53));
}
let newArr = [...s];
arr = newArr.map(function (item) { //遍历下标数组，将下标数组的元素作为牌数组的下标
return arr[item];
});
let pokerArr1 = _.chunk(arr, 17)[0]; //库里面写好的方法，数组的截取，17张牌截取一段，一共截取四段
//将截取的数组进行排序，先牌点子大小，再排花色
pokerArr1 = _.orderBy(pokerArr1, ['number', 'flower'], ['asc', 'asc']);
let pokerArr2 = _.chunk(arr, 17)[1]; //库里面写好的方法，数组的截取，17张牌截取一段，一共截取四段
pokerArr2 = _.orderBy(pokerArr2, ['number', 'flower'], ['asc', 'asc']);
let pokerArr3 = _.chunk(arr, 17)[2]; //库里面写好的方法，数组的截取，17张牌截取一段，一共截取四段
pokerArr3 = _.orderBy(pokerArr3, ['number', 'flower'], ['asc', 'asc']);
let pokerArr4 = _.chunk(arr, 17)[3]; //库里面写好的方法，数组的截取，17张牌截取一段，一共截取四段
pokerArr4 = _.orderBy(pokerArr4, ['number', 'flower'], ['asc', 'asc']);
return [pokerArr1, pokerArr2, pokerArr3, pokerArr4];
}
//调用函数，用四个数组接收返回的四个数组
let [pokerArr1, pokerArr2, pokerArr3, pokerArr4] = creat();
//将牌渲染在页面上
play1.innerHTML = pokerArr1.map(item => `<img src="./pokerImg/pkp_${item.img}.jpg" alt="">`).join('');
play2.innerHTML = pokerArr2.map(item => `<img src="./pokerImg/pkp_${item.img}.jpg" alt="">`).join('');
play3.innerHTML = pokerArr3.map(item => `<img src="./pokerImg/pkp_${item.img}.jpg" alt="">`).join('');
hand.innerHTML = pokerArr4.map(item => `<img src="./pokerImg/pkp_${item.img}.jpg" alt="">`).join('');
js写法2
我們想要按照牌号大小和花色进行排序的话，我们就需要将我们的牌创建一个对象，有属性牌号和花色和地址。
//复写
const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2'];
const flower = ["♠️", "♥️", "♣️", "♦️"]; // 黑桃 < 红心 < 梅花 < 方块
//生成牌函数
function creat() {
let arr = []; //创建一个空数组，装54张牌
let imgNumber = 1; //牌号从1开始
//遍历两个数组，将牌作为对象存入数组
for (let i = 0; i < number.length; i++) {
for (let j = flower.length - 1; j >= 0; j--) { //因为牌中方块花色放在最前面，但是我们想要将黑桃放最前面，因此反着添加，黑桃在前
let pokerObj = { //创建一个对象
number: i,
flower: j,
name: `${number[i]}${flower[j]}`,
src: `<img src="./pokerImg/pkp_${imgNumber}.jpg" alt="">`
}
arr.push(pokerObj);
imgNumber++;
}
}
//存入大小王
arr.push({ name: '小王', src: `<img src="./pokerImg/pkp_53.jpg" alt="">` }, { name: '大王', src: `<img src="./pokerImg/pkp_54.jpg" alt="">` });
//分割54张牌，排序
let pokerArr1 = _.chain(arr).shuffle().chunk(17).value()[0]; //将54张牌打乱，截取17张为一组
let pokerArr2 = _.chain(arr).shuffle().chunk(17).value()[1]; //将54张牌打乱，截取17张为一组
let pokerArr3 = _.chain(arr).shuffle().chunk(17).value()[2]; //将54张牌打乱，截取17张为一组
let pokerArr4 = _.chain(arr).shuffle().chunk(17).value()[3]; //将54张牌打乱，最后三张为1组
//排序
pokerArr1 = _.sortBy(pokerArr1, ['number', 'flower']); //先按大小排序，再按花色排序
pokerArr2 = _.sortBy(pokerArr2, ['number', 'flower']); //先按大小排序，再按花色排序
pokerArr3 = _.sortBy(pokerArr3, ['number', 'flower']); //先按大小排序，再按花色排序
pokerArr4 = _.sortBy(pokerArr4, ['number', 'flower']); //先按大小排序，再按花色排序
return [pokerArr1, pokerArr2, pokerArr3, pokerArr4];
}
let [pokerArr1, pokerArr2, pokerArr3, pokerArr4] = creat(); //四个数组接收返回值
play1.innerHTML = _.map(pokerArr1,item=>`${item.src}`).join('');
play2.innerHTML = _.map(pokerArr2,item=>`${item.src}`).join('');
play3.innerHTML = _.map(pokerArr3,item=>`${item.src}`).join('');
hand.innerHTML = _.map(pokerArr4,item=>`${item.src}`).join('');
双色球练习
html样式
<!-- 中奖号码 -->
<div class="flex box">
<h2>中奖号码：</h2>
<ul class="flex" id="lucky"></ul>
</div>
<!-- 机选号码 -->
<div class="flex box">
<h2>机选号码：</h2>
<ul class="flex" id="computer"></ul>
</div>
<!-- 获奖情况 -->
<h1></h1>
<input type="button" value="生成一组">
CSS样式
.flex {
display: flex;
margin: 20px auto;
justify-content: space-between;
}
.box {
width: 600px;
}
ul {
display: flex;
list-style-type: none;
text-align: center;
line-height: 50px;
color: white;
}
ul>li {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
margin-right: 10px;
}
ul>li:last-child {
background-color: blue !important;
}
input {
width: 100px;
height: 40px;
margin-left: 340px;
}
js代码
let btn = document.querySelector('[type="button"]'); //获取按钮
let h1 = document.querySelector('h1'); //获奖情况
//生成一组6个号码数函数
function create() {
let ballArr = _.range(1, 34); //返回范围内数字组成的新数组，不取到34
ballArr = _.chain(ballArr).sampleSize(6).sortBy().value(); //从数组中取出 n 元素，然后进行排序
return ballArr; //返回数组
}
//生成一组6个号码数函数方法2
function create1() {
let ballArr = [];
while (ballArr.length < 6) {
ballArr.push(_.random(1, 33));
ballArr = _.chain(ballArr).uniq().sortBy().value(); //将数组进行去重排序，如果随机数重复就自动删除，数组长度就就自减
}
return ballArr; //返回数组
}
//按钮点击事件
let winRedArr;
let computerRedArr;
let winBlue;
let blue;
btn.onclick = function () {
winRedArr = create(); //中奖红球号码，用一个变量去接收生成号码函数返回的一个数组;
console.log(winRedArr);
computerRedArr = create(); //机选红球号码，用一个变量去接收生成号码函数返回的一个数组;
winBlue = _.random(1, 16); //生成一个蓝球中奖号码;
blue = _.random(1, 16); //生成一个蓝球机选号码;
//将号码渲染到页面上
foo(); //渲染球函数
//判断函数
judge(winRedArr, computerRedArr, winBlue, blue);
}
//将号码给到ul的 li里面
function foo() {
//遍历红球数组，将拿到的红球号码放到 li 标签里面，得到一个包含很多个 li 对象的数组，通过join将返回的数组转换为字符串，将这个字符串给到ul
lucky.innerHTML = _.template('<%_.forEach(winRedArr,function(item){%><li><%- item %></li><% });%>')();
computer.innerHTML = _.template('<%_.forEach(computerRedArr, function(item){%><li><%-item %></li><%});%>')();
lucky.innerHTML += `<li>${winBlue}</li>`; //将蓝球号码给到ul的最后一个子元素身上
computer.innerHTML += `<li>${blue}</li>`; //将蓝球号码给到ul的最后一个子元素身上
}
//判断中奖机率
function judge(winRedArr, computerArr, winblue, blue) {
let times = _.intersection(winRedArr, computerArr).length; //判断交集
let flag = false;
if (winblue == blue) {
flag = true;
} else {
flag = false;
}
let h1 = document.querySelector('h1');
if (times == 6 && flag) {
h1.innerText = "恭喜一等奖,1000万";
} else if (times == 6 && flag == false) {
h1.innerText = "恭喜二等奖,500万";
} else if (times == 5 && flag) {
h1.innerText = "恭喜三等奖,3000元";
} else if ((times == 5 && flag == false) || (times == 4 && flag)) {
h1.innerText = "恭喜四等奖,200元";
} else if ((times == 4 && flag == false) || (times == 3 && flag)) {
h1.innerText = "恭喜五等奖,10元";
} else if ((times == 2 && flag) || (times == 1 && flag) || (times == 0 && flag)) {
h1.innerText = "恭喜六等奖,5元";
} else {
h1.innerText = "未中奖"
}
}
