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

<!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. java SSH框架详解（面试和学习都是最好的收藏资料）

    Java—SSH(MVC)1. 谈谈你mvc的理解MVC是Model—View—Controler的简称.即模型—视图—控制器.MVC是一种设计模式,它强制性的把应用程序的输入.处理和输出分开.MVC ...

  2. leetcode174. Dungeon Game

    // learn from https://discuss.leetcode.com/topic/6912/c-dp-solution ''' class Solution { public: int ...

  3. 使用cnpm

    官方的 npm下载速度太慢 [..................] \ normalizeTree: sill install loadCurrentTree  一直是这个问题 使用淘宝的 cpm ...

  4. HTTP状态码大全

    完整的 HTTP 1.1规范说明书来自于RFC 2616,你可以在http://www.talentdigger.cn/home/link.php?url=d3d3LnJmYy1lZGl0b3Iub3 ...

  5. ArcGIS api fo silverlight学习二（silverlight加载GraphicsLayer）

    上一节学习了silverlight加载GeoServer发布的WMS地图,这一节学习一下加载GraphicsLayer 一.加载.png或jpg文件图标 1.在MainPage.xaml中添加资源配置 ...

  6. XP局域网内专用消息队列

    网上能找到DELPHI消息队列的方法,在XP下试了总是不成功,后来在2003上试就行了,对比发现消息队列属性->安全 2003中多了个用户ANONYMOUS_LOGON. 然后在XP下消息队列属 ...

  7. 关于编译Android源码

    NO.1(适用于全编) (1)source build/envsetup.sh (2)lunch (3)make -j(x) NO.2(适用于编模块) (1)source build/envsetup ...

  8. python基础知识3——基本的数据类型2——列表，元组，字典，集合

    磨人的小妖精们啊!终于可以归置下自己的大脑啦,在这里我要把--整型,长整型,浮点型,字符串,列表,元组,字典,集合,这几个知识点特别多的东西,统一的捯饬捯饬,不然一直脑袋里面乱乱的. 一.列表 1.列 ...

  9. Winform API "user32.dll"中的函数

    命名空间:System.Runtime.InteropServices /// <summary> /// 该函数检索一指定窗口的客户区域或整个屏幕的显示设备上下文环境的句柄,以后可以在G ...

  10. Android Studio tips1

    Android Studio 真机测试出现  device can not found 1.安装与手机版本一样的sdk 2.(重要!!)手机的驱动在电脑上没有正确的安装,安装豌豆荚可以解决!