使用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实现的简单在线计算器功能
May 11 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jquery图片放大镜效果
Jun 23 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
Vue组件创建和传值的方法
2018/08/17 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
Vue指令指令大全
2019/02/09 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
MySQL最常见的操作语句小结
2015/05/07 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
python @classmethod 的使用场合详解
2019/08/23 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
北京故宫导游词
2015/01/31 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
商务宴会祝酒词
2015/08/11 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
【2·13】一图读懂中国无线电发展
2022/02/18 无线电