JavaScript編寫(xiě)猜拳游戲
本文實(shí)例為大家分享了JavaScript編寫(xiě)猜拳游戲的具體代碼,供大家參考,具體內(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ù)類(lèi)型: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 //猜拳類(lèi)型編寫(xiě)成數(shù)組 const random_Action = ['stone', 'scissors', 'cloth']; //隨機(jī)獲取數(shù)組中的一個(gè)數(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]; //編寫(xiě)猜拳類(lèi)型的方法 function attribute (parameter) { //鼠標(biāo)移入時(shí)(猜拳卡片變大) parameter.onmouseover = function () { this.style.height = '200px'; this.style.width = '150px'; } //鼠標(biāo)移出時(shí)(猜拳卡片恢復(fù)初始狀態(tài)) parameter.onmouseleave = function () { this.style.height = '150px'; this.style.width = '100px'; } //元素開(kāi)始拖動(dòng)時(shí)(猜拳卡片變透明) parameter.ondragstart = function () { this.style.opacity = '0.3'; ondragstart_ID = parameter.id } } //創(chuàng)建猜拳類(lèi)型的對(duì)象,給猜拳對(duì)象的屬性賦值 this.show_attribute = function () { attribute(stone) attribute(scissors) attribute(cloth) } //編寫(xiě)卡牌拖動(dòng)事件 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ù)對(duì)等于哪一個(gè) 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(); } //元素拖動(dòng)結(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ù)對(duì)等于哪一個(gè) 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(); } //元素拖動(dòng)結(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ù)對(duì)等于哪一個(gè) 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(); } //元素拖動(dòng)結(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() }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript使用encodeURI()和decodeURI()獲取字符串值的方法
這篇文章主要介紹了JavaScript使用encodeURI()和decodeURI()獲取字符串值的方法,實(shí)例分析了encodeURI()和decodeURI()函數(shù)解析字符串的相關(guān)技巧,需要的朋友可以參考下2015-08-08js 獲取html5的data屬性實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 獲取html5的data屬性實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07javascript中的關(guān)于類(lèi)型轉(zhuǎn)換的性能優(yōu)化
類(lèi)型轉(zhuǎn)換是大家常犯的錯(cuò)誤,因?yàn)镴avaScript是動(dòng)態(tài)類(lèi)型語(yǔ)言,你不能指定變量的類(lèi)型。2010-12-12JS 兩個(gè)字符串時(shí)間的天數(shù)差計(jì)算
本文為大家介紹下兩個(gè)字符串時(shí)間的天數(shù)差的計(jì)算公式,感興趣的朋友可以參考下2013-08-08JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)設(shè)置頁(yè)面css樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09分享12個(gè)Webpack中常用的Loader(小結(jié))
這篇文章主要介紹了分享12個(gè)Webpack中常用的Loader(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03el表達(dá)式 寫(xiě)入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼
這篇文章主要介紹了el表達(dá)式 寫(xiě)入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-01-01