<!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. uptimerobot 监控

    前言 由于搞了多个公共服务于多台vps,需要监控项目稳定性与服务器稳定性,考察了阿里云云监控与uptimerobot,最后选择了uptimerobot 教程 访问官网,注册账号 : https://u ...

  2. System.exit退出程序

    方法源码: /** * Terminates the currently running Java Virtual Machine. The * argument serves as a status ...

  3. jQuery九大选择器和jQuery对ajax的支持

    一.jQuery九大选择器 1)基本选择器: <body> <div id="div1ID">div1</div> <div id=&qu ...

  4. nginx的ngx_http_geoip2模块以精准禁止特定地区IP访问

    要求:对网站的信息,比如某个访问节点不想国内或者国外的用户使用,禁止国内或者国外或者精确到某个城市的那种情况. 解决方式:1.Cloudfalre来实现禁止特定国家的ip访问,比较简单,但是需要mon ...

  5. F#周报2019年第40期

    新闻 将项目成熟度重新考虑为一个社区过程 介绍.NET Core Windows Form设计器预览1 F# 4.7可以预览新语言特性与语法 视频及幻灯片 DotnetConf2019展示 .NET设 ...

  6. VR应用评测 - Apollo 11 阿波罗11号

    Apollo 11 VR http://store.steampowered.com/app/457860/Apollo_11_VR/ Steam VR 2016年发布 好评率 50% 基于美国航空航 ...

  7. Yii2 前后台登陆退出分离、登陆验证

    这里用的yii2高级模板, 基本模板的配置文件在一个文件里,方法基本没什么区别, 1.用户表要有两个用户表, 当然一个也行,分开是省得麻烦,既然是分离了就彻底分开, 前台表user,后台表user_b ...

  8. Openshift yum安装

    Openshift yum安装: Yum 安装docker [root@DockerServer openshift]# yum repolist [root@DockerServer openshi ...

  9. 分布式系统的延时和故障容错之Spring Cloud Hystrix

    本示例主要介绍 Spring Cloud 系列中的 Eureka,如何使用Hystrix熔断器容错保护我们的应用程序. 在微服务架构中,系统被拆分成很多个服务单元,各个服务单元的应用通过 HTTP 相 ...

  10. PID算法的理解及场景模拟

    增量式PID算法的简化版之后的公式: △u(t)=Ae(t)-Be(t-1)+Ce(t-2) △u:PID控制器输出的下一时刻的调整量 e(t):PID控制器在当前时刻的状态变化量-给定值 e(t-1 ...