大富翁实现

思路

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