js实现简单掷骰子小游戏

时间：2021-05-26

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

实现方法：

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

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

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

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

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>掷骰子</title> <style type="text/css"> .dice { width: 100px; height: 100px; background-image: url(dice_1.jpg); cursor: pointer; position: relative; } </style></head><body><div class="dice"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script type="text/javascript"> $(function(){ let dice = $(".dice"); dice.on('click',function(){ dice.css('cursor', 'default'); let num =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); }); });</script></body></html>

骰子图：

效果图：

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章