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

<!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. PHP5.6.15连接Sql Server 2008配置方案

    php5.6的如果想连接Sql Server 2008数据库,需要手动配置扩展和安装一个驱动. 下载SQL Server Driver for PHP的扩展包,64位系统的官方不支持,找到一个非官方的 ...

  2. JavaScript笔记:变量及其作用域

    一.变量的定义及声明 在javascript中变量仅仅是用来保存值的一个占位符而已,定义变量时要使用关键字var后跟一个变量名,如下所示: var message; //定义一个变量message,像 ...

  3. oracle安装操作及遇到的错误

    一.准备工作 服务器环境: 服务器端:VMWARE下的win7 64位系统 客户端:宿主机 WIN7 64位系统 软件环境: win64_Oracle_11gR2 PLSQL Developer 11 ...

  4. maven导入本地jar包

    <dependency> <groupId>com.qrcode</groupId> <artifactId>qrcode</artifactId ...

  5. git 撤销commit

    如果不小心commit了一个不需要commit的文件,可以对其进行撤销. 先使用git log 查看 commit日志 commit 422bc088a7d6c5429f1d0760d008d86c5 ...

  6. 解决linux 无法下载 oracle 官网 java的 安装包

    wget --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-securebackup-co ...

  7. 解决UITableView上计时器（Timer）的滑动问题

    要想计时器(Timer)不因UITableView的滑动而停止工作,就得探讨一下RunLoop了. RunLoop本质和它的意思一样是运行着的循环,更确切的说是线程中的循环.它用来接受循环中的事件和安 ...

  8. DataTable自定义排序

    使用JQ DataTable 的时候,希望某列数据可以进行自定义排序,操作如下:(以中文排序和百分比排序为例) 1:定义排序类型: //百分率排序 jQuery.fn.dataTableExt.oSo ...

  9. 阿里云slb和ucloud负载均衡ulb添加ssl证书将http服务https化的配置详解

    阿里云和ucloud服务器配置ssl证书将http服务https化的配置详解 项目背景: 苹果App于2017年1月1日将启用App Transport Security安全功能,即强制App通过HT ...

  10. findViewById返回null

    Q:findViewById返回null? A: 代码逻辑错误: 最终,发现错误竟然是在layout文件中把android:id写成了android:name. android:name=" ...