js實現簡單擲骰子小游戲

發布時間：2020-10-11 05:55:53 來源：腳本之家閱讀：252 作者：momobutong 欄目：web開發

本文實例為大家分享了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>

骰子圖：

js實現簡單擲骰子小游戲