js实现简单掷骰子小游戏
更新时间：2019年10月24日 14:13:41 作者：momobutong
这篇文章主要为大家详细介绍了js实现简单摇筛子小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
骰子图：
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何利用Web Components实现一个简单的日历原生组件，文中的示例代码讲解详细，需要的小伙伴可以了解一下2023-07-07
这篇文章主要介绍了js动态添加带圆圈序号列表的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
本文通过实例代码给大家介绍了Avalonjs双向数据绑定与监听的实现代码，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-06-06
这篇文章主要为大家详细介绍了js自定义input文件上传样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要为大家详细介绍了Bootstrap下拉菜单效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了JavaScript事件用法,较为详细的分析了javascript事件流、事件类型及事件操作技巧,需要的朋友可以参考下2016-10-10
这篇文章主要为大家详细介绍了JavaScript实现简单拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了浅谈JavaScript 代码整洁之道，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家介绍了后端开发中的代码如何规范避免数组下标越界示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
浏览器目前来说是没有抗锯齿效果的(将来不一定哦)，这样dom元素外观的改变就被限制在1个像素为最佳效果。2009-09-09
最新评论