Js制作的文字游戏
自己制作的文字游戏。(:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字游戏</title>
<style type="text/css">
#wrap{
width: 400px;height: 550px;
border: 1px solid black;
margin: 50px auto 0px;
position: relative;
}
#left{
width: 80px;height: 30px;
position: absolute;
left: 30px;top: 10px;
}
#right{
width: 80px;height: 30px;
position: absolute;
right: 40px;top: 10px;
}
#one{
width: 250px;height: 250px;
/*background: green;*/
position: absolute;
left: 75px;top: 70px;
text-align: center;
line-height: 250px;
font-size: 150px;
}
p{
margin: 0;padding-top: 0;
width: 300px;height: 80px;
position: absolute;
left: 50px;top: 350px;
text-indent: 2em;
font-size: 25px;
}
#two{
width: 100%;height: 100px;
position: absolute;
left: 0;bottom: 0px;
}
#two span{
display: block;
width: 80px;height: 80px;
margin-top: 20px;
font-size: 70px;
text-align: center;
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<span id="left">时间:</span>
<span id="right">分数:</span>
<div id="one">黑</div>
<p>根据上面的字的颜色从下面选择正确的字,选择正确自动开始</p>
<div id="two">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
var left = document.getElementById('left');
var right = document.getElementById('right');
var one = document.getElementById('one');
var two = document.getElementById('two');
var span = two.getElementsByTagName('span');
var text = ['黑','蓝','黄','绿','红'];
var color = ['black','blue','yellow','green','red'];
// time = setInterval(function(){
// left.innerHTML = '时间:' + i + 's';
// i--;
// if (i < 0) {
// clearInterval(time);
// alert('Game Over');
// };
// },1000)
function num(){
var a = Math.floor(Math.random()*5);
return a;
}
function random (){
var five = [];
while(five.length < 5){
var rand = num();
if (five.indexOf(rand) == -1) {
five.push(rand);
}
}
return five;
}
function text2(){
var san = num();
si = num();
one.innerHTML = text[san];
one.style.color = color[si];
var yi = random();
var er = random();
for(var f = 0; f < span.length; f++){
span[f].innerHTML = text[yi[f]];
span[f].style.color = color[er[f]];
span[f].index = yi[f];
}
}
text2();
var score = 0;
var t = 10;
right.innerHTML = '分数:' + score;
left.innerHTML = '时间:' + t + 's';
var play = false;
for(var f = 0; f < span.length; f++){
span[f].onclick = function(){
if (si == this.index && t != 0) {
score++;
play = true;
right.innerHTML = '分数:' + score;
text2();
}else if (si != this.index && play) {
t--;
left.innerHTML = '时间:' + t + 's';
if (t <= 0) {
clearInterval(time);
play = false;
};
}
}
}
time = setInterval(function(){
if (play) {
t--;
left.innerHTML = '时间:' + t + 's';
if (t <= 0) {
clearInterval(time);
play = false;
alert('Game Over');
};
}
},1000)
</script>
</body>
</html>
Js制作的文字游戏的更多相关文章
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
- 基于node.js制作爬虫教程
前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- JS制作图片切换
<!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...
- 使用Vue.js制作仿Metronic高级表格(一)静态设计
Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
- 用js制作一个计算器
使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- 再谈vertical-align与line-height
每次遇到多个inline-block元素排列的怪异垂直位置的问题的时候都可以通过经验,设置vertical-align来解决,没深入研究过,现在需要分析总结下这个问题. 问题引出 有小鲜肉新做了个页面 ...
- mac系统下Ruby环境安装
在我们编写代码过程中,会用到一系列的第三方开源类库,我们可以选择手动去一个个添加需要的库,但这非常麻烦.因此我们可以使用CocoaPods来帮助我们自动添加.使用CocoaPods需要先安装Ruby环 ...
- JS实现div动态水平垂直居中
在做页面的过程中,在很多地方都会遇到元素需要水平垂直的居中这个问题,之前总是去网上搜别人的代码,今天仔细研究了一下,分享给大家,先写一个简单的例子: <div class="mui-c ...
- Linux环境下安装Oracle 10g 发生错误 You do not have permission to write to the inventory location
关于安装过程中出现的一些错误,我总结一下,路径没权限,不是该用户组下面的需要创建oracle的用户和用户组及目录 ,并对目录赋予相应权限,可参考下面的例子:这个地方如果简单的按照下面的程序做也能安装成 ...
- 登录框密码框input框禁止复制、粘贴、剪切和右键功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- python模块之subprocess
可以执行shell命令的相关模块和函数有: os.system os.spawn* os.popen* --废弃 popen2.* --废弃 commands.* ...
- Axure 7.0 正式版 + 汉化包 安装
详情如下: Axure 7.0 正式版终于发布了,现在提供简体中文版给大家使用. Axure 7.0 正式版: 链接: http://pan.baidu.com/s/1kV4OJ47 提取密码: be ...
- js工厂方式和构造函数
工厂方式 //工厂方式 : 封装函数 function createPerson(name){ //1.原料 var obj = new Object(); //2.加工 obj.name = nam ...
- Eclipses使用小技巧
1.新导入Eclipse的项目,显示很多错误,一般是因为没有加上对应的Lib,添加后错误消失. 2.如果还有错误,而且是与JavaEE相关的,比如说HttpServlet类找不到,更新一下tomcat ...
- oracle驱动问题
转载 http://sosuny.iteye.com/blog/806390