js實現(xiàn)簡單擲骰子小游戲
更新時間：2019年10月24日 14:13:41 作者：momobutong
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單搖篩子小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js擲骰子小游戲的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)方法：
方法一：通過background-position、background-image、backg-repeat三個屬性以及jquery animate()方法改變背景骰子圖來實現(xiàn)圖片切換。
PS：調(diào)整background-position比較麻煩，由于背景是一張包含各個點數(shù)以及旋轉(zhuǎn)時骰子的整圖
方法二：設置定時調(diào)整css樣式background-image。
PS：實現(xiàn)簡單，但是視覺效果不佳
<!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>
骰子圖：
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于Web?Components實現(xiàn)一個日歷原生組件
這篇文章主要為大家詳細介紹了如何利用Web?Components實現(xiàn)一個簡單的日歷原生組件，文中的示例代碼講解詳細，需要的小伙伴可以了解一下2023-07-07
這篇文章主要介紹了js動態(tài)添加帶圓圈序號列表的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實例代碼
本文通過實例代碼給大家介紹了Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-06-06
這篇文章主要為大家詳細介紹了js自定義input文件上傳樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要為大家詳細介紹了Bootstrap下拉菜單效果實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了JavaScript事件用法,較為詳細的分析了javascript事件流、事件類型及事件操作技巧,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了淺談JavaScript 代碼整潔之道，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要為大家介紹了后端開發(fā)中的代碼如何規(guī)范避免數(shù)組下標越界示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
瀏覽器目前來說是沒有抗鋸齒效果的(將來不一定哦)，這樣dom元素外觀的改變就被限制在1個像素為最佳效果。2009-09-09