js實(shí)現(xiàn)石頭剪刀布游戲
前言
用戶選擇出石頭剪刀布，電腦系統(tǒng)隨機(jī)生成石頭剪刀布，然后判斷結(jié)果并顯示給用戶
一、實(shí)現(xiàn)效果
二、使用步驟
1.HTML和CSS
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>石頭剪刀布</title> <style> #bigbox{ width: 600px; height: 600px; background: slateblue; margin: 0 auto; } #bigbox>h1{ width: 100%; text-align: center; color: #ffffff; } .box1{ height: 200px; } .box2{ height: 220px; } .box1 img{ float: left; margin: 25px; } .box2 img{ float: left; margin:20px 63px; width: 150px; height: 150px; } .box2 h1{ display: block; color: #000; float: left; line-height: 150px; } img{ width: 150px; height: 150px; } p{ text-align: center; color: red; font-size: 20px; font-weight: bold; } .text{ height: 20px; } .text span{ font-size: 20px; color: #ffffff; margin: 0 100px; line-height: 20px; } </style></head><body> <div id=’bigbox’> <h1>請(qǐng)選擇</h1> <div class='box1'> <img src='http://www.intensediesel.com/img/shitou.png' alt=''> <img src='http://www.intensediesel.com/img/jiandao.png' alt=''> <img src='http://www.intensediesel.com/img/bu.png' alt=''> </div> <div class='text'> <span>您選擇了</span> <span>系統(tǒng)選擇了</span> </div> <div class='box2'> <img src='http://www.intensediesel.com/img/undefined.png' alt=''> <h1>pk</h1> <img src='http://www.intensediesel.com/img/undefined.png' alt=''> </div> <p>結(jié)果顯示中。。。</p> </div></body>
2.JavaScript
<script> let imgs=document.getElementsByTagName(’img’) // console.log(imgs.length) for(let i=0;i<3;i++){ imgs[i].onclick=function(){ game(this,i) } } function game(src,i){ // console.log(i) //用戶 let str=src.src; let user=document.getElementsByTagName(’img’)[3] user.src=str//系統(tǒng) setTimeout(function (){ let user=document.getElementsByTagName(’img’)[4] let imgSrc=[’../img/shitou.png’,’../img/jiandao.png’,’../img/bu.png’] let num = Math.floor(Math.random() * imgSrc.length) console.log(num) user.src=imgSrc[num] i=i*1 //結(jié)果 let rs=document.getElementsByTagName(’p’)[0] if(i==0&&num==1 || i==1&&num==2 || i==2&&num==0){rs.innerHTML='恭喜你獲得勝利！' }else if(i==num){rs.innerHTML='平局，請(qǐng)?jiān)賮?lái)一次吧' }else{rs.innerHTML='不好意思，游戲失敗' } },200) } </script>
總結(jié)
利用數(shù)組，將石頭剪刀布src地址保存，利用隨機(jī)數(shù)將生成0-2的任意數(shù)字，電腦延時(shí)0.2秒生成。用戶利用for循環(huán)將照片綁定onclick（），點(diǎn)擊圖片，用戶選擇圖片修改為當(dāng)前圖片。創(chuàng)建參數(shù)函數(shù)，傳入數(shù)組標(biāo)，以及this對(duì)象。通過(guò)this.src改變用戶選擇的顯示圖片，將數(shù)組下標(biāo) 與隨機(jī)數(shù)進(jìn)行條件判斷。0代表石頭，1代表剪刀，2代表布。生成結(jié)果操作dom’進(jìn)行顯示
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲2. ASP.NET MVC遍歷驗(yàn)證ModelState的錯(cuò)誤信息3. jsp實(shí)現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫(kù)的方法4. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向5. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法6. asp中response.write("中文")或者js中文亂碼問(wèn)題7. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法8. PHP設(shè)計(jì)模式中工廠模式深入詳解9. 刪除docker里建立容器的操作方法10. asp(vbs)Rs.Open和Conn.Execute的詳解和區(qū)別及&H0001的說(shuō)明
網(wǎng)公網(wǎng)安備