怎样用JS实现一个颜色选字的小游戏

前言

最近偷懒，一直没开工参与游戏活动的文章。终于在这几天，整理了一下之前微信小程序写好的看字说颜色（小程序名：工具宝盒），整理出来弄了个html版本。（分成了两个小模式）

同时，趁着这次机会，把我做的《看字说颜色》小游戏，给大家也讲解讲解我的思路。（该游戏设计完全笔者自己想出来的~ 欢迎大家一起讨论，或者有更好的想法也可提出~ 再多嘴一句，笔者是后端java，所以前端会有点拉~ 望大佬多多包涵~）

一、游戏介绍与规则

游戏名称：《看字说颜色》

游戏模式：① 看图模式 ② 答题模式

游戏规则：① 看图模式，根据窗体生成的字与字体颜色，说出对应的字体颜色。（字是干扰项） ② 答题模式，根据题目要求；选出正确答案。

干扰等级：入门（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;
    iquestionnumber;
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();

}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！