用jQuery实现掷球游戏的动画效果

原理：当骰子掷，用jQuery动画（）函数来改变色子位移，中间延迟的影响，将玻色子背景，停止最后的动画运行随机生成点，扔掉。其实动画过程分成若干不同的相框（flash动画电影中的帧），更好的框架效应，然后通过支架术后动画的形成。
1。准备工作
我们需要准备的材料的玻色子，在这个例子中，从网络接入到玻色子的材料我，我们要做的是处理6个骰子图片（1-6分），和中间的效果图（运动模糊处理）在同一张照片，把它保存为一个dice.webp，作为背景色图。
加载jQuery库是很有必要的。
复制代码代码如下所示：
然后下面的代码添加到HTML页面的主体，在#骰子是用来放置颜色，和#结果用来显示提示信息。
复制代码代码如下所示：
请直接点击颜色的顶部！
二、CSS代码
我们使用背景加载图片dice.webp into.dice.then我们使用几种风格定位不同颜色的点和过渡效果通过不同的背景位置值。我做了一个简单的模糊处理，你可以使用CSS3来处理图像的模糊效果。注意，# dice_mask是用来防止重复点击，如后所述。
复制代码代码如下：。包{宽度：90px；身高：90px；保证金：120px汽车30px汽车；位置：相对}
。骰子{宽度：90px；身高：90px；背景：URL（骰子。PNG）没有重复；}
。dice_1 {背景位置：- 5px - 4px }
。dice_2 {背景位置：- 5px - 107px }
。dice_3 {背景位置：- 5px - 212px }
。dice_4 {背景位置：- 5px - 317px }
。dice_5 {背景位置：- 5px - 427px }
。dice_6 {背景位置：- 5px - 535px }
。dice_t {背景位置：- 5px - 651px }
。dice_s {背景位置：- 5px - 763px }
。dice_e {背景位置：- 5px - 876px }
P #结果{文本对齐：中心；字体大小：16px }
P #结果跨度{ font-weight: bold；颜色：# F30；保证金：6px }
# dice_mask {宽度：90px；身高：90px；背景：# FFF；不透明度：0；位置：绝对的；
顶：0；左：0；Z指数：999 }
三，jQuery代码
当你点击骰子，骰子第一预设风格（空最后的动画风格），用透明# dice_mask骰子罩防重复点击，并产生一个随机数1-6，然后动画（）函数，改变玻色子玻色子的位移，改变类的模糊过渡的背景图像，然后延迟（延迟），然后进入下一帧动画，动画在骰子的最终定位dice_x类风格，X点，在掷骰子获得的积分，取出面膜的效果，并可以继续点击骰子。
复制代码代码如下：$（函数（）{（））
骰子= $（var#骰子）；
Dice.click（function（）{（）
Dice.attr（班
Dice.css（光标
$（）（）；添加一个掩码
VaR Num = math.floor（数学。随机）（* 6 + 1）； / /随机数1-6
dice.animate（{左：+ 2px}，100、函数（））{
Dice.addClass（dice_t ）；
}），Delay（200）。动画（{顶：2px}，100、函数（））{
Dice.removeClass（dice_t）。AddClass（dice_s ）；
}），Delay（200）。动画（{不透明度：'show}，600、函数（）（）{）
Dice.removeClass（dice_s）。AddClass（dice_e ）；
}），Delay（100）。动画（{左：2px，顶部：'2px}，100、函数（）（））{
Dice.removeClass（dice_e）。AddClass（dice_+数字）；
$（#结果）。Html（点的数量，你扔是+数字+ ）；
Dice.css（'cursor '，'pointer）；
$（# dice_mask ）（去除）； / /删除面具
}）；
}）；
}）；
在很多方面重复打预防，jQuery提供了一个（活的），（绑定），在（），（）等等这些功能，在这种情况下不工作，所以我想了一个办法，当你点击骰子动画开始后，透明遮罩层与大小相同的骰子，骰子盖，在动画的操作不能连续重复点击骰子，当动画运行完毕，然后移除掩模层，这样你可以点击骰子。
上述投动画效果模拟Flash的帧动画，通过对时间轴帧播放的帧，并使用jQuery代替Flash可以完成这样的动画效果，虽然效果不是闪光耀眼。骰子动画是为下一篇文章的铺垫，下一篇文章中我将全面引入技术结合HTML，CSS，PHP和jQuery，MySQL和代码示例，说明骰子游戏，可以控制概率的掷骰子的点，也是一个有趣的游戏。