<!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. Ng的数组绑定

    tip:数据的定义需要在对应ts中进行,调用在html中 定义数组: ts中 public arr =["111","222","333"] ...

  2. [书籍翻译] 《JavaScript并发编程》第一章 JavaScript并发简介

    > 本文是我翻译<JavaScript Concurrency>书籍的第一章,该书主要以Promises.Generator.Web workers等技术来讲解JavaScript并 ...

  3. Docker5-docker私库的搭建及常用方法-harbor-registry方式

    一.简介 1.官方已经提供registry镜像为什么还需要用harbor 1)registry缺少镜像清理机制,可以push但是不能删除,耗费空间 2)registry缺乏相应的扩展机制 3)harb ...

  4. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  5. UDP方式的传输

    UDP 部分内容需要查文档学习,我们需要了解下面的两个类:java.net.DatagramSocket和java.net.DatagramPacket java.net.DatagramSocket ...

  6. Have a Good Attitude 良好的态度

    Poor attitudes lead to poor communication. Poor communication leads to poor service. Poor service le ...

  7. 微信小程序中事件

    微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...

  8. Spring Security 入门 (二)

    我们在篇(一)中已经谈到了默认的登录页面以及默认的登录账号和密码. 在这一篇中我们将自己定义登录页面及账号密码. 我们先从简单的开始吧:设置自定义的账号和密码(并非从数据库读取),虽然意义不大. 上一 ...

  9. opencv::视频人脸检测

    视频流抓取人脸和眼睛 #include<opencv2/opencv.hpp> #include<iostream> using namespace cv; using nam ...

  10. 利用git工具将自己的代码文件上传到Github

    GitHub 是一个面向开源及私有软件项目的托管平台,作为开源代码库以及版本控制系统,Github拥有超过900万开发者用户.随着越来越多的应用程序转移到了云上,Github已经成为了管理软件开发以及 ...