<!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. Linux版本号的数值含义

    Linux内核版本有两种:稳定版和开发版 ,Linux内核版本号由3组数字组成:第一个组数字.第二组数字.第三组数字.第一个组数字:目前发布的内核主版本.第二个组数字:偶数表示稳定版本:奇数表示开发中 ...

  2. Linux6.x 更换国内比较快的yum源-通用版

    ----------更换国内比较快的yum源----------- ----------163--------- cd /etc/yum.repos.d mv CentOS-Base.repo Cen ...

  3. Linux mint 启动文本模式(不启动图形界面)

    Linux Mint 系统用了很久,很顺手,赞一个! 有一天想同时运行多个虚拟机linux系统做实验,想着只启动文本模式可以省点内存资源,结果试了多种方法都不成功,网上现有针对Ubuntu原版和Cen ...

  4. 检测MySQL主从是否异常

    #!bin/bash user='root' passwd="123" host="192.168.192.156" mycmd="mysql -u$ ...

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

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

  6. java第2天:类，对象，封装和构造方法

    1 面向对象简述 将 {1,3,45,56,78,90}转化为[1,3,45,56,78,90] 1-2 方法1:面向过程 代码块 public class test { public static ...

  7. k8s pod访问不通外网问题排查

    环境概况 自建k8s集群,主机操作系统ubuntu16.04,k8s版本v1.14, 集群网络方案calico-3.3.6. worker节点数50+,均为GPU物理服务器,服务器类型异构,如Nvid ...

  8. 31、vue-cli3引入封装svg图标

    svg图标放大不失真,png会出现失真现象. 一.方法一 1.在对应vue项目里添加插件 vue add svg-sprite 输入 Y 2.在执行 npm install svgo svgo-loa ...

  9. 解决MVC中Model上的特性在EF框架刷新时清空的问题

    MVC中关于前端数据的效验一般都是通过在Model中相关的类上打上特性来实现. 但是在我们数据库发生改变,EF框架需要刷新时会把我们在Model上的特性全部清除,这样的话,我们前端的验证就会失效. 因 ...

  10. php微信支付v3版本签名生成

    前几天需要对接微信支付卡包营销活动需要对接微信新版SDKv3版 签名生成规则,微信的官方文档里面说明的还算可以吧,不过个人觉得不太理想- -.  自己调试的时候调试了半天才找了错误原因. https: ...