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 相关文章推荐
jquery datatable后台封装数据示例代码
Aug 07 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
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写杨辉三角实例代码
2011/07/17 PHP
php实现读取超大文件的方法
2014/07/28 PHP
php中的动态调用实例分析
2015/01/07 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
js function使用心得
2010/05/10 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python按比例随机切分数据的实现
2019/07/11 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
python文件排序的方法总结
2020/09/13 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
实习心得体会
2014/01/02 职场文书
家长学校实施方案
2014/03/15 职场文书
住宅使用说明书
2014/05/09 职场文书
星级党支部申报材料
2014/05/31 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
婚姻出轨保证书
2015/05/08 职场文书
教师调动申请报告
2015/05/18 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
Golang 入门 之url 包
2022/05/04 Golang
Python实现聚类K-means算法详解
2022/07/15 Python