js實(shí)現(xiàn)簡單擲骰子小游戲
更新時(shí)間：2019年10月24日 14:13:41 作者：momobutong
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單搖篩子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js擲骰子小游戲的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)方法：
方法一：通過background-position、background-image、backg-repeat三個(gè)屬性以及jquery animate()方法改變背景骰子圖來實(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)簡單，但是視覺效果不佳
<!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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript布爾運(yùn)算符原理使用解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
下面小編就為大家?guī)硪黄猨s禁止瀏覽器頁面后退功能的實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
JavaScript讓IE瀏覽器event對象符合W3C DOM標(biāo)準(zhǔn)
IE瀏覽器event對象跟W3C實(shí)現(xiàn)的不一樣.所以自己封裝一個(gè)EventUtil類來讓IE瀏覽器的event對象與W3C一樣.2009-11-11
生命周期是指一個(gè)對象從創(chuàng)建→>運(yùn)行>銷毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段，文中介紹了小程序中組件的生命周期，需要的朋友可以參考下2023-03-03
這篇文章主要為大家分享了js事件委托和事件代理案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
使用js實(shí)現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了使用javascript實(shí)現(xiàn)數(shù)據(jù)格式化為字符串，非常的實(shí)用，這里推薦給有相同需求的小伙伴。2014-12-12
javascript每日必學(xué)之多態(tài)，介紹了有關(guān)多態(tài)的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下2016-02-02
在瀏覽器中對于Dom的操作和普通的腳本的操作處于兩個(gè)不同的dll中，兩個(gè)dll的交互是比較耗時(shí)的，優(yōu)化對Dom的操作可以提高腳本的執(zhí)行速度。本文是對如何優(yōu)化的一些總結(jié)。下面跟著小編一起來看下吧2017-01-01
在項(xiàng)目中我們會(huì)遇到一次請求多個(gè)接口,當(dāng)所有請求結(jié)束后進(jìn)行操作,也會(huì)遇到多個(gè)請求（大量）同時(shí)進(jìn)行請求資源,這篇文章主要給大家介紹了關(guān)于前端如何控制并發(fā)請求舉例的相關(guān)資料,需要的朋友可以參考下2024-09-09
工作小知識積累，獲取圖片的大小，需要的朋友可以參考下。2011-09-09