使用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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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.MVC的模板标签系统(四)
2006/09/05 PHP
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php MySQL与分页效率
2008/06/04 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
28个JS验证函数收集
2010/03/02 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
怎样写留学自荐信
2013/11/11 职场文书
网络维护管理员的自我评价分享
2013/11/11 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
大专生的学习自我评价
2013/12/04 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
2016年父亲节寄语
2015/12/04 职场文书
领导干部学习心得体会
2016/01/23 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python