JavaScript实现掷骰子小游戏

网络 2024-04-24 15:13:59编程技术
43

本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下

骰子.png

实现方法:

方法一:通过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>

效果图:

掷骰子.gif

试玩地址:https://www.zhanid.com/tool/dice-roll.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长工具网。

JavaScript 掷骰子
THE END
战地网
频繁记录吧,生活的本意是开心

相关推荐

教你使用Java实现扫雷小游戏(最新完整版)
本文给大家介绍使用Java实现扫雷小游戏,本程序封装了五个类,分别是主类GameWin类,绘制底层地图和绘制顶层地图的类MapBottom类和MapTop类,绘制底层数字的类BottomNum类,以...
2024-07-12 编程技术
96

JavaScript开发数独游戏的完整步骤和实现过程
数独是一种起源于日本的逻辑推理游戏,凭借其简单的规则和深刻的逻辑性在全球范围内广受欢迎。作为一名程序员,使用JavaScript开发一个数独游戏不仅可以锻炼编程技巧,还能提...
2024-07-04 编程技术
89

使用HTML+JavaScript实现贪吃蛇游戏(附示例代码)
贪吃蛇游戏是一款经典的休闲游戏,许多人童年时都在各种电子设备上玩过。通过HTML和JavaScript,我们可以创建一个简单但功能齐全的贪吃蛇游戏。本文将详细介绍如何使用HTML和...
2024-07-03 编程技术
97

python和JavaScript的正则表达式详细使用对比
正则表达式是对字符串提取的一套规则,我们把这个规则用正则里面的特定语法表达出来,去匹配满足这个规则的字符串,这篇文章主要给大家介绍了关于python和JavaScript正则表达式详...
2024-06-16 编程技术
51

15款必备的JavaScript开发工具推荐
JavaScript 开发工具多种多样,这些工具可以增强 JavaScript 应用程序的功能,提高 JavaScript 开发效率。本文为大家推荐15款必备的 JavaScript 开发工具,包括 IDE、框架和库...
2024-05-08 编程技术
53

xml2js:一款实现xml转json的JavaScript开源库
xml2js是一个用于将 XML 文档转换为 JavaScript 对象的库。xml2js 提供了一个简单的 API 来解析 XML 数据,并将其转换为 JSON 或者纯 JavaScript 对象。在本文中,我们将简单...
2024-04-29 编程技术
61