目录

思路

扔骰子的整个过程可以拆分为：
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; */        }

h刘墉女儿tml部分

<!-- 这里用的是网格布局，也可以使用自己喜欢的表现形式 --><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 ret(){//重置每个格子的样式var grids = map.children;for(var i = 0 ; i <grids.length ; i ++){grids[i].style.backgroundColor ='#fff'}}var step = 0;//设置当前位置为0var tag = true//设置锁保证当前roll点过程结束后，才能进行下一次roll点dice.onclick = function(){if(tag){tag = falgodice(1)}}dice1.onclick = function(){if(tag){tag = falgodice(10)}}function godice(num){console.log(num,'次数简历表格电子版下载可填写')num--;var route = randomdice();//扔骰子，获取点数//走步操作var i =0 ;var tid = tInterval(() => {ret();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);}el{//为0说明整个roll点过程结束tag = true}}}, 35);}

本文地址：https://blog.csdn.net/O0_0O__/article/details/107604620