使用框架实现掷骰子游戏

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

直接新建一个超文本标记语言页面，需要在头中引入jquery，js，一些钢性铸铁代码以及射流研究…代码，如下：

脚本类型=' text/JAVAScript ' src=' http : jquery-1。8 .3 .量滴js '/脚本样式类型=文本/css .包装{宽度：90像素高度：90 px余量：120像素自动30像素自动位置：relative} .骰子{宽度：90像素高度：90 px背景：url(dice.png)不重复；} .骰子_ 1 {背景位置：-5px -4px} .骰子_ 2 {背景位置：-5px -107px} .骰子_ 3 {背景位置：-5px -212px} .骰子_ 4 {背景位置：-5px -317px} .骰子_ 5 {背景位置：-5px -427px} .dice _ 6 {背景位置：-5px -535px} .骰子_ t {背景位置：-5px -651px} .骰子背景位置：-5px -763px} .dice _ e {背景-位置：-5px-876 px } p #结果{ text-align : centerfont-size :16 px } p #结果span { font-weight : bold；color : # f30 margin :6 px } # dice _ mask { width :90 px；高度：90 px背景# fffopacity:0位置：绝对；top :0 left :0 z-index :999 }/style script $(function(){ var dice=$(' # dice ')；骰子。点击(function(){ dice。attr(' class '，' dice ')；//清除上次动画后的点数dice.css('cursor '，' default ')；$('.换行')。追加(' div id=' dice _ mask '/div ')；//加遮罩var num=数学。地板(数学。random()* 6 ^ 1)；//产生随机数1-6骰子。animate({left: ' 2px'}，100，function(){ dice。add class(' dice _ t ')；}).延迟(200)。animate({top:'-2px'}，100，function(){ dice。移除类(' dice _ t ').addCLaSS(' dice _ s ')；}).延迟(200)。animate({ opa city 3360 ' show ' }，600，function(){ dice。移除类(“骰子”)。addCLaSS(' dice _ e ')；}).延迟(100)。animate({left:'-2px '，top:'2px'}，100，function(){ dice。移除类(' dice _ e ').addCLaSS(' dice _ num ')；$(“# result”).html(")您掷得点数是span ' num '/span ')；骰子. css('光标','指针');$('#dice_mask ').移除();//移除遮罩});});});/script其中要注意的框架引入的路径，我是放在和该页面的相同路径下的。

页面身体的代码如下：

body div id=' dice ' class=' dice dice _ 1 '/div p id=' result '请直接点击上面的色子！/p/body需要额外的引入所有状态骰子的图片，注意图片名称

主要实现的基本原理就是在初始图片上添加点击事件，当点击发生的时候随机取数，然后根据数值去找dice.png这张图片对应骰子的位置

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