基于JavaScript制作一個(gè)骰子游戲
游戲可以通過這個(gè)鏈接進(jìn)入
完整源碼我已經(jīng)放在GitHub上了
這節(jié)實(shí)驗(yàn)我們將使用 HTML、CSS 和 JavaScript 構(gòu)建一個(gè)骰子游戲。設(shè)置兩名玩家(一個(gè)人玩也行)然后擲骰子，獲得更高點(diǎn)數(shù)的玩家將贏得游戲。
知識(shí)點(diǎn)
- :hover 選擇器
- querySelector() 方法
- setAttribute() 方法
骰子 1-6 點(diǎn)的圖片都放在這里了，大家可以將這些圖片保存在本地的文件夾中然后用相對(duì)地址引用，或者也可以直接使用這些圖片地址。
HTML 部分
HTML 代碼用于設(shè)計(jì)項(xiàng)目的基本結(jié)構(gòu)，其中一個(gè) div 包含玩家姓名和初始骰子階段，另一個(gè) div 包含兩個(gè)按鈕（一個(gè)按鈕用于擲骰子，另一個(gè)按鈕用于編輯玩家姓名）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>使用 JavaScript 構(gòu)建骰子游戲</title>
</head>
<body>
<div class="container">
<h1>讓我們開始吧</h1>
<div class="dice">
<p class="Player1">玩家 1</p>
<img class="img1" src="dice6.png">
</div>
<div class="dice">
<p class="Player2">玩家 2</p>
<img class="img2" src="dice6.png">
</div>
</div>
<div class="container bottom">
<button type="button" class="butn" onClick="rollTheDice()">
擲骰子
</button>
</div>
<div class="container bottom">
<button type="button" class="butn" onClick="editNames()">
編輯玩家姓名
</button>
</div>
</body>
</html>
CSS 部分
在這里我們使用一些 CSS 屬性來設(shè)置骰子游戲的樣式。
<style>
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
margin: 10px;
}
body {
background-image: url(https://labfile.oss.aliyuncs.com/courses/8605/bg-451838.jpeg);
background-size: 100% 100%;
height: 95vh;
margin: 0;
}
h1 {
margin: 30px;
font-family: "Lobster", cursive;
text-shadow: 5px 0 #232931;
font-size: 4.5rem;
color: #4ecca3;
text-align: center;
}
p {
font-size: 2rem;
color: #4ecca3;
font-family: "Indie Flower", cursive;
}
img {
width: 100%;
}
.bottom {
padding-top: 30px;
}
.butn {
background: #4ecca3;
font-family: "Indie Flower", cursive;
border-radius: 7px;
color: #ffff;
font-size: 30px;
padding: 16px 25px 16px 25px;
text-decoration: none;
}
.butn:hover {
background: #232931;
text-decoration: none;
}
</style>:hover 選擇器可在鼠標(biāo)移到元素上時(shí)添加特殊樣式。
JavaScript 部分
JavaScript 代碼包含骰子游戲的兩個(gè)功能。第一個(gè)功能是在單擊按鈕后重命名玩家姓名。另一個(gè)功能是在單擊按鈕后擲骰子。雙方玩家擲骰子后，獲得點(diǎn)數(shù)最高的玩家將獲勝，如果兩個(gè)玩家獲得相同的相位值則游戲平局。
<script>
// 玩家姓名
var player1 = "Player 1";
var player2 = "Player 2";
// 改變玩家姓名的功能
function editNames() {
player1 = prompt("更改玩家 1 姓名");
player2 = prompt("更改玩家 2 姓名");
document.querySelector("p.Player1").innerHTML = player1;
document.querySelector("p.Player2").innerHTML = player2;
}
// 擲骰子的功能
function rollTheDice() {
//設(shè)置了一個(gè) 1000 毫秒的延遲
setTimeout(function () {
//生成 1-6 的隨機(jī)數(shù)
var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomNumber2 = Math.floor(Math.random() * 6) + 1;
//將骰子的圖片改成對(duì)應(yīng)隨機(jī)數(shù)
document.querySelector(".img1").setAttribute("src", "dice" + randomNumber1 + ".png");
document.querySelector(".img2").setAttribute("src", "dice" + randomNumber2 + ".png");
//兩個(gè)數(shù)相等
if (randomNumber1 === randomNumber2) {
//將 h1 的文本改為 "平局!"
document.querySelector("h1").innerHTML = "平局!";
} else if (randomNumber1 < randomNumber2) {
document.querySelector("h1").innerHTML = (player2 + "獲得勝利!");
} else {
document.querySelector("h1").innerHTML = (player1 + "獲得勝利!");
}
}, 1000);
}
</script>- querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個(gè)元素。
- setAttribute() 方法創(chuàng)建或改變某個(gè)新屬性。
到這里我們的骰子游戲就做好了，下面我給出了完整的源代碼，同學(xué)們可以下載下來試一試：
https://github.com/wanghao221/moyu
總結(jié)
相信通過上面的教程，大家已經(jīng)學(xué)會(huì)了如何使用 JavaScript 構(gòu)建骰子游戲。同時(shí)我們又學(xué)習(xí)/復(fù)習(xí)了一些知識(shí)，如：:hover 選擇器、querySelector()和setAttribute()方法等。
到此這篇關(guān)于基于JavaScript制作一個(gè)骰子游戲的文章就介紹到這了,更多相關(guān)JavaScript骰子游戲內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js defineSetter -給js的 "class"自動(dòng)增加一個(gè)set的屬性(方法)
js defineSetter -給js的 "class"自動(dòng)增加一個(gè)set的屬性(方法)...2007-06-06
這篇文章主要介紹了小程序兼容安卓和IOS數(shù)據(jù)處理問題及坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊文本框改變背景顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
swiper4實(shí)現(xiàn)移動(dòng)端導(dǎo)航欄tab滑動(dòng)切換
這篇文章主要為大家詳細(xì)介紹了swiper4實(shí)現(xiàn)移動(dòng)端導(dǎo)航欄tab滑動(dòng)切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
JavaScript代碼壓縮對(duì)代碼進(jìn)行一系列優(yōu)化處理,從而減小代碼的體積,提高網(wǎng)頁的加載速度,JavaScript代碼壓縮的原理包含去除代碼中的空格、注釋、不必要的換行符等無用字符,壓縮變量名、壓縮函數(shù)名等操作,將一些常見的操作(如+、-、*、/)轉(zhuǎn)換成更短的操作符(如@、^、#、|)2023-12-12
微信小程序scroll-view實(shí)現(xiàn)自定義滾動(dòng)條
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)自定義滾動(dòng)條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
原生js實(shí)現(xiàn)跨瀏覽器獲取鼠標(biāo)按鍵的值
e.button W3C是獲取鼠標(biāo)按鍵 0 表示左鍵 1表示中鍵 2表示右鍵 而IE瀏覽器則是 1表示左鍵 4表示中間 2表示右鍵 這里的IE瀏覽器主要是IE8以下的瀏覽器，感興趣的朋友可以參考下哈2013-04-04
非主流的textarea自增長(zhǎng)實(shí)現(xiàn)js代碼
今天稍微研究了下textarea隨輸入內(nèi)容自動(dòng)增長(zhǎng)的功能，通過google參考了一些實(shí)現(xiàn)方式2011-12-12
Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源，這篇文章主要介紹了JavaScript中Webpack的使用,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了最常用的三款JS時(shí)間特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08