js仿3366小游戲選字游戲
更新時間:2016年04月14日 14:53:44 投稿:lijiao
這篇文章主要為大家詳細介紹了js仿3366小游戲選字游戲
本文實例為大家分享了js仿3366小游戲中“你是色盲嗎”游戲,大家先來挑戰(zhàn)一下
游戲目標: 按畫面中出現(xiàn)的文字的顏色來選擇顏色,千萬不要被顏色的困局打擾,眼睛一定要放亮哦,游戲開始時會有10分,每答對一題得一分,總共有10分,時間用完游戲會結(jié)束。
操作說明: 鼠標點擊選擇顏色
1、效果圖:
原圖:
模仿:
代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap { width: 400px; height: 600px; border: 1px solid black; margin: 0 auto; } .head { width: 100%; height: 50px; overflow: hidden; } .time { float: left; width: 150px; height: 100%; line-height: 50px; font-size: 20px; text-align: center; } .score { width: 150px; height: 100%; float: right; line-height: 50px; font-size: 20px; /*text-align: center;*/ } .middle { width: 100%; height: 450px; } .text { width: 100%; height: 300px; font-size: 200px; text-align: center; line-height: 300px; } .alert { width: 80%; height: 150px; margin: 0 auto; text-indent: 2em; font-size: 25px; } .bottom { width: 100%; height: 100px; overflow: hidden; } .bottomText { width: 20%; height: 100px; float: left; text-align: center; line-height: 100px; font-size: 70px; cursor: pointer; } </style> </head> <body> <div class="wrap"> <div class="head"> <div class="time">時間:10s</div> <div class="score">分數(shù) :0</div> </div> <div class="middle"> <div class="text">藍</div> <div class="alert">根據(jù)上面的字的顏色從下面選擇正確的字,選擇正確自動開始</div> </div> <div class="bottom"> <div class="bottomText">紅</div> <div class="bottomText">綠</div> <div class="bottomText">黑</div> <div class="bottomText">藍</div> <div class="bottomText">黃</div> </div> </div> </body> <script type="text/javascript"> //變化的核心 獲得不重復的亂序數(shù)組(數(shù)組中下標值) function random(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; } //不重復的數(shù)組 function randomArr() { var arr = []; while (arr.length < 5) { var temp = random(0, 4); if (arr.indexOf(temp) == -1) { arr.push(temp); } } return arr; } function fresh() { //中間字 變化 var textIndex = random(0, 4); colorIndex = random(0, 4); textDiv.innerHTML = textArr[textIndex]; textDiv.style.color = colorArr[colorIndex]; //獲取亂序下標數(shù)組 var textRandoms = randomArr(); var colorRandoms = randomArr(); for (var i = 0; i < bottomDivs.length; i++) { //通過亂序下標獲取文本,賦值給div bottomDivs[i].innerHTML = textArr[textRandoms[i]]; bottomDivs[i].style.color = colorArr[colorRandoms[i]]; //保存亂序下標 bottomDivs[i].index = textRandoms[i]; } } var textDiv = document.querySelector(".text"); var bottomDivs = document.querySelectorAll(".bottomText"); var timeDiv = document.querySelector(".time"); var scoreDiv = document.querySelector(".score"); var alertDiv = document.querySelector(".alert"); var textArr = ["紅", "綠", "藍", "黃", "黑"]; var colorArr = ["red", "green", "blue", "yellow", "black"]; var colorIndex=0; var timer = null; var isplaying = false; var countDown = 10; var score = 0; fresh(); for (var i = 0; i < bottomDivs.length; i++) { bottomDivs[i].onclick = function(){ //判斷 if(colorIndex == this.index &&countDown!=0 ){ //刷新 score ++; isplaying =true; //分數(shù)增加 fresh(); scoreDiv.innerHTML = "分數(shù): "+score ; alertDiv.style.opacity = 0; }else if(colorIndex != this.index &&isplaying){ //點錯時間減小 countDown --; //更新時間變化 timeDiv.innerHTML = "時間: " + countDown +"s"; //判斷清理定時器 if(countDown <= 0){ clearInterval(timer); isplaying = false; } } } } //定時器,監(jiān)聽游戲進行 timer = setInterval(function(){ if(isplaying){ countDown --; timeDiv.innerHTML = "時間: " + countDown +"s"; if(countDown <= 0){ clearInterval(timer); isplaying =false; alert("game over!!"); } //停止游戲 }else{ } },1000); </script> </html>
以上就是本文的全部內(nèi)容,希望大家能夠挑戰(zhàn)成功。
相關文章
layui使用templet格式化表格數(shù)據(jù)的方法
今天小編就為大家分享一篇layui使用templet格式化表格數(shù)據(jù)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript 雙向鏈表操作實例分析【創(chuàng)建、增加、查找、刪除等】
這篇文章主要介紹了JavaScript 雙向鏈表操作,結(jié)合實例形式分析了JavaScript雙向鏈表的創(chuàng)建、增加、查找、刪除等相關操作技巧,需要的朋友可以參考下2020-04-04JavaScript面試必備之垃圾回收機制和內(nèi)存泄漏詳解
垃圾回收機制和內(nèi)存泄漏是JavaScript面試時常常問到的問題,這篇文章就為大家詳細整理了他們的相關知識,感興趣的小伙伴可以跟隨小編一起了解一下2023-05-05