大富翁棋盘抽奖版 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.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相关推荐

网页版JS游戏五子棋单机版也可以改版成网络版
网页版JS游戏五子棋单机版也可以改版成网络版 2个文件,界面wuziqi.html 脚本wuziqi.js 新手可以去我下载中心下, <!DOCTYPE html> <html ...
python爬虫：关于解决request.get和点击查看网页源代码的内容不同的问题//及大神版js加密参数获取教程指路
首先声明:爬虫小白,虽然爬过几个网站,但是知识几乎都是实践中获取,如果以下说的不对的,请多指正,谢谢!谨此给和我一样的小白提供一个解题思路! 目录问题背景菜鸡版解决方案大神版js加密参数获取教程 ...
前端笔记82——随机抽奖的JS代码
前言在前端的开发当中,我们肯定会遇到随机抽奖的需求.我们要怎么去实现呢?下面就来分享随机抽奖的JS代码,有需要的小伙伴可以复制到编译器当中运行查看效果. 随机抽奖的JS代码 <!DOCTYPE ...
大富翁4 android,大富翁4安卓版
大富翁4安卓版APK 基于台湾大宇科技开发的大富翁4电脑版制作的手机游戏完美移植,游戏的玩法和强手棋几乎一致,更增加了多种卡牌,并且将地名更置为台湾本土地名. 玩法介绍: 藉由掷骰子来决定行进的步数 ...
html+抽奖游戏,九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
java 9宫格抽奖_九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
php 写一个大富翁游戏,抽奖系列：如何用纯js做一个大富翁游戏
话不多说,先上效果图: 功能点: 礼品的位置小怪兽位置的变化(走路.转身和回退) 小怪兽的跳跃弧度确定好功能点,接下来就是逐个击破: 1.渲染奖品获取奖品数据后,建一个数组存放奖品的位置,通过遍 ...
IIS日志清理CMD版,VBS版,JS版,WSH版
'IIS日志清理之IIS日志生成系统(CreateIISLog.vbs) '创建文件夹 Function CreateFolder(Folder) On Error Resume Next ...
简单版---JS获得某天是一年当中的第几天
简单版的就是不用那么繁琐的去用switch一个月一个月的把天数相加,这里运用的是JS对象的日期对象的方法. 大致的实现原理,就是用需要计算的那天减去当年的第一天,得出差值,进行相关的计算得到答案. & ...

大富翁棋盘抽奖版 js

大富翁棋盘抽奖版

move.js

大富翁棋盘抽奖版 js相关推荐

最新文章

热门文章