大富翁棋盘抽奖版 js

冷不防 2022-10-17 04:09 153阅读 0赞

## 大富翁棋盘抽奖版 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]  
功能就是点击投骰子，进行移动抽奖

`html代码`

> id=“flag” 对应后面的js 大棋盘设为背景 ，棋子用张图片

#### move.js ####

//当前位置
    var g_curr_pos = 0;
    //是否正在移动
    var g_is_moveing = false;
    //小格子宽度
    var g_box_width = 95;
    //小格子移动时间
    var g_move_time = 400;
    //在小格子上停留时间
    var g_move_stop_time = 300;
    //二维数组确认轨迹方向
    var g_move_pos_arr = [
    	[0, 0], [1, 0], [2, 0], [3, 0], [4, 0], [5, 0], [6, 0], [7, 0],
    	[7, 1], [7, 2],
    	[6, 2], [5, 2], [4, 2], [3, 2], [2, 2], [2, 3],
    	[2, 4], [2, 5], [3, 5], [4, 5], [5, 5],
    	[6, 5], [6, 4],
    	[7, 4], [7, 5], [7, 6], [7, 7], [6, 7],
    	[5, 7], [4, 7], [3, 7], [2, 7],
    	[1, 7], [0, 7], [0, 6],
    	[0, 5], [0, 4], [0, 3], [0, 2], [0, 1]];
    
    var g_ani_arr = [];
    
    //移动函数， stepNum前进步数（负数为后退）, stepCallback每步的回调函数, finishCallback结束的回调函数
    function move_box(stepNum, stepCallback, finishCallback) { 
    	if (stepNum == 0) { 
    		finishCallback();
    		return;
    	}
    	g_ani_arr = [];
    	var pos = g_curr_pos;
    	if (stepNum < 0) { 
    		for (var i = 0; i > stepNum; i--) { 
    			pos--;
    			if (pos < 0) { 
    				pos = g_move_pos_arr.length - 1;
    			}
    			g_ani_arr.push(pos);
    		}
    	} else { 
    		for (var i = 0; i < stepNum; i++) { 
    			pos++;
    			if (pos >= g_move_pos_arr.length) { 
    				pos = 0;
    			}
    			g_ani_arr.push(pos);
    		}
    	}
    	move_box_step(stepCallback, finishCallback);
    }
    //移动的方法 也就是点数
    function move_box_step(stepCallback, finishCallback) { 
    	if (g_ani_arr.length == 0) { 
    		finishCallback();
    		return;
    	}
    	// var flag_width = g_box_width / 2;
    	var pos = g_ani_arr[0];
    	var arr = g_move_pos_arr[pos];
    	var box_height= 0.95
    	g_box_width=box_height
    	var x = arr[1] * g_box_width+0.12 ;  //每个小格的宽度
    	var y =arr[0] * g_box_width ;//每个小格的高度
    	g_ani_arr.splice(0, 1);
    	g_curr_pos = pos;
    	g_is_moveing = true;
    	$("#flag").animate({  left: x  + "rem", top: y + "rem" }, g_move_time, "swing", function () { 
    		stepCallback();
    		g_is_moveing = false;
    		window.setTimeout(function () { 
    			move_box_step(stepCallback, finishCallback);
    		}, g_move_stop_time);
    	});
    
    	$("#flag").css("left", x + "rem").css("top", y+ "rem");
    }
    
    function init_box_width() { 
    	//var width = $("#treasurebg").width();
    	var width = $(window).width() * 0.95;
    	if (width == 0) { 
    		g_box_width = 0;
    	} else { 
    		g_box_width = width / 8;
    	}
    	//console.log(g_box_width);
    }
    //初始化的位置 一般用来记录上一次的位置
    function init_box(pos) { 
    	init_box_width();
    	g_curr_pos = pos;
    	var box_height= 0.95
    	g_box_width=box_height
    	// var flag_width = g_box_width / 2;
    	var arr = g_move_pos_arr[g_curr_pos];
    	var x = arr[1] * g_box_width +0.12;
    	var y = arr[0] * g_box_width;
    	$("#flag").css("left", x  + "rem").css("top", y+ "rem");
    }
    
    function reset_box() { 
    	if (!g_is_moveing) { 
    		init_box(g_curr_pos);
    	}
    }
    
    
    $(window).resize(function () { 
    	reset_box();
    });
    //骰子方法
    function dice(oldnum, newnum) { 
      init_box(oldnum)  //初始化的得骰子位置 必须先初始化 不然每次都从第一位置开始
      reset_box();
      window.setTimeout(function () { 
        move_box(newnum, function () { 
        }, function () { 
        });
      }, 1000); //点击骰子一秒后开始跳
    }

var state = true  //骰子按钮状态 不能让其一直可以点击触发事件
      $('#goTouzi').click(function () { 
        if (state) { 
          $('.tpiz').attr('src', '../image/page2/saizi.gif')  //骰子的动态gif图
          newNum = 6
          var timer2 = setTimeout(() => { 
            $('.tpiz').attr('src', '../image/page2/' + newNum + '.png') //由后台决定返回的骰子图片
          }, 500)
          dice(oldNum, newNum)//骰子 执行的骰子方法 oldNum初始的位置 newNum骰子摇出的点数
          state = false	//执行完之后骰子变成不可点击的状态
          return state
        }
        clearTimeout(timer2)  //清楚计时器

> 有的小伙伴说运行不成功 ，我的代码都是经过实c过的，不成功只能说明遗漏了什么  
> 注意事项
> 
>  *  先说下布局思路 大背景图下面套着棋子 `棋子必须加id供后面使用 并且必须为flag` 不然就自己去下面改
>  *  再去修改地图坐标 `g_move_pos_arr`是地图的轨迹也是你的背景图的路径，不同的路径要去js修改坐标
>  *  最后那小段js是筛子的动画效果 你们不必去管
>  *  其次都是细节修改 比如每个格子的宽高，在移动的方法里面自己去修改，后面都有注释

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]: /images/20221014/dfd95a93a5284b01949142b870d5cc4f.png