扔骰子的整个过程可以拆分为：
1.扔骰子，获得点数
2.拿到点数，在dom元素上进行走步操作
3.走步操作结束后，如果有奖励判定，进行奖励判定操作
css部分
我要评论 .map{
display: grid;
grid-template-columns: repeat(11,90px);//设置列数和每列宽
grid-template-rows: repeat(11,90px);//设置行数和每行高
}
.map div{
text-align: center;
line-height: 90px;
/* text-shadow: 4px 1px 2px aquamarine; */
}
html部分
<!--
这里用的是网格布局，也可以使用自己喜欢的表现形式
-->
<div class="map">
<div>起点</div>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">初级福袋</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">特效发言</div>
<div id="7">7</div>
<div id="8">8</div>
<div id="9">9</div>
<div id="10">初级福袋</div>
<div></div>
<div id="36">36</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="11">11</div>
<div></div>
<div id="35">35</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="12">炸弹</div>
<div></div>
<div id="34">金豆</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="13">13</div>
<div></div>
<div id="33">33</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="14">14</div>
<div></div>
<div id="32">32</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="15">座位框</div>
<div></div>
<div id="31">初级福袋</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="16">16</div>
<div></div>
<div id="30">30</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="17">中级福袋</div>
<div></div>
<div id="29">29</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="18">18</div>
<div></div>
<div id="28">28</div>
<div id="27">头像</div>
<div id="26">26</div>
<div id="25">金币</div>
<div id="24">中级福袋</div>
<div id="23">23</div>
<div id="22">22</div>
<div id="21">21</div>
<div id="20">高级福袋</div>
<div id="19">19</div>
</div>
<button>扔骰子</button>
<button>扔10次</button>
js部分
var map = document.getElementsByClassName('map')[0];//获取大富翁元素对象
var dice = document.getElementsByTagName('button')[0];
var dice1 = document.getElementsByTagName('button')[1];
// 生成随机颜色
function randomColor(){
var n = Math.round(Math.random()*0xffffff);//随机生成16进制的数字
n = n.toString(16)
return "#" + n;
}
// 扔骰子
function randomdice(){//与后端交互的话在这一步进行扔骰子操作的请求，后端返回点数以及奖励，先拿点数进行走步操作，走步结束后，显示奖励详情
return Math.round(Math.random()*5+1);//随机生成1-6的整数
}
function reset(){//重置每个格子的样式
var grids = map.children;
for(var i = 0 ; i <grids.length ; i ++){
grids[i].style.backgroundColor ='#fff'
}
}
var step = 0;//设置当前位置为0
var tag = true//设置锁保证当前roll点过程结束后，才能进行下一次roll点
dice.onclick = function(){
if(tag){
tag = false
godice(1)
}
}
dice1.onclick = function(){
if(tag){
tag = false
godice(10)
}
}
function godice(num){
console.log(num,'次数')
num--;
var route = randomdice();//扔骰子，获取点数
//走步操作
var i =0 ;
var tid = setInterval(() => {
reset();
i++;
step += 1;//计时器每执行一次向前走一个格子
if(step>36){//当位置大于当前最远的格子时要重置位置
step = 1;
}
var dom = document.getElementById(step);//这里使用id作为查找当前格子的依据
dom.style.backgroundColor =randomColor();//当走过当前格子时格子的颜色
if(i>=route){//当走的步数等于扔出的点数时，表示整个过程走完，可以停止计时器
clearInterval(tid);
// 到达对应位置时候，查看相应奖励，进行数据请求,处理完之后再进行下一次roll点
if(num>0){//次数不为0，说明还需要再次进行roll点
godice(num);
}else{//为0说明整个roll点过程结束
tag = true
}
}
}, 35);
}
本文地址：https://blog.csdn.net/O0_0O__/article/details/107604620
如对本文有疑问， 点击进行留言回复！！
网友评论