<!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. Elastic Static初识(01)

    写在前面 Elastic Static 是指由Elasticsearch,Logstash,Kibana,Beats等组件结合起来而构成的一个数据收集,分析,可视化的一个架构.我们经常听说过的ELK就 ...

  2. Spring MVC 梳理 - handlerMapping和handlerAdapter分析

    参考图片 综上所述我们来猜测一下spring mvc 中根据URL找到处理器Controller中相应方法的流程 ①:获取Request的URL ②:从UrlLookup这个map中找到相应的requ ...

  3. Kubernetes 系列（五）:Prometheus监控框架简介

    由于容器化和微服务的大力发展,Kubernetes基本已经统一了容器管理方案,当我们使用Kubernetes来进行容器化管理的时候,全面监控Kubernetes也就成了我们第一个需要探索的问题.我们需 ...

  4. php一行代码获取本周一,本周日,上周一,上周日,本月一日,本月最后一日,上月一日,上月最后一日日期

    <?php //本周一 echo date('Y-m-d', (time() - ((date('w') == 0 ? 7 : date('w')) - 1) * 24 * 3600)); // ...

  5. 二次编码 深浅拷贝 is和==

    1.二次编码 ascii 不支持中文 gbk 支持中文 2个字节 包含ascii Unicode 万国码 python3 内存Unicode utf-8 可变的长度 英文 1字节 欧洲2个字节 亚洲3 ...

  6. FFmpeg(四) 像素转换相关函数理解

    一.基本流程 1.sws_getCachedContext();//得到像素转换的上下文 2.sws_scale()://进行转换 二.函数说明 1.SwsContext *vctx = NULL;  ...

  7. 超大规模商用 K8s 场景下，阿里巴巴如何动态解决容器资源的按需分配问题？

    作者 | 张晓宇(衷源)  阿里云容器平台技术专家 关注『阿里巴巴云原生』公众号,回复关键词"1010",可获取本文 PPT. 导读:资源利用率一直是很多平台管理和研发人员关心的话 ...

  8. Spring Boot 2.X(三)：使用 Spring MVC + MyBatis + Thymeleaf 开发 web 应用

    前言 Spring MVC 是构建在 Servlet API 上的原生框架,并从一开始就包含在 Spring 框架中.本文主要通过简述 Spring MVC 的架构及分析,并用 Spring Boot ...

  9. java不支持多继承

    java不支持多继承,但支持多重继承,即一个类只能继承一个类,使用extends关键字 一个类可以实现多个接口,接口之间用逗号分隔,使用implements关键字 一个接口可以继承多个其他接口,接口之 ...

  10. idea快捷键(mac下)

    ctrl+/ 代码提示 command+o 搜索要进入的类并进入 command+shift+enter 另起一行 command+shift+u 在变成全大写与变成全小写之间切换 shift+鼠标滑 ...