1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.         html,body{
  13.             height: 100%;
  14.             overflow: hidden;
  15.         }
  16.         .main,.wordList{
  17.             width: 100%;
  18.             height: 100%;
  19.             overflow: hidden;
  20.         }
  21.             .wordItem{
  22.                 width: 100px;
  23.                 height: 100px;
  24.                 text-align: center;
  25.                 line-height: 100px;
  26.                 border-radius: 50px;
  27.                 background:navajowhite;
  28.                 position: absolute;
  29.                 top: 20px;
  30.                 animation: wangxiadiao 10s linear forwards;
  31.  
  32.             }
  33.             @keyframes wangxiadiao{
  34.                 from{
  35.                     /*transform: translate(0,0);*/
  36.                     top: 20px;
  37.                 }
  38.                 to{
  39.                     /*transform: translate(0,1500px);*/
  40.                     top: 1500px;
  41.                 }
  42.             }
  43.  
  44.             .startgame{
  45.                 width: 300px;
  46.                 height: 150px;
  47.                 background: orangered;
  48.                 color: #fff;
  49.                 text-align: center;
  50.                 line-height: 150px;
  51.                 border-radius: 30px;
  52.                 position: absolute;
  53.                 left: 50%;
  54.                 top: 50%;
  55.                 margin-left: -150px;
  56.                 margin-top: -75px;
  57.                 font-size: 70px;
  58.             }
  59.         </style>
  60.     </head>
  61.     <body>
  62.         <div class="main">
  63.             <div class="wordList">
  64.  
  65.             </div>
  66.  
  67.             <div class="menu">
  68.                 <button class="startgame">游戏开始</button>
  69.                 <h1>游戏结束剩余时间</h1>
  70.                 <h1>当前得分：<span class="scroe"></span></h1>
  71.  
  72.             </div>
  73.  
  74.         </div>
  75.  
  76.         <script type="text/javascript">
  77.  
  78.             var game = {
  79.                 gData:{
  80.                     wordList:document.querySelector('.wordList'),
  81.                     newList:[]
  82.                     domList:[]
  83.                 },
  84.                 startGame:function(){
  85.                     //开始前，程序需要执行的内容
  86.                     var btn = document.querySelector('.startgame')
  87.                     btn.onclick = function(){
  88.                         btn.style.display = 'none'
  89.                         game.gameing()
  90.                     }
  91.  
  92.                 },
  93.                 gameimg:function(){
  94.                     //游戏中要执行的程序
  95.                     var fn = function(){
  96.                         var randomNum = parseInt(Math.random()*26)
  97.                         var newDiv = document.createElement('div')
  98.                         newDiv.innerHTML = word[randomNum]
  99.                         newDiv.className = 'wordItem'
  100.  
  101.                         game.gData.newList.push(word[randomNum])
  102.                         game.gData.domList.push(newDiv)
  103.  
  104.                         var x = Math.random()*(document.body.clientWidth-100)
  105.                         newDiv.style.left = x + 'px'
  106.  
  107.                         game.gData.wordList.appendChild(newDiv)
  108.  
  109.                         var newWord = word[randomNum]
  110.  
  111.                         setTimeout(function(){
  112.                             var index = game.gData.newList.indexOf(newWord)
  113.                             if(index!=-1){
  114.                                 wordList.removeChild(domList[index])
  115.                                 game.gData.newList.splice(index,1)
  116.                                 game.gData.domList.splice(index,1)
  117.  
  118.                             }
  119.  
  120.                         },10000)
  121.  
  122.                     }
  123.  
  124.                     var interId = setInterval(fn,2000)
  125.  
  126.                     setTimeout(function(){
  127.                         clearInterval(interId)
  128.                         game.endGame()
  129.                     },10000)
  130.  
  131.                 },
  132.                 //游戏结束的时候执行的函数
  133.                 endGame:function(){
  134.                     alert('游戏结束，你的得分是：')
  135.                 }
  136.             }
  137.  
  138.         </script>
  139.     </body>
  140. </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. Knative 实战：基于 Knative Serverless 技术实现天气服务-上篇

    提到天气预报服务,我们第一反应是很简单的一个服务啊,目前网上有大把的天气预报 API 可以直接使用,有必要去使用 Knative 搞一套吗?杀鸡用牛刀?先不要着急,我们先看一下实际的几个场景需求: 场 ...

  2. Maven 梳理 -eclipse中创建Maven的web项目

    已验证成功: 1.创建Maven的Web工程 新建Maven工程:File -> New -> Maven Project,具体如下所示: 点击Next进入下述页面,下方的窗口是我们选择所 ...

  3. 注意！GetThreadPriority的返回值不是系统的优先级值

    GetThreadPriority的返回值 Return code/value Description THREAD_PRIORITY_ABOVE_NORMAL 1 Priority 1 point ...

  4. IT架构师技术知识图谱

    互联网上“最全的技术图谱”,记录下.来源:http://developer.51cto.com/art/201708/548757.htm 1 1.1 架构师图谱 1.2 Java架构师图谱 1.3 ...

  5. Kubernetes 系列（四）：使用Traefik访问.net core api

    一. 准备 本篇的要求是在前三篇的基础上已经搭建好的本地k8s以及部署了Traefik,我们将会使用Traefik Ingress来访问.net core api,比较简单,做个记录,如果还没有搭建k ...

  6. python 对excel进行截图

    工作中需要对excel的单元格区域进行截图,以前是调用vba进行(走了很多弯路,虽然能实现,但比较low),后来逐步发现python的win32com与vba师出同门,很多方法操作都是类似的. 可以对 ...

  7. Salesforce学习之路-developer篇（三）利用Visualforce Page实现页面的动态刷新案例学习

    Visualforce是一个Web开发框架,允许开发人员构建可以在Lightning平台上本地托管的自定义用户界面.其框架包含:前端的界面设计,使用的类似于HTML的标记语言:以及后端的控制器,使用类 ...

  8. slf4j输出变量

    花括号表示占位符,推荐使用

  9. Spring 源码阅读 二

    程序入口: 接着上一篇博客中看完了在AnnotationConfigApplicationContext的构造函数中的register(annotatedClasses);将我们传递进来的主配置类添加 ...

  10. mac上git安装与github基本使用

    目录 安装git 创建ssh key.配置git 提交本地项目到GitHub 一.安装Git MAC安装Git 首先查看电脑是否安装Git,终端输入: git 1.通过homebrew安装Git 1. ...