使用jQuery实现掷骰子游戏
本文实例为大家分享了jQuery实现掷骰子游戏的具体代码,供大家参考,具体内容如下
直接新建一个html页面,需要在head中引入jquery,js,一些css代码以及js代码,如下:
.wrap{width:90px;height:90px;margin:120pxauto30pxauto;position:relative} .dice{width:90px;height:90px;background:url(dice.png)no-repeat;} .dice_1{background-position:-5px-4px} .dice_2{background-position:-5px-107px} .dice_3{background-position:-5px-212px} .dice_4{background-position:-5px-317px} .dice_5{background-position:-5px-427px} .dice_6{background-position:-5px-535px} .dice_t{background-position:-5px-651px} .dice_s{background-position:-5px-763px} .dice_e{background-position:-5px-876px} p#result{text-align:center;font-size:16px} p#resultspan{font-weight:bold;color:#f30;margin:6px} #dice_mask{width:90px;height:90px;background:#fff;opacity:0;position:absolute; top:0;left:0;z-index:999}
其中要注意的jquery引入的路径,我是放在和该页面的相同路径下的。
页面body的代码如下:
需要额外的引入所有状态骰子的图片,注意图片名称
主要实现的基本原理就是在初始图片上添加点击事件,当点击发生的时候随机取数,然后根据数值去找dice.png这张图片对应骰子的位置
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。