• 17.js实现金山打字

    效果图

     

      1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>金山打字游戏4</title>
  6     <style type="text/css">
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11 
 12         body {
 13             background: url(img/wall1.jpg);
 14             position: absolute;
 15 
 16         }
 17 
 18         #g_title {
 19              800px;
 20             height: 50px;
 21             color: #ffffff;
 22             text-align: center;
 23         }
 24 
 25         #showText {
 26              1000px;
 27             height: 500px;
 28             background: #ffffff;
 29             position: absolute;
 30             left: 100px;
 31             border: 3px dashed black;
 32             overflow: hidden;
 33         }
 34 
 35         #showScore {
 36              800px;
 37             height: 100px;
 38             background: #ffffff;
 39             position: absolute;
 40             left: 100px;
 41             top: 580px;
 42             font-size: 50px;
 43             text-align: center;
 44             font-family: '微软雅黑';
 45             color: #666666;
 46             line-height: 80px;
 47             border: 3px dashed black;
 48         }
 49 
 50         .btn {
 51             position: absolute;
 52              40px;
 53             height: 40px;
 54             overflow: hidden;
 55         }
 56 
 57     </style>
 58     <script type="text/javascript">
 59         var chars = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
 60         var score = 0;
 61         //获取展示区域
 62         var div = document.getElementById("showText");
 63         function initPage() {
 64             createChars();
 65             downChar();
 66 
 67         }
 68 
 69 
 70         //创建字母
 71         function createChars() {
 72             window.setInterval(function () {
 73                 div = document.getElementById("showText");
 74                 var result = Math.random() * 26 + "";
 75                 result = result.split(".");
 76                 //创建button
 77                 var btn = document.createElement("input");
 78                 btn.type = "button";
 79                 btn.value = chars[result[0]];
 80 
 81                 btn.className = "btn";
 82                 btn.style.top = "50px";
 83                 btn.style.left = parseInt(Math.random() * 860 + 40) + "px";
 84                 btn.style.font = "bold 30px 宋体";
 85                 btn.style.color = "white";
 86 
 87                 btn.style.background = "url(img/" + (Math.random() * 3 + 1 + "").split(".")[0] + ".png)";
 88                 // btn.style.backgroundSize="40px 40px";
 89 
 90                 div.appendChild(btn);
 91             }, 900);
 92 
 93         }
 94 
 95 
 96         //字母下落操作
 97         function downChar() {
 98             //获取展示区域
 99             var div = document.getElementById("showText");
100             //一秒下落40px
101             window.setInterval(function () {
102                 //获取所有的字母
103                 var btns = div.childNodes;
104                 for (var i = 0; i < btns.length; i++) {
105                     var btn = btns[i];
106                     //判断它是不是元素节点
107                     //元素节点1 属性节点2 文本节点3
108                     if (1 == btn.nodeType) {
109                         var top = parseInt(btn.style.top);
110                         var left = parseInt(btn.style.left);
111                         if (top < 460) {
112                             btn.style.top = top + 40 + "px";
113                             btn.style.left = left + "px";
114 
115                         } else {
116                             div.removeChild(btn);
117                             score -= 10;
118                             document.getElementById("score").innerHTML = score;
119                         }
120 
121 
122                     }
123 
124 
125                 }
126 
127             }, 1000);
128 
129         }
130         //按下键盘后 相应操作
131         window.onkeyup = function () {
132             //获取显示区域
133             var div = document.getElementById("showText");
134             //获取按下键盘的值
135             var eve = window.event || event;
136             var code = eve.keyCode;
137             //获取显示区域创建出来的按钮
138             var btns = div.childNodes;
139             //遍历节点
140             for (var i = 0; i < btns.length; i++) {
141                 //获取节点
142                 var btn = btns[i];
143                 if (1 == btn.nodeType) {
144                     if (btn.value == chars[code - 65]) {
145 
146                         div.removeChild(btn);
147                         score += 10;
148                         document.getElementById("score").innerHTML = score;
149                         break;
150                     }
151                 }
152 
153             }
154 
155 
156         }
157 
158 
159     </script>
160 </head>
161 <body onload="initPage()">
162 <div id="game">
163     <div id="g_title"><h1>打字游戏</h1></div>
164 
165     <div id="showText"></div>
166 
167     <div id="showScore">
168         你的分数为：<span id="score">0</span>&nbsp;分
169 
170 
171     </div>
172 
173 
174 </div>
175 </body>
176 </html>
    View Code

    代码：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>金山打字游戏4</title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }

    body {
    background: url(img/wall1.jpg);
    position: absolute;

    }

    #g_title {
    800px;
    height: 50px;
    color: #ffffff;
    text-align: center;
    }

    #showText {
    1000px;
    height: 500px;
    background: #ffffff;
    position: absolute;
    left: 100px;
    border: 3px dashed black;
    overflow: hidden;
    }

    #showScore {
    800px;
    height: 100px;
    background: #ffffff;
    position: absolute;
    left: 100px;
    top: 580px;
    font-size: 50px;
    text-align: center;
    font-family: '微软雅黑';
    color: #666666;
    line-height: 80px;
    border: 3px dashed black;
    }

    .btn {
    position: absolute;
    40px;
    height: 40px;
    overflow: hidden;
    }

    </style>
    <script type="text/javascript">
    var chars = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
    var score = 0;
    //获取展示区域
    var div = document.getElementById("showText");
    function initPage() {
    createChars();
    downChar();

    }


    //创建字母
    function createChars() {
    window.setInterval(function () {
    div = document.getElementById("showText");
    var result = Math.random() * 26 + "";
    result = result.split(".");
    //创建button
    var btn = document.createElement("input");
    btn.type = "button";
    btn.value = chars[result[0]];

    btn.className = "btn";
    btn.style.top = "50px";
    btn.style.left = parseInt(Math.random() * 860 + 40) + "px";
    btn.style.font = "bold 30px 宋体";
    btn.style.color = "white";

    btn.style.background = "url(img/" + (Math.random() * 3 + 1 + "").split(".")[0] + ".png)";
    // btn.style.backgroundSize="40px 40px";

    div.appendChild(btn);
    }, 1000);

    }


    //字母下落操作
    function downChar() {
    //获取展示区域
    var div = document.getElementById("showText");
    //一秒下落40px
    window.setInterval(function () {
    //获取所有的字母
    var btns = div.childNodes;
    for (var i = 0; i < btns.length; i++) {
    var btn = btns[i];
    //判断它是不是元素节点
    //元素节点1 属性节点2 文本节点3
    if (1 == btn.nodeType) {
    var top = parseInt(btn.style.top);
    var left = parseInt(btn.style.left);
    if (top < 460) {
    btn.style.top = top + 40 + "px";
    btn.style.left = left + "px";

    } else {
    div.removeChild(btn);
    score -= 10;
    document.getElementById("score").innerHTML = score;
    }


    }


    }

    }, 1000);

    }
    //按下键盘后 相应操作
    window.onkeyup = function () {
    //获取显示区域
    var div = document.getElementById("showText");
    //获取按下键盘的值
    var eve = window.event || event;
    var code = eve.keyCode;
    //获取显示区域创建出来的按钮
    var btns = div.childNodes;
    //遍历节点
    for (var i = 0; i < btns.length; i++) {
    //获取节点
    var btn = btns[i];
    if (1 == btn.nodeType) {
    if (btn.value == chars[code - 65]) {

    div.removeChild(btn);
    score += 10;
    document.getElementById("score").innerHTML = score;
    break;
    }
    }

    }


    }


    </script>
    </head>
    <body onload="initPage()">
    <div id="game">
    <div id="g_title"><h1>打字游戏</h1></div>

    <div id="showText"></div>

    <div id="showScore">
    你的分数为：<span id="score">0</span>&nbsp;分


    </div>


    </div>
    </body>
    </html>

     

     
  • 相关阅读:
    jackson 枚举 enum json 解析类型 返回数字 或者自定义文字 How To Serialize Enums as JSON Objects with Jackson
    Antd Pro V5 中ProTable 自定义查询参数和返回值
    ES6/Antd 代码阅读记录
    es 在数据量很大的情况下（数十亿级别）如何提高查询效率啊？
    Antd Hooks
    使用.Net Core开发WPF App系列教程(其它 、保存控件内容为图片)
    使用.Net Core开发WPF App系列教程( 三、与.Net Framework的区别)
    使用.Net Core开发WPF App系列教程( 四、WPF中的XAML)
    使用.Net Core开发WPF App系列教程( 二、在Visual Studio 2019中创建.Net Core WPF工程)
    使用.Net Core开发WPF App系列教程( 一、.Net Core和WPF介绍)
  • 原文地址：https://www.cnblogs.com/mx2036/p/6705113.html
Copyright © 2020-2023  润新知