js仿3366小游戏选字游戏
更新时间:2016年4月17日 10:00 点击:2171
本文实例为大家分享了js仿3366小游戏中“你是色盲吗”游戏,大家先来挑战一下
游戏目标: 按画面中出现的文字的颜色来选择颜色,千万不要被颜色的困局打扰,眼睛一定要放亮哦,游戏开始时会有10分,每答对一题得一分,总共有10分,时间用完游戏会结束。
操作说明: 鼠标点击选择颜色
1、效果图:
原图:
模仿:
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap { width: 400px; height: 600px; border: 1px solid black; margin: 0 auto; } .head { width: 100%; height: 50px; overflow: hidden; } .time { float: left; width: 150px; height: 100%; line-height: 50px; font-size: 20px; text-align: center; } .score { width: 150px; height: 100%; float: right; line-height: 50px; font-size: 20px; /*text-align: center;*/ } .middle { width: 100%; height: 450px; } .text { width: 100%; height: 300px; font-size: 200px; text-align: center; line-height: 300px; } .alert { width: 80%; height: 150px; margin: 0 auto; text-indent: 2em; font-size: 25px; } .bottom { width: 100%; height: 100px; overflow: hidden; } .bottomText { width: 20%; height: 100px; float: left; text-align: center; line-height: 100px; font-size: 70px; cursor: pointer; } </style> </head> <body> <div class="wrap"> <div class="head"> <div class="time">时间:10s</div> <div class="score">分数 :0</div> </div> <div class="middle"> <div class="text">蓝</div> <div class="alert">根据上面的字的颜色从下面选择正确的字,选择正确自动开始</div> </div> <div class="bottom"> <div class="bottomText">红</div> <div class="bottomText">绿</div> <div class="bottomText">黑</div> <div class="bottomText">蓝</div> <div class="bottomText">黄</div> </div> </div> </body> <script type="text/javascript"> //变化的核心 获得不重复的乱序数组(数组中下标值) function random(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; } //不重复的数组 function randomArr() { var arr = []; while (arr.length < 5) { var temp = random(0, 4); if (arr.indexOf(temp) == -1) { arr.push(temp); } } return arr; } function fresh() { //中间字 变化 var textIndex = random(0, 4); colorIndex = random(0, 4); textDiv.innerHTML = textArr[textIndex]; textDiv.style.color = colorArr[colorIndex]; //获取乱序下标数组 var textRandoms = randomArr(); var colorRandoms = randomArr(); for (var i = 0; i < bottomDivs.length; i++) { //通过乱序下标获取文本,赋值给div bottomDivs[i].innerHTML = textArr[textRandoms[i]]; bottomDivs[i].style.color = colorArr[colorRandoms[i]]; //保存乱序下标 bottomDivs[i].index = textRandoms[i]; } } var textDiv = document.querySelector(".text"); var bottomDivs = document.querySelectorAll(".bottomText"); var timeDiv = document.querySelector(".time"); var scoreDiv = document.querySelector(".score"); var alertDiv = document.querySelector(".alert"); var textArr = ["红", "绿", "蓝", "黄", "黑"]; var colorArr = ["red", "green", "blue", "yellow", "black"]; var colorIndex=0; var timer = null; var isplaying = false; var countDown = 10; var score = 0; fresh(); for (var i = 0; i < bottomDivs.length; i++) { bottomDivs[i].onclick = function(){ //判断 if(colorIndex == this.index &&countDown!=0 ){ //刷新 score ++; isplaying =true; //分数增加 fresh(); scoreDiv.innerHTML = "分数: "+score ; alertDiv.style.opacity = 0; }else if(colorIndex != this.index &&isplaying){ //点错时间减小 countDown --; //更新时间变化 timeDiv.innerHTML = "时间: " + countDown +"s"; //判断清理定时器 if(countDown <= 0){ clearInterval(timer); isplaying = false; } } } } //定时器,监听游戏进行 timer = setInterval(function(){ if(isplaying){ countDown --; timeDiv.innerHTML = "时间: " + countDown +"s"; if(countDown <= 0){ clearInterval(timer); isplaying =false; alert("game over!!"); } //停止游戏 }else{ } },1000); </script> </html>
以上就是本文的全部内容,希望大家能够挑战成功。
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29