最近偷懒,一直没开工参与游戏活动的文章。终于在这几天,整理了一下之前微信小程序写好的看字说颜色(小程序名:工具宝盒),整理出来弄了个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;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(); }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。