JavaScript編寫猜拳游戲
更新時間:2021年11月01日 17:16:31 作者:帝國吾愛
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫猜拳游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了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)文章
JavaScript使用encodeURI()和decodeURI()獲取字符串值的方法
這篇文章主要介紹了JavaScript使用encodeURI()和decodeURI()獲取字符串值的方法,實例分析了encodeURI()和decodeURI()函數(shù)解析字符串的相關(guān)技巧,需要的朋友可以參考下2015-08-08javascript中的關(guān)于類型轉(zhuǎn)換的性能優(yōu)化
類型轉(zhuǎn)換是大家常犯的錯誤,因為JavaScript是動態(tài)類型語言,你不能指定變量的類型。2010-12-12分享12個Webpack中常用的Loader(小結(jié))
這篇文章主要介紹了分享12個Webpack中常用的Loader(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁面的實例代碼
這篇文章主要介紹了el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁面的實例代碼,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-01-01