使用jQuery实现掷骰子游戏


Posted in jQuery onOctober 24, 2019

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

直接新建一个html页面,需要在head中引入jquery,js,一些css代码以及js代码,如下:

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type=text/css >
 .wrap{width:90px; height:90px; margin:120px auto 30px auto; 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#result span{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}
</style>
<script>
 $(function(){ 
 var dice = $("#dice"); 
  dice.click(function(){ 
  dice.attr("class","dice");//清除上次动画后的点数 
  dice.css("cursor","default"); 
  $(".wrap").append("<div id='dice_mask'></div>");//加遮罩 
  var num = Math.floor(Math.random()*6+1);//产生随机数1-6 
  dice.animate({left: '+2px'}, 100,function(){ 
    dice.addClass("dice_t"); 
  }).delay(200).animate({top:'-2px'},100,function(){ 
    dice.removeClass("dice_t").addClass("dice_s"); 
  }).delay(200).animate({opacity: 'show'},600,function(){ 
    dice.removeClass("dice_s").addClass("dice_e"); 
  }).delay(100).animate({left:'-2px',top:'2px'},100,function(){ 
    dice.removeClass("dice_e").addClass("dice_"+num); 
    $("#result").html("您掷得点数是<span>"+num+"</span>"); 
    dice.css('cursor','pointer'); 
    $("#dice_mask").remove();//移除遮罩 
  }); 
    }); 
  });
</script>

其中要注意的jquery引入的路径,我是放在和该页面的相同路径下的。

页面body的代码如下:

<body>
<div id="dice" class="dice dice_1"></div> 
<p id="result">请直接点击上面的色子!</p>
</body>

需要额外的引入所有状态骰子的图片,注意图片名称

使用jQuery实现掷骰子游戏

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
jQuery实现轮播图源码
Oct 23 #jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
You might like
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Python的Lambda函数用法详解
2019/09/03 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
Python自动创建Excel并获取内容
2020/09/16 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
三年级科学教学反思
2014/01/29 职场文书
优秀食品类广告词
2014/03/19 职场文书
抽样调查项目计划书
2014/04/24 职场文书
房地产广告策划方案
2014/05/15 职场文书
大学生村官考核材料
2014/05/23 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS