js实现简单掷骰子小游戏
2019-10-24 18:05
2361 查看
本文实例为大家分享了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,html实现简单的h5小游戏点亮所有的灯小游戏源码
- JS实现简单的贪吃蛇小游戏
- HTML+js实现简单的打地鼠小游戏
- 用JS实现简单的猜数小游戏
- JS实现简单随机3D骰子
- JS学习 变量的作用域等 实现简单的玛丽小游戏
- JS——实现简单的随机3D骰子
- js简单实现点击左右运动的方法
- js实现文件下载的两种简单方式
- 一个简单的js脚本实现表格排序
- JS实现简单面向对象的颜色选择器实例
- 简单实现JS Loading功能
- js实现简单的动画(游动的鱼)
- JS实现简单的多物体运动动画
- JS简单实现多级Select联动菜单效果代码
- 超简单JS实现把鼠标选中文字发送到新浪微博
- JS简单实现计算器功能
- 用select下拉框控制指定的div进行显示,其他层隐藏,用js简单实现
- js实现的格式化数字和金额功能简单示例
- 4行代码简单实现js树形菜单