基于JS編寫一個看字說顏色小游戲

第基于JS編寫一個看字說顏色小游戲目錄前言一、游戲介紹與規(guī)則二、大體設計與代碼講解①看圖模式具體思路核心代碼②答題模式具體思路核心代碼三、倉庫地址與體驗地址

前言

最近偷懶，一直沒開工參與游戲活動的文章。終于在這幾天，整理了一下之前微信小程序?qū)懞玫目醋终f顏色（小程序名：工具寶盒），整理出來弄了個html版本。（分成了兩個小模式）

同時，趁著這次機會，把我做的《看字說顏色》小游戲，給大家也講解講解我的思路。（該游戲設計完全筆者自己想出來的~歡迎大家一起討論，或者有更好的想法也可提出~再多嘴一句，筆者是后端java，所以前端會有點拉~望大佬多多包涵~）

一、游戲介紹與規(guī)則

游戲名稱：《看字說顏色》

游戲模式：①看圖模式②答題模式

游戲規(guī)則：①看圖模式，根據(jù)窗體生成的字與字體顏色，說出對應的字體顏色。（字是干擾項）②答題模式，根據(jù)題目要求；選出正確答案。

干擾等級：入門（5種顏色）、初級（8種顏色）、中級（10種顏色）、高級（12種顏色）

二、大體設計與代碼講解

①看圖模式

具體思路

首先，定義顏色對應的字、和對應顏色的十六進制（這里是有12種顏色）

封裝一個方法獲取一個字（顏色）與一個不對應顏色的十六進制（如：藍（#000000），就是顯示藍字，字體顏色是黑色）

設置對應等級，生成生成二維表格（入門：5種顏色，5x5；初級：8種顏色，8x8；中級：10種顏色，10x10；高級：12種顏色，12x12.）

開搞！

核心代碼

定義設置顏色(12種顏色)

//定義設置顏色(12種顏色)

letcolorNameList=['紅','綠','藍','黃','黑','白','灰','紫','粉','青','橙','棕'];

//對應顏色的十六進制

letcolorHexList=['#FF0000','#00FF00','#0000FF','#FFFF00','#000000','#FFFFFF',

'#999999','#9933FF','#ff00cc','#65ffcd','#ffa500','#D2691E'];

//顏色對應的map形式

letcolorMap={

'紅':'#FF0000','綠':'#00FF00','藍':'#0000FF','黃':'#FFFF00',

'黑':'#000000','白':'#FFFFFF','灰':'#999999','紫':'#9933FF',

'粉':'#ff00cc','青':'#65ffcd','橙':'#ffa500','棕':'#D2691E'

}

封裝獲取一個字和不對應字體顏色的方法

/獲取一個顏色對象

functiongetRandomColor(size){

//size是傳入的等級所用的參數(shù)

//console.log(size)

varnumHex=Math.floor(Math.random()*size);

varnumName=Math.floor(Math.random()*size);

if(numHex==numName){//避免“字”和“字”的顏色相同

if(numHex1numHexsize){

numHex-=2;

}else{

numHex+=2;

varcolor={

colorHex:colorHexList[numHex],

colorName:colorNameList[numName],

numHex:numHex,

numName:numName

returncolor;//可均衡獲取0到9的隨機整數(shù).

}

獲取二維表格（畫圖）

//獲取二維坐標系（畫“圖”）

functiongetTwoArray(size){

//console.log(e);

vartextList=newArray();

for(vari=0;isize;i++){

textList[i]=newArray();

//console.log(textList)

vartextStr="";

for(vari=0;isize;i++){

if(i%2==0){

textStr+="div

}else{

textStr+="div

for(varj=0;jsize;j++){

vartheColor=getRandomColor(size);

textList[i][j]=theColor;

textStr+="spanstyle='color:"+theColor.colorHex+"'"+theColor.colorName+"/span

textStr+="/div

returntextStr;//可均衡獲取0到9的隨機整數(shù).

}

圖片模式操作

//顯示圖片模式

functionbindImg(){

vartraget=document.getElementById("show-img-div");

varbtnList=document.getElementsByClassName("nfz-btn");

if(traget.style.display=="none"){

traget.style.display="block";

that.bindBtn(btnList);

}else{

traget.style.display="none";

that.bindBtn(btnList);

//圖片模式顯示對應的

functionshowImg(e){

varsize=e.getAttribute("data-value");

size=parseInt(size);

that.bindImg();

constcolorList=getTwoArray(size);

//console.log(colorList);

varimgBody=document.getElementById("imgBody");

imgBody.innerHTML=colorList;

}

禁止其他按鈕

//禁止按鈕

functionbindBtn(btnList){

for(varbtnofbtnList){

btn.disabled=!btn.disabled;

}

②答題模式

首先，需要在圖片模式的基礎下（除了圖片模式操作的方法）。同樣的，需要有定義顏色對應的字、和對應顏色的十六進制（這里是有12種顏色）

封裝一個方法獲取一個字（顏色）與一個不對應顏色的十六進制（如：藍（#000000），就是顯示藍字，字體顏色是黑色）

還需要定義顏色下標、選項等等一些相關操作（具體可以看代碼注釋）

封裝獲取題的方法、點擊選項方法、下一道題、顯示分數(shù)、重置游戲...

開搞！

相關需要定義的參數(shù)

//這里還有前面定義的顏色，就不重復寫入這里了（可參考完整代碼）

//顏色下標（方便記錄，去掉相同顏色，避免出現(xiàn)相同顏色）

varnumberList=[0,1,2,3,4,5,6,7,8,9,10,11];

//console.log(colorMap);

varoptList=["A","B","C","D"];//選項

varmsg="";//提示語

varisNext=true;//是否下一題

varoptRightNum=0;//正確答案下標

letquestionNumber=10;//默認題目數(shù)量10（下標從0開始）

lettheQuerstionNumber=0;//題目數(shù)

lettheResultNum=0;//分數(shù)

vartheRightNum=0;//正確選項

顯示答題模式

//顯示答題

functionshowQuestion(e){

that.bindQuestion();

if(ee.getAttribute("data-value")){

questionNumber=e.getAttribute("data-value");

varquestionNum=document.getElementById("questionNum");

questionNum.innerHTML=questionNumber;

that.getQuestion();

}

來一道題

//來一道題

functiongetQuestion(){

optRightNum=Math.floor(Math.random()*4);//正確答案下標（獲取隨機數(shù)0~3）

varsize=questionNumber;

size=parseInt(size);

vartheColor=getRandomColor(size);

//console.log(theColor);

//for(vari=0;iquestionNumber;i++){

varnum=Math.floor(Math.random()*2);//隨機獲取0or1；為0時候是讀字；為1時是讀顏色

vartitleStr=theQuerstionNumber+"、題目：";

//console.log(num)

if(num==0){

titleStr+="選擇該字對應的文字";

theRightNum=theColor.numName;

}else{

titleStr+="選擇該字對應的顏色";

theRightNum=theColor.numHex;

titleStr+="divstyle='color:"+theColor.colorHex+"'"+theColor.colorName+"/div

//console.log(titleStr);

//}

varthemDiv=document.getElementById("opt-them");

vartitleDiv=document.getElementById("opt-title");

titleDiv.innerHTML=titleStr;

varnewNumList=[].concat(numberList);

newNumList.splice(theRightNum,1);//刪除正確答案的下標（防止出現(xiàn)相同答案）

//console.log("numberList",numberList);

//console.log("newNumList",newNumList);

//console.log(newNumList.length);

varoptStr="div

for(vari=0;ii++){

optStr+="divdata-value='"+i+"'"+optList[i]+".";

varcolorNum=Math.floor(Math.random()*newNumList.length);

if(i==optRightNum){

optStr+=colorNameList[theRightNum];

optStr+="/div

continue;

optStr+=colorNameList[newNumList[colorNum]];

newNumList.splice(colorNum,1);//刪除已出現(xiàn)過的選項的下標（防止出現(xiàn)相同選項）

optStr+="/div

optStr+="/div

//console.log(optStr);

//console.log("正確答案:"+(optRightNum+1));

themDiv.innerHTML=optStr;

}

點擊選擇選項答案

//點擊選項方法（事件)

functiononclickOpt(e){

if(!isNext){//當前狀態(tài)不能進行下一題

return;

varresult=document.getElementById("result");

vartheOpt="";

if(ee.getAttribute("data-value")){

theOpt=e.getAttribute("data-value");

}else{

return;

isNext=false;

if(optRightNum==theOpt){

theResultNum++;

result.innerHTML=theResultNum;

//console.log("選擇正確！");

msg="選擇正確！";

}else{

//console.log("選擇錯誤！");

msg="選擇錯誤！";

if(theQuerstionNumber==questionNumber){

msg="游戲結(jié)束！一共："+question