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

更新時間：2022年04月22日 15:36:43 作者：南方者

這篇文章主要為大家分享了一個看字說顏色的小游戲，游戲是利用JS語言編寫實現(xiàn)的，文中的示例代碼講解詳細，感興趣的小伙伴可以學習一下

前言

最近偷懶，一直沒開工參與游戲活動的文章。終于在這幾天，整理了一下之前微信小程序寫好的看字說顏色（小程序名：工具寶盒），整理出來弄了個html版本。（分成了兩個小模式）

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

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

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

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

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

干擾等級：入門（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），就是顯示藍字，字體顏色是黑色）

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

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

開搞！

核心代碼

相關需要定義的參數

// 這里還有前面定義的顏色，就不重復寫入這里了（可參考完整代碼）
// 顏色下標（方便記錄，去掉相同顏色，避免出現(xiàn)相同顏色）
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); // 刪除正確答案的下標（防止出現(xiàn)相同答案）

    // 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); // 刪除已出現(xiàn)過的選項的下標（防止出現(xiàn)相同選項）
        optStr += "</div>";
    }
    optStr += "</div>";
    // console.log(optStr);
    // console.log("正確答案:"+(optRightNum+1));
    themDiv.innerHTML = optStr;
}

點擊選擇選項答案

// 點擊選項方法（事件)
function onclickOpt(e) {
    if (!isNext) { // 當前狀態(tài)不能進行下一題
        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();
}

三、倉庫地址與體驗地址

在線體驗（pc端）：傳送門　　

倉庫地址：等建好活動GitHub的要求申請了，就給大家放~（著急想要的可以直接去扒我的網站~）傳送門

以上就是基于JS編寫一個看字說顏色小游戲的詳細內容，更多關于JS看字說顏色游戲的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

JS中的數組的sort方法使用示例
sort會調用每一項的toString方法進行比較，下面為大家介紹下JS中數組sort方法的具體使用
2014-01-01
JS實現(xiàn)可關閉的對聯(lián)廣告效果代碼
這篇文章主要介紹了JS實現(xiàn)可關閉的對聯(lián)廣告效果代碼,涉及JavaScript針對滾動事件動態(tài)設置頁面元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
微信小程序中添加客服按鈕contact-button功能
這篇文章主要介紹了微信小程序中添加客服按鈕contact-button功能，小程序的客服系統(tǒng)，是微信做的非常成功的功能，開發(fā)者很容易的實現(xiàn)客服功能
2018-04-04
一步一步教你寫帶圖片注釋的淡入淡出插件（四）
第三部分的效果已經基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項。廢話不多說了，還是繼續(xù)博文吧。
2010-10-10
js下拉選擇框與輸入框聯(lián)動實現(xiàn)添加選中值到輸入框的方法
這篇文章主要介紹了js下拉選擇框與輸入框聯(lián)動實現(xiàn)添加選中值到輸入框的方法,涉及javascript中onchange事件及頁面元素遍歷的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
如何實現(xiàn)修改密碼時密碼框顯示保存到cookie的密碼
修改密碼時密碼框顯示保存到cookie的密碼,只要在input框中加入AUTOCOMPLETE="OFF" 即可，感興趣的朋友可以了解下
2013-12-12
JavaScript實現(xiàn)動態(tài)添加，刪除行的方法實例詳解
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)添加，刪除行的方法,較為詳細的分析了javascript操作table表格實現(xiàn)針對表格元素動態(tài)操作的相關技巧,需要的朋友可以參考下
2015-07-07
從數據庫讀取數據后將其輸出成html標簽的三種方法
需要輸出成html標簽時編譯器卻自動幫我們輸出成字符串，這該怎么辦？下面有個三個解決方法，一一測試便知其效果是如何
2014-10-10
js實現(xiàn)鼠標觸發(fā)圖片抖動效果的方法
這篇文章主要介紹了js實現(xiàn)鼠標觸發(fā)圖片抖動效果的方法,通過定時器定時遞歸調用rattleimage函數實現(xiàn)抖動效果,非常實用,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
JS中postcss插件實現(xiàn)vw適配的方法
PostCSS是一個用JavaScript編寫的插件工具,它可以幫助我們對CSS進行模塊化、自動化處理和優(yōu)化,這篇文章主要介紹了JS中postcss插件實現(xiàn)vw適配,需要的朋友可以參考下
2025-01-01