大富翁棋盤抽獎版

功能就是點擊投骰子，進行移動抽獎

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.95g_box_width=box_heightvar 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.95g_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 = 6var 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是篩子的動畫效果 你們不必去管
• 其次都是細節修改 比如每個格子的寬高，在移動的方法里面自己去修改，后面都有注釋

總結

以上是生活随笔為你收集整理的大富翁棋盘抽奖版 js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。