好资源导航 » 文章资讯 » js实现简单掷骰子小游戏

js实现简单掷骰子小游戏

2023-08-10 11:21:04 239

本文实例为大家分享了js掷骰子小游戏的具体代码，供大家参考，具体内容如下

实现方法：

方法一：通过background-position、background-image、backg-repeat三个属性以及jqueryanimate()方法改变背景骰子图来实现图片切换。

PS：调整background-position比较麻烦，由于背景是一张包含各个点数以及旋转时骰子的整图

方法二：设置定时调整css样式background-image。

PS：实现简单，但是视觉效果不佳





掷骰子

.dice{
width:100px;
height:100px;
background-image:url(dice_1.jpg);
cursor:pointer;
position:relative;
}

$(function(){ letdice=$(".dice"); dice.on('click',function(){ dice.css('cursor','default'); letnum=Math.ceil(Math.random()*6); console.log(num); dice.css('background-image','url(dice_f.jpg)'); setTimeout(function(){ dice.css('background-image','url(dice_s.jpg)'); },200); setTimeout(function(){ dice.css('background-image','url(dice_t.jpg)'); },200); setTimeout(function(){ dice.css('background-image','url(dice_'+num+'.jpg)') },200); }); });

骰子图：

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现简单掷骰子小游戏

热门推荐

随机推荐