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