js实现简单掷骰子小游戏


Posted in Javascript onOctober 24, 2019

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

实现方法:

方法一:通过background-position、background-image、backg-repeat三个属性以及jquery animate()方法改变背景骰子图来实现图片切换。

PS:调整background-position比较麻烦,由于背景是一张包含各个点数以及旋转时骰子的整图

方法二:设置定时调整css样式background-image。

PS:实现简单,但是视觉效果不佳

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>掷骰子</title>
 <style type="text/css">
  .dice {
   width: 100px;
   height: 100px;
   background-image: url(dice_1.jpg);
   cursor: pointer;
   position: relative;
  }
 </style>
</head>
<body>
<div class="dice"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
  let dice = $(".dice");
  dice.on('click',function(){
   dice.css('cursor', 'default');
   let num =Math.ceil(Math.random()*6);
   console.log(num);
   dice.css('background-image', 'url(dice_f.jpg)');
   setTimeout(function(){
    dice.css('background-image', 'url(dice_s.jpg)');
   },200);
   setTimeout(function(){
    dice.css('background-image', 'url(dice_t.jpg)');
   },200);
   setTimeout(function(){
    dice.css('background-image', 'url(dice_'+num+'.jpg)')
   }, 200);
  });
  
 });
</script>
</body>
</html>

骰子图:

js实现简单掷骰子小游戏js实现简单掷骰子小游戏js实现简单掷骰子小游戏js实现简单掷骰子小游戏js实现简单掷骰子小游戏js实现简单掷骰子小游戏js实现简单掷骰子小游戏js实现简单掷骰子小游戏js实现简单掷骰子小游戏

效果图:

js实现简单掷骰子小游戏

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

Javascript 相关文章推荐
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
浅谈js中的闭包
Mar 16 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
js实现GIF图片的分解和合成
Oct 24 #Javascript
js实现掷骰子小游戏
Oct 24 #Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 #Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 #Javascript
js实现简单掷骰子效果
Oct 24 #Javascript
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
You might like
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php 静态化实现代码
2009/03/20 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP函数常用用法小结
2010/02/08 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php实现图片缩放功能类
2013/12/18 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
Angularjs 基础入门
2014/12/26 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[17:36]VG战队纪录片
2014/08/21 DOTA
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
基于python plotly交互式图表大全
2019/12/07 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python动态文本进度条的实例代码
2020/01/22 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
python 实现图片批量压缩的示例
2020/12/18 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
潘婷洗发水广告词
2014/03/14 职场文书
空乘英文求职信
2014/04/13 职场文书