JavaScript实现掷骰子小游戏

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

本文实例为大家分享了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
战地网
频繁记录吧,生活的本意是开心

相关推荐

JavaScript中forEach的几种用法详解
在处理数组时,JavaScript 提供了许多内置方法,其中 forEach 是最常用的方法之一。forEach 方法为数组中的每个元素执行一次提供的函数,使得遍历数组变得简单而高效。本文将...
2025-01-17 编程技术
192

JavaScript中Object.keys()的用法示例详解
在JavaScript中,Object.keys()方法是一个功能强大的工具,它允许开发者获取对象的所有可枚举属性名,并以数组的形式返回。这一特性使得Object.keys()在处理对象属性、字符串...
2025-01-04 编程技术
190

JavaScript中检查字符串是否包含某个字符的5种方法详解
在JavaScript编程中,检查字符串是否包含某个特定字符是一个常见的操作。无论是验证输入、处理文本,还是进行数据过滤,这一功能都具有广泛的应用场景。本文将介绍几种常用的...
2025-01-02 编程技术
232

HTML+JavaScript实现在线网页版扫雷游戏示例代码详解
​扫雷游戏是一款经典的益智游戏,通过点击方块揭示其是否为地雷,同时根据周围地雷的数量进行推断,最终成功避开所有地雷。下面,我们将通过HTML和JavaScript来实现一个基本...
2024-12-27 编程技术
246

JavaScript滚动条属性:scrollTop和scrollHeight详解
在Web开发过程中,处理滚动条的行为是一项常见的任务。无论是实现无限滚动效果,还是确保内容加载后滚动条保持在特定位置,了解并熟练运用JavaScript中的滚动条属性是必不可少...
2024-12-24 编程技术
279

JavaScript 数组方法:findIndex() 的使用技巧
在现代前端开发中,JavaScript 数组方法为我们提供了许多便捷的操作手段。其中,findIndex() 方法因其强大的查找能力和简洁的语法结构,成为了开发者们常用的工具之一。本文将...
2024-12-24 编程技术
220