初学JavaScript之颜色小游戏

/*老师布置的的颜色小游戏的作业，根据问题显示的文字找出对应的颜色判断小游戏，可能有很多需要改进的代码，后面会多多改进的，谢谢2018-07-15 12:45:59*/<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>颜色小游戏</title><style type="text/css">.container{width: 400px;height: 550px;margin: 0 auto;border: 1px solid black;position: relative;background-color: #F0F0F0;}.info{overflow: hidden;}.time{margin: 20px 20px;float: left;}.score{margin: 20px 20px;float: right;}.question{width: 100%;height: 80px;font-size: 60px;text-align: center;margin-top: 140px;color: blue;}.reset{width: 100px;height: 50px;background-color: green;color: white;text-align: center;line-height: 50px;margin: 0 auto;cursor: pointer;}.answer{width: 100%;height: 80px;}.answer ul{width: 100%;height: 80px;width: 350px;margin: 0 auto;padding: 0;}.answer ul li{list-style-type: none;float: left;height: 60px;width: 60px;margin:0 5px ;font-size: 60px;cursor: pointer;}</style></head><body><div class="container"><div class="info"><div class="time">倒计时：<span>6.66</span></div><div class="score">得分：<span>0</span></div></div><div class="question">红</div><div class="reset">准备</div><div class="answer"><ul><li>红</li><li>黄</li><li>蓝</li><li>绿</li><li>黑</li></ul></div></div></body><script type="text/javascript">var time = document.querySelector(".time").querySelector("span");var countTime;var target = true;//倒计时function cutTime(){if(target){sec = 6;ms = 66;if(target){target= false;}countTime = setInterval(function(){if(sec == 0&&ms==0){clearInterval(countTime);// target = true;
                    }if(ms == 0&&sec>0){sec-=1;ms = 100;}time.innerText=sec+"."+ms;ms-=1;},10);}}//随机颜色var color = ["red","yellow","blue","green","black"];var text = ["红","黄","蓝","绿","黑"];var question = document.querySelector(".question");var answer = document.querySelector(".answer").querySelector("ul");var answer_li = answer.querySelectorAll("li");//随机数组function getRandArr(min,max,len){var arr=[];while(arr.length<len){var target = true;var rd=Math.floor(Math.random()*(max-min+1)+min);for(var i=0;i<arr.length;i++){if(arr[i] == rd){target = false;break;}}if(target){arr.push(rd);}}return arr;}changeColor();//改变颜色function changeColor(){textRandom=getRandArr(0,4,5);colorRandom=getRandArr(0,4,5);rd = getRandArr(0,4,5);question.innerText=text[rd[1]];question.style.color=color[rd[2]];for(var i = 0;i<text.length;i++){answer_li[i].innerText=text[textRandom[i]];answer_li[i].style.color=color[colorRandom[i]];}}//li点击事件var score = document.querySelector(".score").querySelector("span");var scores = 0;for(var j =0;j<answer_li.length;j++){answer_li[j].index = j;answer_li[j].onclick = function(){cutTime();resets.innerText="进行中";console.log(time.innerText);if(time.innerText!=0){//增加分数if(rd[2] == textRandom[this.index]){scores +=1;}else{scores -=1;}changeColor();score.innerText = scores;}else{resets.innerText="游戏结束";}}}//重置游戏
        resets = document.querySelector(".reset");resets.onclick = function(){console.log(countTime);resets.innerText="准备";if(countTime==undefined){alert("已在准备中，可直接开始");}if(time.innerText=="6.66"&&scores==0){alert("已在准备中，可直接开始");}clearInterval(countTime);target = true;time.innerText="6.66";score.innerText=scores=0;}</script>
</html>

转载于:https://www.cnblogs.com/qjdxb/p/9313258.html

初学JavaScript之颜色小游戏相关推荐

用javascript编写的小游戏-打砖块
用javascript编写的小游戏-打砖块前言启发下载链接游戏功能说明代码效果演示代码后记前言这是我在CSDN发表的第一篇文章.是我在初学javascript后, 忽然来了兴致, 编 ...
【Python学习笔记】猜颜色小游戏
[Python学习笔记]猜颜色小游戏前言一.算法原理 1. 生成器部分 2. 检测器部分二.代码过程BUG汇总笔记总结前言最近馋世界游戏大全51,心血来潮用Python写了个猜颜色,顺便 ...
JavaScript实现2048小游戏，我终于赢了一把
JavaScript实现2048小游戏作者简介作者名: 简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢 ...
疯狂猜颜色小游戏C++个人项目
@疯狂猜颜色小游戏欢迎浏览这是一个使用C++语言编写的控制台小游戏,详细代码如下,敬请参考,不足之处还请提出,我的联系方式:1207787189@qq.com 1.交互界面和功能玩家进入游戏后可 ...
LabVIEW辨识颜色小游戏
LabVIEW辨识颜色小游戏功能介绍程序实现功能介绍设计实现的功能是用不同的颜色来显示不同的颜色字符,让玩家辨识出所显示的字符的颜色.由于人们会下意识的说出字符显示的颜色,而非字符本身的颜色, ...
视频教程-JavaScript打飞机小游戏视频教程-JavaScript
JavaScript打飞机小游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强 ...
利用html css javascript写翻翻乐小游戏
利用html css javascript写翻翻乐小游戏废话不多说,先看效果代码放到文章末尾,不想看代码解释的可以直接跳过到后面直接下载我写这个小游戏的过程 1.准备图片我在觅元素上找了 ...
如何实现JavaScript猜数字小游戏
本篇文章给大家详细介绍一下搞定JavaScript猜数字小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. JavaScript 猜数字小游戏在1~10中随机抽取一个数字 ...
JavaScript打飞机小游戏视频教程-张鹏-专题视频课程
JavaScript打飞机小游戏视频教程-904人已学习课程介绍本课程介绍了如何使用js来做一个打飞机小游戏,其中涉及到页面的排版以及检测碰撞和逻辑的算法问题和DOM的操作的相关介 ...

初学JavaScript之颜色小游戏

初学JavaScript之颜色小游戏相关推荐

最新文章

热门文章