js实现简单掷骰子小游戏

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

实现方法：

方法一：通过背景位置、背景图像、背景重复三个属性以及框架动画()方法改变背景骰子图来实现图片切换。

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

方法二：设置定时调整钢性铸铁样式背景图像。

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

！DOCTYPE html html head meta charset=' utf-8 '标题掷骰子/title style type='text/css ' .骰子{宽度： 100像素高度： 100像素；后台-图像： URL(骰子_ 1。jpg)；光标：指针；相对位置：}/style/head dydiv class=' dice '/div script src=' http :http://Ajax。谷歌API。com/Ajax/libs/jquery/1。8 .0/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(function(){ let dice=$().骰子');dice.on('click ')，function(){ dice.css('cursor '，' default ')；让num=数学。天花板(数学。random()* 6)；控制台。日志(数字)；dice.css('背景-图像'，' 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('背景图像')，'网址(骰子数').jpg)') }，200)；});});/脚本/正文/html骰子图：

效果图：

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