欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JS編寫一個(gè)看字說顏色小游戲

 更新時(shí)間：2022年04月22日 15:36:43   作者：南方者  
這篇文章主要為大家分享了一個(gè)看字說顏色的小游戲，游戲是利用JS語言編寫實(shí)現(xiàn)的，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下

前言

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

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

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

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

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

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

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

二、大體設(shè)計(jì)與代碼講解

① 看圖模式

具體思路

首先，定義顏色對(duì)應(yīng)的字、和對(duì)應(yīng)顏色的十六進(jìn)制（這里是有12種顏色）

封裝一個(gè)方法獲取一個(gè)字（顏色）與一個(gè)不對(duì)應(yīng)顏色的十六進(jìn)制（如：藍(lán)（#000000），就是顯示藍(lán)字，字體顏色是黑色）

設(shè)置對(duì)應(yīng)等級(jí)，生成生成“二維表格”（入門：5種顏色，5x5；初級(jí)：8種顏色，8x8；中級(jí)：10種顏色，10x10；高級(jí)：12種顏色，12x12.）

開搞！

核心代碼

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

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

封裝獲取一個(gè)字和不對(duì)應(yīng)字體顏色的方法

/ 獲取一個(gè)顏色對(duì)象
function getRandomColor(size) {
    // size是傳入的等級(jí)所用的參數(shù)
    // 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 的隨機(jī)整數(shù).
}

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

// 獲取二維坐標(biāo)系（畫“圖”）
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 的隨機(jī)整數(shù).
}

圖片模式操作

// 顯示圖片模式
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);
    }
}

// 圖片模式顯示對(duì)應(yīng)的
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;
    }
}

② 答題模式

具體思路

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

封裝一個(gè)方法獲取一個(gè)字（顏色）與一個(gè)不對(duì)應(yīng)顏色的十六進(jìn)制（如：藍(lán)（#000000），就是顯示藍(lán)字，字體顏色是黑色）

還需要定義顏色下標(biāo)、選項(xiàng)等等一些相關(guān)操作（具體可以看代碼注釋）

封裝獲取題的方法、點(diǎn)擊選項(xiàng)方法、下一道題、顯示分?jǐn)?shù)、重置游戲...

開搞！

核心代碼

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

// 這里還有前面定義的顏色，就不重復(fù)寫入這里了（可參考完整代碼）
// 顏色下標(biāo)（方便記錄，去掉相同顏色，避免出現(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"];// 選項(xiàng)
var msg = ""; // 提示語
var isNext = true; // 是否下一題
var optRightNum = 0; // 正確答案下標(biāo)
let questionNumber = 10; // 默認(rèn)題目數(shù)量 10（下標(biāo)從0開始）
let theQuerstionNumber = 0; // 題目數(shù)
let theResultNum = 0; // 分?jǐn)?shù)
var theRightNum = 0; // 正確選項(xiàng)

顯示答題模式

// 顯示答題
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); // 正確答案下標(biāo)（獲取隨機(jī)數(shù)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); // 隨機(jī)獲取0 or 1；為0時(shí)候是讀字；為1時(shí)是讀顏色
    var titleStr = theQuerstionNumber + "、題目：";
    // console.log(num)
    if (num == 0) {
        titleStr += "選擇該字對(duì)應(yīng)的文字";
        theRightNum = theColor.numName;
    } else {
        titleStr += "選擇該字對(duì)應(yīng)的顏色";
        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); // 刪除正確答案的下標(biāo)（防止出現(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àng)的下標(biāo)（防止出現(xiàn)相同選項(xiàng)）
        optStr += "</div>";
    }
    optStr += "</div>";
    // console.log(optStr);
    // console.log("正確答案:"+(optRightNum+1));
    themDiv.innerHTML = optStr;
}

點(diǎn)擊選擇選項(xiàng)答案

// 點(diǎn)擊選項(xiàng)方法（事件)
function onclickOpt(e) {
    if (!isNext) { // 當(dāng)前狀態(tài)不能進(jìn)行下一題
        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("選擇錯(cuò)誤！");
        msg = "選擇錯(cuò)誤！";
    }
    if (theQuerstionNumber == questionNumber) {
        msg = "游戲結(jié)束！一共：" + questionNumber + "題；<br>您的最終得分是：" + theResultNum;
        that.bindShowResult(msg);
        return;
    }
    that.bindShowResult(msg);
}

顯示分?jǐn)?shù)、重置游戲

// 顯示分?jǐn)?shù)
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();
}

三、倉庫地址與體驗(yàn)地址

在線體驗(yàn)（pc端）：傳送門　　

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

以上就是基于JS編寫一個(gè)看字說顏色小游戲的詳細(xì)內(nèi)容，更多關(guān)于JS看字說顏色游戲的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論