<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        html,body{

            height: 100%;

            overflow: hidden;

        }

        .main,.wordList{

            width: 100%;

            height: 100%;

            overflow: hidden;

        }

            .wordItem{

                width: 100px;

                height: 100px;

                text-align: center;

                line-height: 100px;

                border-radius: 50px;

                background:navajowhite;

                position: absolute;

                top: 20px;

                animation: wangxiadiao 10s linear forwards;

            }

            @keyframes wangxiadiao{

                from{

                    /*transform: translate(0,0);*/

                    top: 20px;

                }

                to{

                    /*transform: translate(0,1500px);*/

                    top: 1500px;

                }

            }

            .startgame{

                width: 300px;

                height: 150px;

                background: orangered;

                color: #fff;

                text-align: center;

                line-height: 150px;

                border-radius: 30px;

                position: absolute;

                left: 50%;

                top: 50%;

                margin-left: -150px;

                margin-top: -75px;

                font-size: 70px;

            }

        </style>

    </head>

    <body>

        <div class="main">

            <div class="wordList">

            </div>

            <div class="menu">

                <button class="startgame">游戏开始</button>

                <h1>游戏结束剩余时间</h1>

                <h1>当前得分：<span class="scroe"></span></h1>

            </div>

        </div>

        <script type="text/javascript">

            var game = {

                gData:{

                    wordList:document.querySelector('.wordList'),

                    newList:[]

                    domList:[]

                },

                startGame:function(){

                    //开始前，程序需要执行的内容

                    var btn = document.querySelector('.startgame')

                    btn.onclick = function(){

                        btn.style.display = 'none'

                        game.gameing()

                    }

                },

                gameimg:function(){

                    //游戏中要执行的程序

                    var fn = function(){

                        var randomNum = parseInt(Math.random()*26)

                        var newDiv = document.createElement('div')

                        newDiv.innerHTML = word[randomNum]

                        newDiv.className = 'wordItem'

                        game.gData.newList.push(word[randomNum])

                        game.gData.domList.push(newDiv)

                        var x = Math.random()*(document.body.clientWidth-100)

                        newDiv.style.left = x + 'px'

                        game.gData.wordList.appendChild(newDiv)

                        var newWord = word[randomNum]

                        setTimeout(function(){

                            var index = game.gData.newList.indexOf(newWord)

                            if(index!=-1){

                                wordList.removeChild(domList[index])

                                game.gData.newList.splice(index,1)

                                game.gData.domList.splice(index,1)

                            }

                        },10000)

                    }

                    var interId = setInterval(fn,2000)

                    setTimeout(function(){

                        clearInterval(interId)

                        game.endGame()

                    },10000)

                },

                //游戏结束的时候执行的函数

                endGame:function(){

                    alert('游戏结束，你的得分是：')

                }

            }

        </script>

    </body>

</html>

原版_打字游戏.html的更多相关文章

  1. 用JS写了一个打字游戏，反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

  2. java打字游戏

    小记:老早之前写的程序,今天发现之前在 csdn上写的东西的图片不显示了,搞得人好郁闷,所以把之前零星的几篇文章搬个家 游戏运行截图: 字母实体类 package com.git.game; impo ...

  3. Java之线程———GUI线程（包含打字游戏和计时器俩个GUI实列）

    当java程序包含图形用户界面(GUI)时,Java虚拟机在运行应用程序时会自动启动更多的线程,其中有两个重要的线程:AWT-EventQuecue 和 AWT-Windows. AWT-EventQ ...

  4. jQuery 写的简单打字游戏

    var off_x; //横坐标 var count=0; //总分 var speed=5000; //速度,默认是5秒. var keyErro=0; //输入错误次数 var keyRight= ...

  5. linux系统指法练习与打字游戏软件

    以 fedora和ubuntu 系统为例,fedora/centos系统用yum install命令安装 ubuntu系统用apt-get instll命令安装 yum install ktouch$ ...

  6. JavaScript实现简单的打字游戏

    完整项目下载:https://download.csdn.net/download/weixin_44893902/13131694 演示地址:https://url_777.gitee.io/typ ...

  7. Java_太阳系_行星模型_小游戏练习_详细注释

    //实现MyFrame--实现绘制窗口,和实现重写 重画窗口线程类 package cn.xiaocangtian.Test; import java.awt.Frame; import java.a ...

  8. [蓝桥杯]PREV-23.历届试题_数字游戏

    问题描述 栋栋正在和同学们玩一个数字游戏. 游戏的规则是这样的:栋栋和同学们一共n个人围坐在一圈.栋栋首先说出数字1.接下来,坐在栋栋左手边的同学要说下一个数字2.再下面的一个同学要从上一个同学说的数 ...

  9. C#_界面程序_数码游戏

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

随机推荐

  1. TensorFlow2.0（三）：排序及最大、最小、平均值

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  2. freemarker常用属性

    1.th:action 定义后台控制器的路径,类似<form>标签的action属性. 示例如下. <form id="login" th:action=&quo ...

  3. BMap添加海量点数据，BMap.Point携带数据

    在开发web项目的过程中使用到了百度地图,由于要在地图中画出很多点比较影响加载速度,查看官方文档,发现有提供加载海量点的功能BMap.PointCollection,用这个加快速度,但是官方文档中提供 ...

  4. [Note] 解决使用Workerman和apache创建wss服务时出现的 Error during WebSocket handshake: net::ERR_RESPONSE_HEADERS_TRUNCATED

    使用apache代理生成的wss服务常出现 Error during WebSocket handshake: net::ERR_RESPONSE_HEADERS_TRUNCATED 的问题,但多刷新 ...

  5. 快学Scala 第十六课 （shell调用，正则表达式，正则表达式组，stripMargin妙用）

    shell调用:(管道符前加#号,执行shell用!) import sys.process._ "ls -al" #| "grep x" ! 正则表达式:(r ...

  6. SQL SERVER数据库日常使用总结

    以下内容为平时工作自己个人总结,仅供参考,欢迎交流 SELECT A.CBM,A.CMC,SUM(B.MJE)MJE FROM YXHIS..TBZDZTHZ A,YXHIS..TBZDZTMX B ...

  7. Hyper-V 下linux虚拟机静态IP上网配置的两种方式（1）

    工作需要,搭建linux环境,网上搜了两种Hyper-V配置linux静态IP及上网的方式,记录一下,方便查阅,如下是桥接方式的配置: 本实例所用的各项资源说明,系统是windows10企业版64bi ...

  8. 走进JavaWeb技术世界1：JavaWeb的由来和基础知识

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  9. Mybatis入门简版（二）

    一.Dao层开发的方式 以前dao层开发比较繁琐,写了接口还得写实现类,实际上用了Mybatis之后写实现类非常重复,都是重复的代码.那么此时改成另外一种简单形式. 遵循以下四个原则(名称.形参.返回 ...

  10. apply、bind、call方法的作用与区别

    js中call.apply.bind方法的作用和区别 1. call方法 作用:专门用于修改方法内部的 this 指向 格式:xxx.call( 对象名, 参数1, 参数2 , ...);.即:将 x ...