使用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 相关文章推荐
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery实现拖拽小方块效果
Dec 10 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
yii中widget的用法
2014/12/03 PHP
PHP生成器简单实例
2015/05/13 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
JsRender for object语法简介
2014/10/31 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python决策树之CART分类回归树详解
2017/12/20 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python交易记录链的实现过程详解
2019/07/03 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
单位介绍信范文
2014/01/18 职场文书
岗位职责风险防控
2014/02/18 职场文书
农村文化建设标语
2014/10/07 职场文书
员工升职自荐信
2015/03/27 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers