原生JS实现谁去拿外卖游戏（改编）

body,
html {
width: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}


.wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}




/* 生成随机数主界面 */


h2 {
font-size: 26px;
font-weight: bold;
}


#plat {
width: 600px;
height: 700px;
margin: 2px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}


.box {
width: 200px;
height: 50px;
margin: 20px auto;
border: 1px solid rgb(38, 222, 255);
background-color: rgb(38, 222, 255);
border-radius: 12px;
text-align: center;
color: rgb(255, 255, 255);
line-height: 50px;
font-size: 20px;
text-shadow: 1px 1px 2px rgb(255, 255, 255);
box-shadow: 3px 3px 5px rgb(212, 212, 212);
}


.box:hover {
cursor: pointer;
}


.random {
width: 400px;
height: 450px;
position: relative;
* padding: 28px; */
border: 1px solid rgba(0, 204, 255, 0.863);
border-radius: 12px;
background-color: rgba(0, 204, 255, 0.863);
box-shadow: 4px 6px 6px rgba(199, 199, 199, 0.863);
}




/* .random::after {
content: '';
display: block;
width: 350px;
height: 400px;
border: 1px solid rgba(0, 204, 255, 0.863);
border-radius: 12px;
margin: 25px auto;
position: relative;
} */


#list {
width: 330px;
height: 380px;
border: 1px solid rgba(0, 204, 255, 0.863);
border-radius: 12px;
padding: 10px;
position: absolute;
top: 24px;
left: 24px;
background-color: #fff;
overflow: hidden;
}


#list li {
width: 315px;
height: 37px;
border-bottom: 1px solid #333;
line-height: 37px;
text-indent: 20px;
}


.active {
background-color: rgb(128, 128, 128);
border-color: rgb(128, 128, 128);
color: rgb(255, 251, 30);
}




/* 右侧3D盒子 */


#rightBox {
width: 300px;
height: 300px;
border: 1px solid #333;
margin-right: 320px;
}


.item {
width: 120px;
height: 120px;
background-color: aquamarine;
margin-bottom: 1px;
}

window.Onload= function() {
获取ul节点
var ul = document.getElementById('list');
/ 生成随机数列表
function init(index) {
var li = document.createElement('li');
li.innerHTML = temp[index];
ul.append(li);
}
//点击按钮生成随机数
// 首先获取按钮节点
var box = document.getElementsByClassName('box')[0];
var temp = [11, 12, 25, 32, 41, 35, 23, 14, 21, 31]; //生成一个变量，存储后面生成的随机数
var count = 10; //生成一个变量，存储生成的随机数的个数
box.addEventListener('click', function() {
var Ctemp = temp; //保存创建新数之前的数组
var randomNum = initRandom(); //创建随机数
while (isTrue(Ctemp, randomNum)) { //检查新随机数和原数组中的数是否有重复
randomNum = initRandom(); //有则创建新随机数
}
temp[count] = randomNum;
if (count <10) { //如果不设置默认列表，则需要该代码
init(count);
count++;
} else {
// 添加条件，如果第一个数是十个数中最小的那个，就不移出第一个，而是移出第二个
if (findMin(temp) == 0) {
temp.splice(1, 1); //数组剪切第二个元素
ul.removeChild(ul.children[1]); //移除第二个
} else {
ul.removeChild(ul.firstElementChild); //移出第一个随机数
temp.shift(); //数组剪切第一个元素
}
count--; //元素呗剪切了，数组最后一位空缺
console.log(temp);
init(count); //同时生成新的随机数并放在队尾
count++; //保证列表始终是十列
//count ++这是一个bug点，如果不加这条语句，每次轮到执行else语句之后，count的值变为9，继续执行if模块，导致需要点击两次才能更新队尾值
}
var lis = document.querySelectorAll('li');
for (var item in lis) {
if (lis.hasOwnProperty(item)) {
lis[item].className = ''; //先清除所有li的样式
}
}
//给最小数的li添加动态样式
addClass(temp);
}, false);
//给生成的随机数中最小数添加动态样式
function addClass(temp) {
// console.log(Math.min(...temp)) //结构赋值，找出数组中最小的那个数
// console.log(Math.min.apply(null, temp))//改变this指向方法也可以
var minIndex = findMin(temp);
ul.children[minIndex].className = 'active';
}
//找到最小值和最小值索引
function findMin(temp) {
var minIndex = 0;
var min = temp[0];
for (let i = 1; i
if (min > temp[i]) {
min = temp[i];
minIndex = i;
}
}
return minIndex;
}
//生成随机数
function initRandom() {
return Math.floor(Math.random() * 100);
}
//判断新随机数在原数组中是否存在
function isTrue(arr, newValue) {
return arr.some(function(e) { //只要原数组中有一个和新随机数一样返回true
return e == newValue;
})
}
}