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>
骰子图：
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了使用javaScript和jQuery制作光棒效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
结合AVM官网的介绍和我自己的一些实践经验，我总结了一系列AVM的特性，我想这些内容足以让你主动去学习AVM框架了2021-10-10
本文给大家分享的是个人刚开始学习javascript的时候写的仿windows经典的扫雷游戏的代码，当时只是写了下来，没加注释，这里补上，有需要的小伙伴可以参考下。2015-04-04
这篇文章给大家介绍了js实现百度搜索功能，代码分为html部分和css折叠样式部分，具体实现代码大家参考下本文2018-02-02
本文为大家介绍下使用js对输入框进行限制：文本框只能输入数字代码、只能输入数字、只能输入字母和汉字、只能输入英文字母和数字等等，还有很多，感兴趣的可以学习下2013-07-07
这篇文章主要介绍了JavaScript数组排序功能简单实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了微信小程序原生自定义弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
javascript中 location用于获取或设置窗体的URL，并且可以用于解析URL，是BOM中最重要的对象之一，下面我们就来详细探讨下Location对象的使用。2015-05-05
p5.js 是一个JavaScript的函数库，它在制作之初就和Processing有同样的目标。本文将利用p5.js 制作出一束动态花束，感兴趣的可以尝试一下2022-06-06
这篇文章主要为大家详细介绍了js实现图片切割功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论