大富翁棋盘抽奖版 js

大富翁棋盘抽奖版

功能就是点击投骰子，进行移动抽奖

html代码

 <div class="game-bg ">
              <img class="dice flag" id="flag" src="./image/page2/dice.png" alt="">
          </div>

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是筛子的动画效果 你们不必去管
• 其次都是细节修改 比如每个格子的宽高，在移动的方法里面自己去修改，后面都有注释