文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

基于JS怎么编写看字说颜色小游戏

2023-06-30 08:29

关注

本篇内容介绍了“基于JS怎么编写看字说颜色小游戏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

一、游戏介绍与规则

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

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

游戏规则:① 看图模式,根据窗体生成的字与字体颜色,说出对应的字体颜色。(字是干扰项) ② 答题模式,根据题目要求;选出正确答案。

干扰等级:入门(5种颜色)、初级(8种颜色)、中级(10种颜色)、高级(12种颜色)

二、大体设计与代码讲解

① 看图模式

基于JS怎么编写看字说颜色小游戏

具体思路

首先,定义颜色对应的字、和对应颜色的十六进制(这里是有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;    }}

② 答题模式

基于JS怎么编写看字说颜色小游戏

具体思路

首先,需要在图片模式的基础下(除了图片模式操作的方法)。同样的,需要有定义颜色对应的字、和对应颜色的十六进制(这里是有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怎么编写看字说颜色小游戏”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯