JavaScript实现掷骰子小游戏的两种方法

作者：交互手记

时间：2026-10-23

本文介绍使用JavaScript实现掷骰子小游戏的两种主要方法。第一种利用jQuery animate()结合background-position切换背景图，视觉效果较好但调整繁琐；第二种通过定时修改background-image实现，代码简单但视觉体验一般。文章提供了完整的HTML、CSS及JS代码示例，适合前端初学者参考学习。

文章目录

本文分享了一个使用JavaScript实现的掷骰子小游戏完整代码，供读者参考学习。

掷骰子游戏的两种实现方法

具体实现方式主要有以下两种：

方法一：利用background-position、background-image和background-repeat这三个CSS属性，配合jQuery的animate()方法，通过改变背景图片的位置来实现骰子点数的切换效果。

需要注意的是，调整background-position相对较为繁琐，因为背景图片是一张包含所有点数以及旋转动画帧的整图。

方法二：通过设置定时器，动态调整CSS样式中的background-image属性。

这种方式的优点是实现简单，但缺点是视觉效果相对较差。

完整代码示例


<!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>