本篇内容介绍了“基于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 += "<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;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怎么编写看字说颜色小游戏”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。