自己制作的文字游戏。(:

<!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制作的文字游戏的更多相关文章

  1. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  2. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  3. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  4. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  5. JS制作图片切换

    <!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...

  6. 使用Vue.js制作仿Metronic高级表格（一）静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  7. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. D3.js 制作中国地图 .net 公共基础类

    D3.js 制作中国地图 from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...

  9. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. Thinkphp的单字母函数整理

    有人不太喜欢TP这种单字母函数,其实这也是TP的一个特色,如果理解了这些函数的作用,不管是背,还是写,都是非常方便的,接下来我们以字母顺序开始.A函数 B函数 C函数 D函数 F函数 L函数 R函数 ...

  2. bootstrapValidator.js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  3. editplus工具支持sql高亮提示

    editplus默认不识别sql关键件,添加文件使其对sql高亮提示. 首先就是要自己编写一段代码,存为.stx 文件(例如sql.stx) 然后在editplus的菜单栏 工具-> 配置用户工 ...

  4. javascript date picker

    一个简洁的date picker <html><head><meta http-equiv="Content-Type" content=" ...

  5. Numpy应用100问

    对于从事机器学习的人,python+numpy+scipy+matplotlib是重要的基础:它们基本与matlab相同,而其中最重要的当属numpy:因此,这里列出100个关于numpy函数的问题, ...

  6. centos环境自动化批量安装软件脚本

    自动化安装jdk软件部署脚本 准备工作: 1.在执行脚本的服务器上生成免密码公钥: 安装expect命令 yum install -y expect ssh-keygen 三次回车 2.将jdk-7u ...

  7. git 忽视大小写

    git config core.ignorecase false http://stackoverflow.com/questions/3011625/git-mv-and-only-change-c ...

  8. php限定时间内同一ip只能访问一次

    建立一个数据表 CREATE TABLE `clicks` ( `ip` INT UNSIGNED NOT NULL , `time1` INT UNSIGNED NOT NULL , `time2` ...

  9. CentOS6.5上源码安装MongoDB3.2.1

    1.环境准备: mkdir /home/mongodb #创建MongoDB程序存放目录 mkdir /data/mongodata -p #创建数据存放目录 mkdir /data/log/mong ...

  10. 情感分析的现代方法（包含word2vec Doc2Vec）

    英文原文地址:https://districtdatalabs.silvrback.com/modern-methods-for-sentiment-analysis 转载文章地址:http://da ...