js仿3366小游戏选字游戏
投稿：lijiao
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了js仿3366小游戏选字游戏
本文实例为大家分享了js仿3366小游戏中“你是色盲吗”游戏，大家先来挑战一下
游戏目标: 按画面中出现的文字的颜色来选择颜色，千万不要被颜色的困局打扰，眼睛一定要放亮哦，游戏开始时会有10分，每答对一题得一分，总共有10分，时间用完游戏会结束。
操作说明: 鼠标点击选择颜色
1、效果图：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
width: 400
height: 600
width: 100%;
height: 50
width: 150
height: 100%;
line-height: 50
font-size: 20
text-align:
width: 150
height: 100%;
line-height: 50
font-size: 20
/*text-align:*/
width: 100%;
height: 450
width: 100%;
height: 300
font-size: 200
text-align:
line-height: 300
width: 80%;
height: 150
text-indent: 2
font-size: 25
width: 100%;
height: 100
.bottomText {
width: 20%;
height: 100
text-align:
line-height: 100
font-size: 70
&div class="wrap"&
&div class="head"&
&div class="time"&时间:10s&/div&
&div class="score"&分数 :0&/div&
&div class="middle"&
&div class="text"&蓝&/div&
&div class="alert"&根据上面的字的颜色从下面选择正确的字,选择正确自动开始&/div&
&div class="bottom"&
&div class="bottomText"&红&/div&
&div class="bottomText"&绿&/div&
&div class="bottomText"&黑&/div&
&div class="bottomText"&蓝&/div&
&div class="bottomText"&黄&/div&
&script type="text/javascript"&
//变化的核心 获得不重复的乱序数组(数组中下标值)
function random(min, max) {
return parseInt(Math.random() * (max - min + 1)) +
//不重复的数组
function randomArr() {
var arr = [];
while (arr.length & 5) {
var temp = random(0, 4);
if (arr.indexOf(temp) == -1) {
arr.push(temp);
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. 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 =
var isplaying =
var countDown = 10;
var score = 0;
for (var i = 0; i & bottomDivs. i++) {
bottomDivs[i].onclick = function(){
if(colorIndex == this.index &&countDown!=0 ){
isplaying =
//分数增加
scoreDiv.innerHTML = "分数: "+
alertDiv.style.opacity = 0;
}else if(colorIndex != this.index &&isplaying){
//点错时间减小
countDown --;
//更新时间变化
timeDiv.innerHTML = "时间: " + countDown +"s";
//判断清理定时器
if(countDown &= 0){
clearInterval(timer);
isplaying =
//定时器,监听游戏进行
timer = setInterval(function(){
if(isplaying){
countDown --;
timeDiv.innerHTML = "时间: " + countDown +"s";
if(countDown &= 0){
clearInterval(timer);
isplaying =
alert("game over!!");
//停止游戏
以上就是本文的全部内容，希望大家能够挑战成功。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具 上传我的文档
 下载
 收藏
资料来源于互联网,版权归原作者所有。如有侵权问题，敬请及时告知，将及时删除侵权文档。
 下载此文档
正在努力加载中...
新版人教版一年级语文上册最新部编本6-比尾巴市级公开课课件
下载积分：310
内容提示：新版人教版一年级语文上册最新部编本6-比尾巴市级公开课课件
文档格式：PPT|
浏览次数：40|
上传日期： 11:35:35|
文档星级：
该用户还上传了这些文档
新版人教版一年级语文上册最新部编本6-比尾巴市级公开
官方公共微信比尾巴教学设计_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
比尾巴教学设计
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩4页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢民间游戏：写王字发布日期：浏览次数： 作者：WCJ
录入者：吴春娟字号：[
主办单位:太仓市双凤幼儿园
技术支持：南京冠邦网络有限公司
电话：025-}