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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 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
PHP编码规范-php coding standard
2007/03/16 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
Python双向循环链表实现方法分析
2018/07/30 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
简单了解python协程的相关知识
2019/08/31 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
物理教师自荐信范文
2013/12/28 职场文书
丑小鸭教学反思
2014/02/03 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
先进个人事迹材料
2014/12/29 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
在校学生证明格式
2015/06/24 职场文书
重阳节简报
2015/07/20 职场文书
跳高加油稿
2015/07/21 职场文书