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

<!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. MVC KindEdit

    先将下载的KindEditor放到项目中 View页面 <!DOCTYPE html><html><head>    <meta name="vie ...

  2. 从request获取远程IP地址

    public static String getIpAddr(HttpServletRequest request) { String ip = request.getHeader("X-F ...

  3. 更换win7锁屏壁纸

    1.打开注册表HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Authentication\LogonUI\Backgroun ...

  4. leetcode 171

    171. Excel Sheet Column Number Related to question Excel Sheet Column Title Given a column title as ...

  5. Leetcode3:Longest Substring Without Repeating Characters@Python

    Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...

  6. shell中的语法（1）

    反引号 命令替换.将命令的输出放在命令行的任意位置. eg. [root@gam ~]# echo The Data is `date` The Data is Fri Nov 18 10:13:56 ...

  7. 一个解决adb5037端口被绑定问题的小程序-以管理员身份运行

    @echo start adb... @rem 获取绑定的进程id输出到一个临时文件 @call netstat -ano |findstr " |findstr "LISTENI ...

  8. JQuery 插件之Ajax Autocomplete（ajax自动完成）搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  9. 计算机缺失缺少mfc110.dll等相关文件的解决办法

    去https://www.microsoft.com/zh-CN/download/details.aspx?id=30679下载 VSU4\vcredist_x64.exe 和VSU4\vcredi ...

  10. js判断页面是pc打开还是手机打开

    <script type="text/javascript"> function browserRedirect() { var sUserAgent = naviga ...