用js+html+css+txt做的记单词游戏（妈妈再也不用担心我的学习~）

前言

 

    记单词忒无聊了点，所以想搞个东西为这无聊的过程略添点乐趣。

 

效果图

 

 

玩法

 

    游戏规则很简单，系统不断的从Words.txt中取单词，随机消除单词的字母，叠加到显示框上，玩家从最下面的单词开始消除（键盘输入把单词补充完整），如果显示框填满单词则game over。(似乎用ie玩有点问题，请使用firefox)

 

Words.txt单词格式

   中文(chinese)英文(english)...如下图。

 

html代码

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 6     <link href="Styles/wordgame.css" rel="stylesheet" type="text/css" />
 7     <script src="Scripts/wordgame.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10 
11 <div id="screen">
12 <div id="logo"><img src="Image/wordslogo.jpg" alt="logo" /></div>
13 <div class="menu">
14 <div>
15 缺省<input id="txtletterCount" type="text"  value="1"/>个字母
16 </div>
17 <div>
18 <input id="txtNewLetterTime"  value="2000"/>微秒后出现新单词
19 </div>
20 <div id="beginGame">
21 开始游戏
22 </div>
23 </div>
24 <div  id="tim">Tim</div>
25 </div>
26 </body>
27 </html>

 

wordgame.js代码

View Code 
  1 $(function () {
  2     init();
  3     getTxt();
  4     $("#beginGame").click(function (event) {
  5         if (event.button == 0) {
  6             $(".menu").css("visibility", "hidden");
  7             $("#logo").css("visibility", "hidden");
  8             newWord();
  9             addKeydownEvent();
 10         }
 11     });
 12 });
 13 
 14 //初始化
 15 function init() {
 16     $("#txtletterCount").blur(function () {
 17         var count = $(this).val();
 18         if (!isInteger(count)) {
 19             $("#txtletterCount").val("1");
 20         }
 21     });
 22 
 23     $("#txtNewLetterTime").blur(function () {
 24         var time = $(this).val();
 25         if (!isInteger(time)) {
 26             $("#txtNewLetterTime").val("2000");
 27         }
 28     });
 29 }
 30 
 31 //正则验证
 32 function isInteger(obj) {
 33     var reg = /^\d+$/;
 34     if (!reg.test(obj)) {
 35         alert("请输入正整数");
 36         return false;
 37     }
 38     else {
 39         return true;
 40     }
 41 }
 42 
 43 //产生count个随机数
 44 function numbers(count, length) {
 45     var ok = 1;
 46     r = new Array(count);
 47     for (var i = 1; i <= count; i++) {
 48         r[i] = Math.round(Math.random() * (length - 1)) + 1;
 49     }
 50     for (var i = count; i >= 1; i--) {
 51         for (var j = count; j >= 1; j--) {
 52             if ((i != j) && (r[i] == r[j])) ok = 0;
 53         }
 54     }
 55     if (ok) {
 56         return r;
 57     }
 58     else numbers(count, length);
 59 }
 60 
 61 
 62 
 63 
 64 function drawWord(word, chinese) {
 65     var letterDiv = "";
 66     var length = word.length;
 67     var count = $("#txtletterCount").val();
 68 
 69     if (count > length) {
 70         count = length;
 71     }
 72 
 73     var random;
 74     var letterWidth = 200 / word.length - 3;
 75 
 76 
 77 
 78     //可优化，如果隐藏的随机数大于单词长度一半则生成显示的随机数length-count
 79     if (count > (length / 2)) {
 80         if (count == length) {
 81             // alert("count_" + count + "__length_" + length);
 82             $.each(word, function (key, value) {
 83                 letterDiv += "<div   style='width:" + parseInt(letterWidth) + "px; border:1px solid black; float:left;' name='hide'>" + value + "</div>";
 84             });
 85         }
 86         else {
 87             //alert("count_" + count + "__length_" + length);
 88             random = numbers(length - count, length);
 89             $.each(word, function (key, value) {
 90                 var index = $.inArray(key + 1, random);
 91                 //alert(index)
 92                 if (index != -1) {
 93                     letterDiv += "<div   style='width:" + parseInt(letterWidth) + "px; border:1px solid black; float:left;' name='show'>" + value + "</div>";
 94 
 95                 }
 96                 else {
 97                     letterDiv += "<div   style='width:" + parseInt(letterWidth) + "px; border:1px solid black; float:left;' name='hide'>" + value + "</div>";
 98 
 99                 }
100             });
101         }
102 
103     }
104     else {
105         //alert("count_" + count + "__length_" + length);
106         random = numbers(count, length);
107         $.each(word, function (key, value) {
108             var index = $.inArray(key + 1, random);
109             //alert(index)
110             if (index != -1) {
111                 letterDiv += "<div   style='width:" + parseInt(letterWidth) + "px; border:1px solid black; float:left;' name='hide'>" + value + "</div>";
112             }
113             else {
114                 letterDiv += "<div   style='width:" + parseInt(letterWidth) + "px; border:1px solid black; float:left;' name='show'>" + value + "</div>";
115             }
116         });
117     }
118 
119 
120     var row = $('<div name="row" style="height:22px; position:absolute; top:0px; left:0px; " top="0"><div name="word">' + letterDiv + '</div><div name="chinese">' + chinese + '</div></div>');
121     $("#screen").append(row);
122 
123     $("div[name='hide']").hide(1000, function () {
124     });
125 
126 }
127 
128 
129 var eandcs; //english an chinese
130 var len; //单词个数
131 //取txt
132 function getTxt() {
133     $.get('Words.txt', function (d) {
134         eandcs = d.split(')');
135         len = $(eandcs).size() - 1;
136     });
137 }
138 
139 
140 
141 //新单词
142 function newWord() {
143     var interval; //调度器对象。
144     var i = 0;
145     //var len;
146 
147     var word;
148     var chinese;
149 
150 
151     // alert("长度_" + len)
152     var newLetterTime = parseInt($("#txtNewLetterTime").val());
153 
154     interval = setInterval(function () {
155         word = eandcs[i].split('(')[0].toLowerCase();
156         //alert("英文_" + word);
157         chinese = eandcs[i].split('(')[1];
158         //alert("中文_" + chinese);
159         var rows = $("div[name='row']");
160         var top;
161         drawWord(word, chinese);
162 
163         $.each(rows, function (key, value) {
164             top = parseInt($(value).attr("top"));
165             // alert("top" + key +"  "+top);
166             $(value).attr("top", top + 22);
167             $(value).css("top", parseInt(top + 22) + "px");
168             if (top > 470) {
169                 clearInterval(interval);
170                 $("div[name='row']").remove();
171                 alert("game over");
172                 $(".menu").css("visibility", "visible");
173                 $("#logo").css("visibility", "visible");
174             }
175         });
176 
177         i++;
178         //alert("i_"+i);
179         if (i >= len) {
180             //alert("完成所有的单词");
181             i = 0;
182         }
183 
184     }, newLetterTime);
185 }
186 
187 
188 function addKeydownEvent() {
189 
190     $("html").keydown(function (event) {
191 
192         var realkey = String.fromCharCode(event.keyCode).toLowerCase();
193 
194         var words = $("div[name='word']");
195         $.each(words, function (key, value) {
196             // alert(key + "_" + value);
197             if (key != 0) {
198                 return;
199             }
200             else {
201 
202                 var letterHide = $(value).find("div[name='hide']");
203                 var l = $(letterHide).size();
204                 var letter = new Array(l);
205                 $.each(letterHide, function (key1, value1) {
206                     // var letter = $(this).text();
207                     if (realkey == $(value1).text()) {
208                         $(value1).attr("name", "show");
209                         $(value1).show(100, function () {
210                             //alert("what_" + $(value).find("div[name='hide']"))size();
211                             if ($(value).find("div[name='hide']").size() == 0) {
212                                 $(value).parent().hide(100, function () {
213                                     $(value).parent().remove();
214                                 });
215                             }
216                             else {
217 
218                             }
219                         });
220                     }
221                 });
222             }
223         });
224     });
225 }

 

wordgame.css代码

View Code 
 1  #screen
 2     {
 3         width:400px;
 4         height:500px;
 5         border:1px solid black;
 6         text-align:center;
 7         left:50%;
 8         position:absolute;
 9         margin-left:-200px;
10         top:50%;
11         margin-top :-250px;
12     }
13     .menu
14     {
15     
16         width:200px;
17         height:100px;
18         position:absolute;
19         left:100px;
20         top:200px;    
21         z-index:10;
22         visibility:hidden;
23         visibility:visible;
24     }
25     .menu div
26     {
27         border:1px solid black; 
28         width:200px;  
29         height:30px;
30         line-height:30px; 
31        
32     }
33     
34     #beginGame
35     {
36         cursor:pointer;
37     }
38     
39     div[name="word"]
40     {
41         width:198px;
42         height:20px;
43         border:1px solid Red;
44         color:Red;
45         float:left;
46     }
47     
48       div[name="chinese"]
49     {
50         width:198px;
51         height:20px;
52         border:1px solid Green;
53         color:Green;
54         float:left;
55      
56     }
57     div[name="row"]
58     {
59         height:22px;
60         position :absolute;
61       
62     }
63     #logo
64     {
65         position:absolute; 
66         width:200px; 
67         top:100px; 
68         left:100px; 
69         z-index:10;
70     }
71     
72     #logo img
73     {
74          width:160px; 
75          height:40px;
76     }
77     
78     #txtletterCount
79     {
80          width:20px;
81     }
82     
83     #txtNewLetterTime
84     {
85          width:40px;
86     }
87     
88     #tim
89     {
90         width:50px; 
91         position:absolute; 
92         bottom:0px; 
93         right:0px; 
94         border:1px dotted black;
95     }

 

ps:水平有限，不喜可以喷，但请勿涉及家人！

copyright © Tim demo下载

posted on 2012-07-13 12:46  TimeLangoliers  阅读(5253)  评论(3)  编辑  收藏  举报

导航