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

<!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. ios中，在SearchBar里面搜索内容，可根据内容来查找所需的信息资源，可获得SearchBar中的内容

    贴一段我很久以前写的小demo,你们就明白了,是把textField套在alertView里的@interface ViewController : UIViewController <UIAl ...

  2. jsonp与JAVA的配合使用

    一.客户端 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  3. （Hibernate进阶）Hibernate基本映射（三）

    介绍Hibernate的经典内容:对象关系映射.主要介绍映射的基本概念,映射的分类,映射文件. 概念 ORM(Object Relational Mapping),即对象关系映射.它的作用就是在关系型 ...

  4. windows下sass安装 以及一些要注意的问题

    都说sass 环境难配其时也没那么难 按照以下步骤一下一下来还是挺快的 如果你是喜欢less 那就当我没说 233333 1.sass 是基于ruby这门语言的需要使用 rubygem这个包管理器安装 ...

  5. SQLServer查询所有库表结构信息

    1.查询数据库中的所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name 2.查询某个数据库中所有的表名: SELECT Name FR ...

  6. NHibernate系列文章二十八：NHibernate Mapping之Auto Mapping（附程序下载）

    摘要 上一篇文章介绍了Fluent NHibernate基础知识.但是,Fluent NHibernate提供了一种更方便的Mapping方法称为Auto Mapping.只需在代码中定义一些Conv ...

  7. shell中的语法（1）

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

  8. PE新手教程

    先确定你的手机是 IPhone 还是 Android  Android 的在你的应用商店搜索  我的世界 下载 0.14.2 版本 , 也可以在群文件中下载 安装 然后点击 下载  等待下载..  下 ...

  9. 常用到的git，mvn，postgres，vim命令总结

    mvn: 打包: mvn package 如果想在打包的时候跳过测试: mvn package -Dmaven.test.skip=true 使用的junit测试框架, 测试: mvn test 如果 ...

  10. Microsoft Azure 01 (Summarize)

    What is Windows Azure? As a cloud platform from Microsoft that provides a wide range of different se ...