基于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 += "
";        } else {            textStr += "
";        }        for (var j = 0; j < size; j++) {            var theColor = getRandomColor(size);            textList[i][j] = theColor;            textStr += "" + theColor.colorName + "";        }        textStr += "
";    }    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[xss_clean] = 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[xss_clean] = 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" + theColor.colorName + "