基于JS怎么編寫看字說顏色小游戲

本篇內容介紹了“基于JS怎么編寫看字說顏色小游戲”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、游戲介紹與規則

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

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

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

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

二、大體設計與代碼講解

① 看圖模式

具體思路

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

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

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

開搞！

核心代碼

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

// 定義設置顏色(12種顏色) 
let colorNameList = ['紅', '綠', '藍', '黃', '黑', '白', '灰', '紫', '粉', '青', '橙', '棕'];
// 對應顏色的十六進制
let colorHexList = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#000000', '#FFFFFF',
'#999999', '#9933FF', '#ff00cc', '#65ffcd', '#ffa500', '#D2691E'];
// 顏色對應的map形式
let colorMap = {
    '紅': '#FF0000','綠': '#00FF00','藍': '#0000FF','黃': '#FFFF00',
    '黑': '#000000','白': '#FFFFFF','灰': '#999999','紫': '#9933FF',
    '粉': '#ff00cc','青': '#65ffcd','橙': '#ffa500','棕': '#D2691E'
}

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

/ 獲取一個顏色對象
function getRandomColor(size) {
    // size是傳入的等級所用的參數
    // console.log(size)
    var numHex = Math.floor(Math.random() * size);
    var numName = Math.floor(Math.random() * size);
    if (numHex == numName) { // 避免“字”和“字”的顏色相同
        if (numHex > 1 && numHex < size) {
            numHex -= 2;
        } else {
            numHex += 2;
        }
    };
    var color = {
        colorHex: colorHexList[numHex],
        colorName: colorNameList[numName],
        numHex: numHex,
        numName: numName
    }
    return color; // 可均衡獲取 0 到 9 的隨機整數.
}

獲取“二維表格”（畫“圖”）

// 獲取二維坐標系（畫“圖”）
function getTwoArray(size) {
    // console.log(e);
    var textList = new Array();
    for (var i = 0; i < size; i++) {
        textList[i] = new Array();
    }
    // console.log(textList)
    var textStr = "";
    for (var i = 0; i < size; i++) {
        if (i % 2 == 0) {
            textStr += "<div style='background: #cce8f5;margin:0px;'>";
        } else {
            textStr += "<div style='background: #ffd4d4;margin:0px;'>";
        }
        for (var j = 0; j < size; j++) {
            var theColor = getRandomColor(size);
            textList[i][j] = theColor;
            textStr += "<span class='the-color-span' style='color:" + theColor.colorHex + "'>" + theColor.colorName + "</span>";
        }
        textStr += "</div>";
    }
    return textStr; // 可均衡獲取 0 到 9 的隨機整數.
}

圖片模式操作

// 顯示圖片模式
function bindImg() {
    var traget = document.getElementById("show-img-div");
    var btnList = document.getElementsByClassName("nfz-btn");
    if (traget.style.display == "none") {
        traget.style.display = "block";
        that.bindBtn(btnList);
    } else {
        traget.style.display = "none";
        that.bindBtn(btnList);
    }
}

// 圖片模式顯示對應的
function showImg(e) {
    var size = e.getAttribute("data-value");
    size = parseInt(size);
    that.bindImg();
    const colorList = getTwoArray(size);
    // console.log(colorList);
    var imgBody = document.getElementById("imgBody");
    imgBody.innerHTML = colorList;
}

禁止其他按鈕

// 禁止按鈕
function bindBtn(btnList) {
    for (var btn of btnList) {
        btn.disabled = !btn.disabled;
    }
}

② 答題模式

具體思路

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

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

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

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

開搞！

核心代碼

相關需要定義的參數

// 這里還有前面定義的顏色，就不重復寫入這里了（可參考完整代碼）
// 顏色下標（方便記錄，去掉相同顏色，避免出現相同顏色）
var numberList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
// console.log(colorMap);
var optList = ["A", "B", "C", "D"];// 選項
var msg = ""; // 提示語
var isNext = true; // 是否下一題
var optRightNum = 0; // 正確答案下標
let questionNumber = 10; // 默認題目數量 10（下標從0開始）
let theQuerstionNumber = 0; // 題目數
let theResultNum = 0; // 分數
var theRightNum = 0; // 正確選項

顯示答題模式

// 顯示答題
function showQuestion(e) {
    that.bindQuestion();
    if (e && e.getAttribute("data-value")) {
        questionNumber = e.getAttribute("data-value");
    }
    var questionNum = document.getElementById("questionNum");
    questionNum.innerHTML = questionNumber;
    that.getQuestion();
}

來一道題

// 來一道題
function getQuestion() {
    optRightNum = Math.floor(Math.random() * 4); // 正確答案下標（獲取隨機數0~3）
    var size = questionNumber;
    size = parseInt(size);
    var theColor = getRandomColor(size);
    // console.log(theColor);
    // for(var i =0;i<questionNumber;i++){
    var num = Math.floor(Math.random() * 2); // 隨機獲取0 or 1；為0時候是讀字；為1時是讀顏色
    var titleStr = theQuerstionNumber + "、題目：";
    // console.log(num)
    if (num == 0) {
        titleStr += "選擇該字對應的文字";
        theRightNum = theColor.numName;
    } else {
        titleStr += "選擇該字對應的顏色";
        theRightNum = theColor.numHex;
    }
    titleStr += "<div class='the-title-span' style='color:" + theColor.colorHex + "'>" + theColor.colorName + "</div>";

    // console.log(titleStr);
    // }
    var themDiv = document.getElementById("opt-them");
    var titleDiv = document.getElementById("opt-title");
    titleDiv.innerHTML = titleStr;

    var newNumList = [].concat(numberList);

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

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

    var optStr = "<div class='opt-them'>";

    for (var i = 0; i < 4; i++) {
        optStr += "<div class='opt-item' onclick='onclickOpt(this)' data-value='" + i + "'>" + optList[i] + ". ";
        var colorNum = Math.floor(Math.random() * newNumList.length);
        if (i == optRightNum) {
            optStr += colorNameList[theRightNum];
            optStr += "</div>";
            continue;
        }
        optStr += colorNameList[newNumList[colorNum]];
        newNumList.splice(colorNum, 1); // 刪除已出現過的選項的下標（防止出現相同選項）
        optStr += "</div>";
    }
    optStr += "</div>";
    // console.log(optStr);
    // console.log("正確答案:"+(optRightNum+1));
    themDiv.innerHTML = optStr;
}

點擊選擇選項答案

// 點擊選項方法（事件)
function onclickOpt(e) {
    if (!isNext) { // 當前狀態不能進行下一題
        return;
    }
    var result = document.getElementById("result");
    var theOpt = "";
    if (e && e.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 = "游戲結束！一共：" + questionNumber + "題；<br>您的最終得分是：" + theResultNum;
        that.bindShowResult(msg);
        return;
    }
    that.bindShowResult(msg);
}

顯示分數、重置游戲

// 顯示分數
function bindShowResult(msg) {
    var showMsg = document.getElementById("show-msg");
    if (showMsg.style.display == "none") {
        showMsg.children[0].innerHTML = msg;
        showMsg.style.display = "block";
    } else {
        showMsg.style.display = "none";
    }
}

// 重置游戲
function reset() {
    theQuerstionNumber = 1;
    isNext = true;
    theResultNum = 0;
    result.innerHTML = theResultNum;
    that.getQuestion();
}

“基于JS怎么編寫看字說顏色小游戲”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！