纯javascript实现的选字游戏
来源:互联网 发布:审计中数据透视表应用 编辑:程序博客网 时间:2024/06/03 19:20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选字游戏</title>
<style type="text/css">
*{
margin:0;
padding: 0;
font-family: simsun;
}
#wrap{
width: 420px;
margin: 0 auto;
position: relative;
min-height: 540px;
max-height: 640px;
border: 1px #ccc solid;
border-radius: 5px;
background: #dcdee0;
}
#time{
position: absolute;
left: 20px;
top: 20px;
font-size: 30px;
}
#wan{
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
}
#show{
font-size: 10em;
top: 90px;
left: 126px;
position: absolute;
}
#menu{
padding: 40px 30px;
font-size: 30px;
top: 250px;
position: absolute;
}
#ul1{
position: absolute;
left: 10px;
bottom: 20px;
list-style: none;
}
#ul1 li{
float: left;
font-size: 5em;
}
</style>
</head>
<body>
<div id="wrap">
<div id="time">剩余时间:20</div>
<div id="wan">完成:0</div>
<div id="show">红</div>
<div id="menu">根据上面的字的颜色从下面选择正确的字,选择正确自动开始</div>
<ul id="ul1">
<li>绿</li>
<li>蓝</li>
<li>黑</li>
<li>黄</li>
<li>红</li>
</ul>
</div>
</body>
<script type="text/javascript">
var show = document.querySelector("#show"); //获取定义的元素
var lis = document.querySelectorAll("#ul1>li");
var menu = document.querySelector("#menu");
var wan = document.querySelector("#wan");
var time = document.querySelector("#time");
var score = 0;
var colorIndex=null;
var timeBol = false;
var count = 20;
var clickBol = true;
var colors = ["red","yellow","blue","green","black"];
var fonts = ["红","黄","蓝","绿","黑"];
function rand(min,max){
return parseInt(Math.random()*(max-min+1)+min);
}
function showRand(){
colorIndex = rand(0,4);//candy
var fontIndex = rand(0,4);
show.innerHTML = fonts[fontIndex];
show.style.color = colors[colorIndex];
}
function grade(){
if (score<=2) {
alert("你是色盲ma");
}else if(score<5){
alert("你是色弱嘛");
}else if (score<10){
alert("一般");
}else if(score<15){
alert("表现不错");
}
}
function createArr(){
var arr=[];
while(arr.length<5){
var r = rand(0,4);
for (var j = 0; j < arr.length; j++) {
if(arr[j]==r){//除掉重复的字
break;
}
}
if(j==arr.length){
arr.push(r);
}
}
// alert(arr);
return arr;
}
function textRand(){
var colorArr = createArr();//存储的就是每个li颜色的下标值
console.log(colorArr);
var fontArr = createArr();
for (var i = 0; i < lis.length; i++) {
lis[i].innerHTML = fonts[fontArr[i]];
lis[i].style.color = colors[colorArr[i]];
lis[i].fontIndex = fontArr[i];
}
}
//循环时间的函数
var timer = setInterval(function(){
if (timeBol) {
count--;
if (count <=0) {
clearInterval(timer);//每次条用的时候清0一下
clickBol = false;
grade();
}
time.innerHTML = "剩余时间:"+count;
}
},1000);
showRand();
textRand();
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function(){
if (colorIndex==this.fontIndex&&clickBol) {
// alert("点对了");
menu.style.display="none";
showRand();
textRand();
score++;
timeBol = true;
// timeBol=true;
wan.innerHTML="完成:"+score;
}
}
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>选字游戏</title>
<style type="text/css">
*{
margin:0;
padding: 0;
font-family: simsun;
}
#wrap{
width: 420px;
margin: 0 auto;
position: relative;
min-height: 540px;
max-height: 640px;
border: 1px #ccc solid;
border-radius: 5px;
background: #dcdee0;
}
#time{
position: absolute;
left: 20px;
top: 20px;
font-size: 30px;
}
#wan{
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
}
#show{
font-size: 10em;
top: 90px;
left: 126px;
position: absolute;
}
#menu{
padding: 40px 30px;
font-size: 30px;
top: 250px;
position: absolute;
}
#ul1{
position: absolute;
left: 10px;
bottom: 20px;
list-style: none;
}
#ul1 li{
float: left;
font-size: 5em;
}
</style>
</head>
<body>
<div id="wrap">
<div id="time">剩余时间:20</div>
<div id="wan">完成:0</div>
<div id="show">红</div>
<div id="menu">根据上面的字的颜色从下面选择正确的字,选择正确自动开始</div>
<ul id="ul1">
<li>绿</li>
<li>蓝</li>
<li>黑</li>
<li>黄</li>
<li>红</li>
</ul>
</div>
</body>
<script type="text/javascript">
var show = document.querySelector("#show"); //获取定义的元素
var lis = document.querySelectorAll("#ul1>li");
var menu = document.querySelector("#menu");
var wan = document.querySelector("#wan");
var time = document.querySelector("#time");
var score = 0;
var colorIndex=null;
var timeBol = false;
var count = 20;
var clickBol = true;
var colors = ["red","yellow","blue","green","black"];
var fonts = ["红","黄","蓝","绿","黑"];
function rand(min,max){
return parseInt(Math.random()*(max-min+1)+min);
}
function showRand(){
colorIndex = rand(0,4);//candy
var fontIndex = rand(0,4);
show.innerHTML = fonts[fontIndex];
show.style.color = colors[colorIndex];
}
function grade(){
if (score<=2) {
alert("你是色盲ma");
}else if(score<5){
alert("你是色弱嘛");
}else if (score<10){
alert("一般");
}else if(score<15){
alert("表现不错");
}
}
function createArr(){
var arr=[];
while(arr.length<5){
var r = rand(0,4);
for (var j = 0; j < arr.length; j++) {
if(arr[j]==r){//除掉重复的字
break;
}
}
if(j==arr.length){
arr.push(r);
}
}
// alert(arr);
return arr;
}
function textRand(){
var colorArr = createArr();//存储的就是每个li颜色的下标值
console.log(colorArr);
var fontArr = createArr();
for (var i = 0; i < lis.length; i++) {
lis[i].innerHTML = fonts[fontArr[i]];
lis[i].style.color = colors[colorArr[i]];
lis[i].fontIndex = fontArr[i];
}
}
//循环时间的函数
var timer = setInterval(function(){
if (timeBol) {
count--;
if (count <=0) {
clearInterval(timer);//每次条用的时候清0一下
clickBol = false;
grade();
}
time.innerHTML = "剩余时间:"+count;
}
},1000);
showRand();
textRand();
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function(){
if (colorIndex==this.fontIndex&&clickBol) {
// alert("点对了");
menu.style.display="none";
showRand();
textRand();
score++;
timeBol = true;
// timeBol=true;
wan.innerHTML="完成:"+score;
}
}
}
</script>
</html>
0 0
- 纯javascript实现的选字游戏
- 纯javascript实现广告的无缝滚动
- 纯javascript实现div的伸缩
- 纯javascript实现dom树的遍历
- 纯JavaScript实现Ajax
- JavaScript实现的游戏们
- javascript 实现ajax调用,重点是纯的js实现
- Rhino-用纯Java写成的JavaScript的开放源代码实现
- 纯javascript实现进度条-------Day22
- 纯javascript 实现网页copy
- 纯js 2048游戏,js 2048游戏实现,无上限的2048游戏,有道具的2048游戏
- 纯JavaScript实现的幻灯片(兼容IE和Firefox)
- 纯JavaScript实现的幻灯片(兼容IE和Firefox)
- 纯javascript的ajax实现php异步提交表单
- 纯原生javascript实现table表格的增删
- 纯javascript/jquery 实现表格的动态增删改
- 用纯JavaScript实现的微信二维码图片生成器
- 纯JavaScript在网页上实现”简书“的文章编辑器
- 【Qt开发】将内存图像数据封装成QImage V2
- 关闭同步流(ios::sync_with_stdio(false);)
- java题目:求 1+2+...+n,要求不能用除法、 for、 while、 if、 else、 switch、 case 等关键字及条件判断语句( A?B:C)。
- 【Unity】Gizmos:可视化Debug
- Counting Sort 其實很簡單
- 纯javascript实现的选字游戏
- 解决eclipse 安装egit问题
- 欢迎使用CSDN-markdown编辑器
- 167. Two Sum II - Input array is sorted
- flash动画(1)小铅笔
- Java中hashCode的作用
- MediaCodec解码aac
- C#入门10.3——接口的实现和继承(2)
- OpenGL环境搭建(Windows下VS2010)