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