JavaScript編寫猜拳游戲
更新時間：2021年11月01日 17:16:31 作者：帝國吾愛
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫猜拳游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript編寫猜拳游戲的具體代碼，供大家參考，具體內(nèi)容如下
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<script rel="script" src="js1.js"></script>
<style>
#Div {
width: 1000px;
height: 700px;
position: relative;
border-style: groove;
border-width: 2px;
}
/*猜拳區(qū)*/
#area {
width: 300px;
height: 200px;
background-color: #011bfd;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
/*顯示區(qū)*/
#results {
width: 400px;
height: 50px;
background-color: #f7f8fd;
text-align:center;
font-size:30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*卡牌石頭*/
#stone {
width: 100px;
height: 150px;
background-color: #011bfd;
position: absolute;
top: 80%;
left: 30%;
transform: translate(-50%, -50%);
}
/*卡牌剪刀*/
#scissors {
width: 100px;
height: 150px;
background-color: #011bfd;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
/*卡牌布*/
#cloth {
width: 100px;
height: 150px;
background-color: #011bfd;
position: absolute;
top: 80%;
left: 70%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="Div">
<div id="area"></div>
<div id="results"></div>
<div id="stone" draggable="true"></div>
<div id="scissors" draggable="true"></div>
<div id="cloth" draggable="true"></div>
</div>
<script rel="script">
show();
</script>
</body>
</html>
JavaScript 代碼：
/***
area 區(qū)域
stone 石頭 石頭 = 石頭 石頭 > 剪刀 石頭 < 布
scissors 剪刀 剪刀 < 石頭 剪刀 = 剪刀 剪刀 > 布
cloth 布 布 > 石頭 布 < 剪刀 布 = 布
***/
/***
查看數(shù)據(jù)類型：Object.prototype.toString.call(變量)
刷新局部：window.location.reload('#area');
***/
function Init () {
//獲取并且綁定HTML的ID,返回HTML格式（HTMLDivElement）
const area = document.querySelector("#area");
const results = document.querySelector("#results");
const stone = document.querySelector("#stone");
const scissors = document.querySelector("#scissors");
const cloth = document.querySelector("#cloth");
//定義拖拽的卡牌
let ondragstart_ID = null
//猜拳類型編寫成數(shù)組
const random_Action = ['stone', 'scissors', 'cloth'];
//隨機(jī)獲取數(shù)組中的一個數(shù)組的鍵
const random_Digital = Math.round(Math.random() * (random_Action.length - 1) + 1);
//獲取數(shù)組中的鍵值，如數(shù)組random_Action中的'stone'（random_Action[0]）
const random_Value = random_Action[random_Digital-1];
//編寫猜拳類型的方法
function attribute (parameter) {
//鼠標(biāo)移入時（猜拳卡片變大）
parameter.onmouseover = function () {
this.style.height = '200px';
this.style.width = '150px';
}
//鼠標(biāo)移出時（猜拳卡片恢復(fù)初始狀態(tài)）
parameter.onmouseleave = function () {
this.style.height = '150px';
this.style.width = '100px';
}
//元素開始拖動時（猜拳卡片變透明）
parameter.ondragstart = function () {
this.style.opacity = '0.3';
ondragstart_ID = parameter.id
}
}
//創(chuàng)建猜拳類型的對象，給猜拳對象的屬性賦值
this.show_attribute = function () {
attribute(stone)
attribute(scissors)
attribute(cloth)
}
//編寫卡牌拖動事件
this.overout = function () {
//當(dāng)卡牌拖拽到area（猜拳區(qū)域）之上
area.ondragenter = function () {
//判斷隨機(jī)數(shù)random_Digital，不能等于null
if (random_Digital !== null) {
//判斷拖拽的卡牌
if (ondragstart_ID === 'stone') {
//判斷隨機(jī)數(shù)對等于哪一個
switch (random_Value) {
case stone.id:
results.innerHTML = 'stone = stone,平局！';
break;
case scissors.id:
results.innerHTML = 'stone > scissors,你贏了！';
break;
case cloth.id:
results.innerHTML = 'stone < cloth,你輸了！';
break;
default:
//刷新
window.location.reload();
}
//元素拖動結(jié)束（猜拳卡片恢復(fù)初始狀態(tài)）
stone.ondragend = function () {
this.style.opacity = '1';
}
//延遲1秒后刷新
setTimeout(function (){
window.location.reload();
}, 1000);
//判斷拖拽的卡牌
}else if (ondragstart_ID === 'scissors') {
//判斷隨機(jī)數(shù)對等于哪一個
switch (random_Value) {
case stone.id:
results.innerHTML = 'scissors < stone,你輸了！';
break;
case scissors.id:
results.innerHTML = 'scissors = scissors,平局！';
break;
case cloth.id:
results.innerHTML = 'scissors > cloth,你贏了！';
break;
default:
//刷新
window.location.reload();
}
//元素拖動結(jié)束（猜拳卡片恢復(fù)初始狀態(tài)）
scissors.ondragend = function () {
this.style.opacity = '1';
}
//延遲1秒后刷新
setTimeout(function (){
window.location.reload();
}, 1000);
//判斷拖拽的卡牌
}else if (ondragstart_ID === 'cloth') {
//判斷隨機(jī)數(shù)對等于哪一個
switch (random_Value) {
case stone.id:
results.innerHTML = 'cloth > stone,你贏了！';
break;
case scissors.id:
results.innerHTML = 'cloth < scissors,你輸了！';
break;
case cloth.id:
results.innerHTML = 'cloth = cloth,平局！';
break;
default:
//刷新
window.location.reload();
}
//元素拖動結(jié)束（猜拳卡片恢復(fù)初始狀態(tài)）
cloth.ondragend = function () {
this.style.opacity = '1';
}
//延遲1秒后刷新
setTimeout(function (){
window.location.reload();
}, 1000);
}
}
}
}
}
//調(diào)用函數(shù)
function show() {
const show_html = new Init();
show_html.show_attribute()
show_html.overout()
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)d的示例代碼
這篇文章主要介紹了elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
本文主要介紹了微信小程序動畫效果的實(shí)現(xiàn)方法與原理解析。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
本文主要介紹了原生js實(shí)現(xiàn)驗(yàn)證碼功能的實(shí)例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了基于javascript處理二進(jìn)制圖片流過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
點(diǎn)擊button獲取text內(nèi)容并改變樣式的js實(shí)現(xiàn)
這篇文章主要介紹了點(diǎn)擊button獲取text內(nèi)容并改變樣式的js實(shí)現(xiàn),經(jīng)測試非常實(shí)用，需要的朋友可以參考下2014-09-09
點(diǎn)擊按鈕清空頁面上所有的文本框、文本域，下面有個不錯的示例，大家可以參考下其具體實(shí)現(xiàn)2014-02-02
ES6代碼轉(zhuǎn)ES5詳細(xì)教程(babel安裝使用教程)
Babel 是一個廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在老版本的瀏覽器執(zhí)行，這意味著，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持，這篇文章主要介紹了ES6代碼轉(zhuǎn)ES5教程(babel安裝使用教程),需要的朋友可以參考下2023-01-01
JS循環(huán)遍歷ul中l(wèi)i的點(diǎn)擊事件給選中l(wèi)i添加css樣式(示例代碼)
對于一個ul中固定的li個數(shù)，當(dāng)點(diǎn)擊其中一個li時，改變選中l(wèi)i的顏色；同時改變對應(yīng)的另一個ul中l(wèi)i的顏色，怎么實(shí)現(xiàn)這個功能呢，下面小編給大家?guī)砹薺s循環(huán)遍歷ul中l(wèi)i的點(diǎn)擊事件，給給選中l(wèi)i添加css樣式，感興趣的朋友一起看看吧2023-07-07
JS操作input標(biāo)簽屬性checkbox全選的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS操作input標(biāo)簽屬性checkbox全選的代碼，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript中Promise類的使用方法，文中的示例代碼簡潔易懂，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2023-05-05