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 jsFiddle JSBin在线调试器
Mar 14 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
移动节点的jquery代码
Jan 13 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 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中PDO的事务处理分析
2016/04/07 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
使用python远程操作linux过程解析
2019/12/04 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
MYSQL支持事务吗
2013/08/09 面试题
Java面向对象面试题
2016/12/26 面试题
幼儿园义卖活动方案
2014/01/17 职场文书
展会邀请函范文
2014/01/26 职场文书
小学教师培训感言
2014/02/11 职场文书
葬礼司仪主持词
2014/03/31 职场文书
房产公证委托书范本
2014/09/20 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
银行贷款收入证明
2014/10/17 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS