翻翻游戏
这是一个翻翻游戏，很简单的游戏，但是对我来说是走出去的第一步，请看到的人别喷我哦。我知道代码没有优化，游戏还有BUG，可玩性也不高，目前我还在想办法处理，我知道的不多，请各位有兴趣发现的大神帮忙点拨点拨，在下感激不尽。先感谢我的同事张童鞋，他给了我不小的帮助。
这是游戏截图：
游戏玩法：用鼠标点击天蓝色方块，点击一次显示，第二次点击遮盖；同时只能点开两个格子；两个相同图片，增加相应分数，每种图片分数不同；两个不同图片，还原成遮盖状态；
代码如下图：所有代码都在一个文件中，包含了jquery和我自己的小库，但是没有用到多少里面的东西，代码中只有HZTG.D()是我小库里的，作用是获取制定ID的DOM对象。图片的话，大家有兴趣自己搞个10个图片试试吧。也可以改参数，我在代码中做注释好了。
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 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
5 < title > 2012-1-29 </ title >
6 < style >
7 .child {
8 float : left ;
9 /* border:1px solid #fff; */
10 background : skyblue ;
11 margin : 10px ;
12 border-radius : 5px ;
13 position : relative ;
14 }
15 .cover
16 {
17 width : 100% ;
18 height : 100% ;
19 position : absolute ;
20 left : 0 ;
21 background : #ededed ;
22 overflow : hidden ;
23 z-index : 999 ;
24 border-radius : 5px ;
25 filter : alpha(opacity=50) ;
26 opacity : 0.5 ;
27 }
28 ul,li { list-style : none ; }
29 </ style >
30 < script type ="text/javascript" src ="js/jquery-1.4.1.min.js" ></ script >
31 < script type ="text/javascript" src ="js/pub.js" ></ script >
32 </ head >
33 < body >
34 </ body >
35 </ html >
36 < script >
37 Function.prototype.createInstance = function () {
38 var T = function () { };
39 T.prototype = this .prototype;
40 T.prototype.constructor = this ;
41 var o = new T();
42 this .apply(o, arguments);
43 return o;
44 }
45 function WBoard() {
46 this .allAry = [];
47 this .showAry = [];
48 this .board = document.createElement( " div " );
49 this .board.id = " board " ;
50 document.getElementsByTagName( " body " )[ 0 ].appendChild( this .board);
51 this .board.style.border = " 1px solid #B0B0FF " ;
52 this .board.style.borderRadius = " 5px " ;
53 this .board.style.display = " block " ;
54 this .board.style.position = " relative " ;
55 this .board.style.overflow = " hidden " ;
56 this .board.style.zIndex = " 9999 " ;
57 this .board.style.padding = " 30px 0px 20px 10px " ;
58 this .board.style.margin = " 0 auto " ;
59 this .board.style.background = " url(\"images/board_bg.jpg\") repeat " ;
60 }
61
62 function WChild(relid,id) {
63 if ( ! this ._editAry) this ._editAry = [];
64 this .id = id;
65 this ._editAry.push(id);
66 this .show = false ;
67 this .className = " child " ;
68 this .child = document.createElement( " div " );
69 this .child.id = this .id;
70 this .child.setAttribute( " relid " , relid);
71 this .child.className = this .className;
72 }
73
74 WBoard.prototype.config = {
75 Items: 1 ,
76 I " 130px " ,
77 Iheight: " 125px " ,
78 cols: 5 ,
79 WClothes:[],
80 points: 0 ,
81 time: 30 ,
82 relTime: 30 ,
83 defTime: 30 ,
84 start: false ,
85 timer: null ,
86 useTime: 0 ,
87 zzOpacity: 1 ,
88 zzLock: false
89
90 }
91
92 WBoard.prototype.addChild = function (relid) {
93 this .allAry[ this .allAry.length] = new WChild(relid, this .allAry.length);
94 }
95
96 WBoard.prototype.setChildStyle = function (n) {
97 n.style.width = this .config.Iwidth;
98 n.style.height = this .config.Iheight;
99 }
100
101 WBoard.prototype.setZheZhao = function () {
102 var _opacity = this .config.zzOpacity, _IE = this .config.zzOpacity * 100 ;
103 if ( ! document.getElementById( " zz " )) {
104 var zz = document.createElement( " div " );
105 zz.id = " zz " ;
106 zz.style.zIndex = " 10002 " ;
107 zz.style.position = " absolute " ;
108 zz.style.display = " block " ;
109 zz.style.left = " 0 " ;
110 zz.style.top = " 0 " ;
111 zz.style.opacity = _opacity;
112 zz.style.filter = " alpha(opacity= " + _IE + " ) " ;
113 zz.style.backgroundColor = "" ;
114 zz.style.width = Math.max(document.body.scrollWidth, document.body.clientWidth, $(document).width()) + " px " ; // document.body.clientWidth || document.documentElement.clientWidth;
115 zz.style.height = Math.max(document.body.scrollHeight, document.body.clientHeight, $(document).height()) + " px " ; // document.body.clientHeight || document.documentElement.clientHeight;
116 document.getElementsByTagName( " body " )[ 0 ].appendChild(zz);
117 } else {
118 HZTG.D( " zz " ).style.opacity = _opacity;
119 HZTG.D( " zz " ).style.filter = " alpha(opacity= " + _IE + " ) " ;
120 HZTG.D( " zz " ).style.display = " block " ;
121 }
122
123 }
124
125 WBoard.prototype.clearNode = function (node) {
126 this .cover(node);
127 node.onclick = null ;
128 }
129
130 WBoard.prototype.getLive = function () {
131 var _keyAry = [];
132 for ( var i = 0 ; i < this .allAry.length; i ++ ) {
133 _keyAry.push( "" + this .allAry[i].id + "" );
134 }
135 return _keyAry;
136 }
137
138 WBoard.prototype.kill = function (showId) {
139 var _keyAry = this .getLive();
140 this .allAry.del($.inArray( "" + showId + "" , _keyAry));
141 }
142
143 WBoard.prototype.getPoints = function (n) {
144 var _point, _basePoint = n.getAttribute( " relid " ); // this.config.points;
145 if (_basePoint) { _point = _basePoint * 2 ; }
146 this .config.points = _point + this .config.points;
147 }
148 WBoard.prototype.setPoints = function () {
149 if (HZTG.D( " points " )) {
150 HZTG.D( " points " ).innerHTML = this .config.points;
151 }
152 }
153
154 WBoard.prototype.Buffer = function (node, t) {
155 var sAryVal = node, _this = this ;
156 if ( ! t) { // 入库
157 this .showAry[ this .showAry.length] = sAryVal;
158 var _timer = null ;
159 if ( this .showAry.length > 1 ) {
160 _this.config.zzOpacity = 0.5 ;
161 this .setZheZhao();
162 _timer = window.setTimeout( function () {
163 if (_this.compare(_this.showAry[ 0 ], _this.showAry[ 1 ])) {
164 _this.getPoints(_this.showAry[ 0 ]);
165 _this.clearNode(_this.showAry[ 0 ]);
166 _this.clearNode(_this.showAry[ 1 ]);
167 for ( var i = 0 ; i < 2 ; i ++ ) {
168 _this.kill(_this.showAry[i].id);
169 }
170 _this.setPoints();
171 if (_this.allAry.length == 0 ) {
172 // alert("Congratulations! You Win!");
173 if (_this.config.timer) { clearInterval(_this.config.timer); }
174 _this.board.style.width = _this.board.offsetWidth + " px " ;
175 _this.board.style.height = _this.board.offsetHeight + " px " ;
176 // _this.board.innerHTML = "";
177 _this.config.zzOpacity = 0.5 ;
178 _this.setZheZhao();
179 _this.result();
180 }
181 } else {
182 for ( var i = 0 ; i < 2 ; i ++ ) {
183 _this.showAry[i].innerHTML = "" ;
184 _this.takeOff(_this.showAry[i]);
185 }
186 }
187 _this.showAry.length = 0 ;
188 if (_this.config.time > 0 ){
189 HZTG.D( " zz " ).style.display = " none " ;
190 }
191 }, " 500 " );
192 }
193 } else { // 出库
194 this .showAry.length = 0 ;
195 }
196 }
197
198 WBoard.prototype.compare = function (n1, n2) {
199 return (n1.getAttribute( " relid " ) == n2.getAttribute( " relid " ));
200 }
201
202 WBoard.prototype.addEvent = function (o, name, fn, argsObj) {
203 var eventHander = fn;
204 var _this = this ;
205 if (argsObj) {
206 eventHander = function () {
207 fn.call(_this, argsObj);
208 }
209 }
210 if (o.addEventListener) return o.addEventListener(name, eventHander, false );
211 return o.attachEvent( ' on ' + name, eventHander);
212 }
213
214 WBoard.prototype.cover = function (n) {
215 var _cover = document.createElement( " div " );
216 _cover.className = " cover " ;
217 n.appendChild(_cover);
218 }
219 WBoard.prototype.setTimer = function () {
220 this .config.start = true ;
221 var timeL = parseInt(HZTG.D( " timer " ).style.width), beginStep = 2 , endStep = false , comparand = 0 , s = 0 , step = 0 , secTime = 0 ;
222 if ( this .config.start) {
223 var _sL = 0 , _step = 0 , _this = this ;
224 this .config.timer = window.setInterval( function () {
225 s ++ ;
226 _step = timeL % _this.config.time;
227 step = timeL / _this.config.time;
228 if (_step == comparand) {
229 var _timeL = $( " #timer " ).width();
230 _timeL -= step;
231 if ( ! endStep) {
232 if ( ! (s > _this.config.time)) {
233 $( " #timer " ).width(_timeL);
234 if (s == _this.config.time) {
235 clearInterval(_this.config.timer);
236 _this.result();
237 }
238 }
239 } else {
240 secTime ++ ;
241 if ( ! (secTime > _this.config.time)) {
242 $( " #timer " ).width(_timeL);
243 if (secTime == _this.config.time) {
244 clearInterval(_this.config.timer);
245 _this.result();
246 }
247 }
248 } // end if ！endStep
249 } else {
250 endStep = true ;
251 if ( ! (s > _this.config.relTime)) {
252 var _timeL = $( " #timer " ).width();
253 _timeL -= beginStep;
254 _sL = -- _this.config.time;
255 _this.config.time = _sL;
256 timeL = _timeL;
257 $( " #timer " ).width(_timeL);
258 if (s == _this.config.relTime) {
259 clearInterval(_this.config.timer);
260 _this.result();
261 }
262 }
263 } // end _step == comparand
264 _this.config.useTime = s + 1 ;
265 }, " 1000 " );
266 }
267 }
268 WBoard.prototype.nav = function () {
269 var _this = this ;
270 if ( ! HZTG.D( " pointsB " )) {
271 var _timerB = document.createElement( " span " );
272 _timerB.style.zIndex = " 100004 " ;
273 _timerB.style.padding = " 3px 5px " ;
274 _timerB.style.position = " absolute " ;
275 _timerB.style.fontSize = " 14px " ;
276 _timerB.style.fontWeight = " bold " ;
277 _timerB.style.color = " #fff " ;
278 _timerB.style.right = " 64% " ;
279 _timerB.style.top = " 2px " ;
280 _timerB.style.display = " inline-block " ;
281 _timerB.style.marginRight = " 3px " ;
282 this .board.appendChild(_timerB);
283 _timerB.innerHTML = " Timer : " ;
284 }
285
286 if ( ! HZTG.D( " timerContainer " )) {
287 var _timerContainer = document.createElement( " span " );
288 _timerContainer.id = " timerContainer " ;
289 _timerContainer.style.zIndex = " 100004 " ;
290 _timerContainer.style.width = " 100px " ;
291 _timerContainer.style.padding = " 3px " ;
292 _timerContainer.style.position = " absolute " ;
293 _timerContainer.style.background = " url(\"images/nav_bg.jpg\") repeat " ;
294 _timerContainer.style.right = " 47% " ;
295 _timerContainer.style.top = " 2px " ;
296 _timerContainer.style.display = " inline-block " ;
297 _timerContainer.style.marginRight = " 3px " ;
298 this .board.appendChild(_timerContainer);
299 if ( ! HZTG.D( " timer " )) {
300 var _timerDiv = document.createElement( " span " );
301 _timerDiv.id = " timer " ;
302 _timerDiv.style.zIndex = " 100004 " ;
303 _timerDiv.style.position = " relative " ;
304 _timerDiv.style.background = " #f50 " ;
305 _timerDiv.style.width = " 100px " ;
306 _timerDiv.style.height = " 14px " ;
307 _timerDiv.style.display = " inline-block " ;
308 if (HZTG.D( " timerContainer " )) { HZTG.D( " timerContainer " ).appendChild(_timerDiv); }
309 // _timerDiv.innerHTML = "";
310 }
311 }
312
313
314 if ( ! HZTG.D( " pointsB " )) {
315 var _pointsB = document.createElement( " span " );
316 _pointsB.style.zIndex = " 100004 " ;
317 _pointsB.style.padding = " 3px 5px " ;
318 _pointsB.style.position = " absolute " ;
319 _pointsB.style.fontSize = " 14px " ;
320 _pointsB.style.fontWeight = " bold " ;
321 _pointsB.style.color = " #fff " ;
322 _pointsB.style.right = " 27% " ;
323 _pointsB.style.top = " 2px " ;
324 _pointsB.style.display = " inline-block " ;
325 _pointsB.style.marginRight = " 3px " ;
326 this .board.appendChild(_pointsB);
327 _pointsB.innerHTML = " Your Points : " ;
328 }
329 if ( ! HZTG.D( " points " )) {
330 var _points = document.createElement( " span " );
331 _points.id = " points " ;
332 _points.style.zIndex = " 100004 " ;
333 _points.style.padding = " 3px 5px " ;
334 _points.style.border = " 1px solid #fff " ; // #CAE1E6
335 _points.style.position = " absolute " ;
336 _points.style.fontSize = " 14px " ;
337 _points.style.fontWeight = " bold " ;
338 _points.style.background = " url(\"images/nav_bg.jpg\") repeat " ;
339 _points.style.borderRadius = " 5px " ;
340 _points.style.color = " #fff " ;
341 _points.style.width = " 60px " ;
342 _points.style.textAlign = " right " ;
343 _points.style.right = " 15% " ;
344 _points.style.top = " 2px " ;
345 _points.style.display = " inline-block " ;
346 _points.style.marginRight = " 3px " ;
347 this .board.appendChild(_points);
348 _points.innerHTML = this .config.points;
349 }
350 if ( ! HZTG.D( " replay " )) {
351 var _replay = document.createElement( " span " );
352 _replay.id = " replay " ;
353 _replay.style.zIndex = " 100004 " ;
354 _replay.style.padding = " 3px 5px " ;
355 _replay.style.border = " 1px solid #fff " ; // #CAE1E6
356 _replay.style.position = " absolute " ;
357 _replay.style.fontSize = " 14px " ;
358 _replay.style.fontWeight = " bold " ;
359 _replay.style.background = " url(\"images/nav_bg.jpg\") repeat " ;
360 _replay.style.borderRadius = " 5px " ;
361 _replay.style.color = " #fff " ;
362 _replay.style.right = " 0 " ;
363 _replay.style.top = " 2px " ;
364 _replay.style.display = " inline-block " ;
365 _replay.style.marginRight = " 3px " ;
366 _replay.style.cursor = " pointer " ;
367 this .board.appendChild(_replay);
368 _replay.innerHTML = " Replay " ;
369 // this.addEvent(_replay, "click", this.draw)
370 _replay.onclick = function () {
371 _this.draw();
372 }
373 }
374 }
375
376 WBoard.prototype.result = function () {
377 this .setZheZhao();
378 this .config.time = 0 ;
379 if ( ! HZTG.D( " result " )){
380 this .config.zzLock = true ;
381 var _result = document.createElement( " div " );
382 _result.id = " result " ;
383 _result.style.display = " block " ;
384 _result.style.position = " absolute " ;
385 _result.style.top = " 20% " ;
386 _result.style.left = " 40% " ;
387 _result.style.zIndex = " 100007 " ;
388 // alert(this.board.style.width);
389 _result.style.width = this .board.offsetWidth / 2 + " px " ;
390 _result.style.height = this .board.offsetHeight / 2 + " px " ;
391 _result.style.margin = " 0 auto " ;
392 _result.style.filter = " alpha(opacity=100) " ;
393 _result.style.opacity = " 1 " ;
394 _result.style.background = " url(\"images/youwin.png\") 50% 20% #ededed no-repeat " ;
395 document.getElementsByTagName( " body " )[ 0 ].appendChild(_result);
396 } else {
397 // HZTG.D("rReplay").style.display = "block";
398 HZTG.D( " result " ).style.display = " block " ;
399 }
400 HZTG.D( " result " ).innerHTML = " <ul style=\"70%; height:45%; position:relative; left:5%; top:45%; line-height:34px; font-size:26px; font-weight:bold; color:#f60;\"><li>You Use : " + this .config.useTime + " s</li><li>You Earn : " + this .config.points + " points</li><li></li></li></ul> " ;
401 if ( ! HZTG.D( " rReplay " )) {
402 var rReplay = document.createElement( " div " );
403 rReplay.id = " rReplay " ;
404 rReplay.style.zIndex = " 100008 " ;
405 rReplay.style.position = " relative " ;
406 rReplay.style.padding = " 3px 5px " ;
407 rReplay.style.border = " 1px solid #fff " ; // #CAE1E6
408 rReplay.style.fontSize = " 14px " ;
409 rReplay.style.marginTop = " 50px " ;
410 rReplay.style.left = " 40% " ;
411 rReplay.style.fontWeight = " bold " ;
412 rReplay.style.background = " url(\"images/nav_bg.jpg\") repeat " ;
413 rReplay.style.borderRadius = " 5px " ;
414 rReplay.style.color = " #fff " ;
415 rReplay.style.display = " inline-block " ;
416 rReplay.style.cursor = " pointer " ;
417 HZTG.D( " result " ).appendChild(rReplay);
418 rReplay.innerHTML = " Replay " ;
419 // this.addEvent(_replay, "click", this.draw)
420 var _this = this ;
421 rReplay.onclick = function () {
422 _this.draw();
423 }
424 }
425 // alert("game over! you use " + this.config.useTime + "s and earn " + this.config.points + "");
426 }
427
428 WBoard.prototype.dress = function (n) {
429 var _haveClothes = this .config.WClothes.length;
430 for ( var i = 0 ; i < _haveClothes; i ++ ) {
431 if (n.getAttribute( " relid " ) == i) {
432 // n.innerHTML = "<img src=\"" + this.config.WClothes[i] + "\" width=\"98\" height=\"98\" style=\"display:none\"/>";
433 n.style.background = " url(\" " + this .config.WClothes[i] + " \") no-repeat " ;
434 }
435 }
436 }
437 WBoard.prototype.takeOff = function (n) {
438 n.style.background = " skyblue " ;
439 }
440
441 WBoard.prototype.clear = function () {
442 if (HZTG.D( " result " )){HZTG.D( " result " ).style.display = " none " ;}
443 if (HZTG.D( " zz " )){HZTG.D( " zz " ).style.display = " none " ;}
444 this .config.points = 0 ;
445 this .allAry.length = 0 ;
446 this .showAry.length = 0 ;
447 this .board.innerHTML = "" ;
448 }
449
450 WBoard.prototype.init = function () {
451 this .clear();
452 for ( var i = 0 ; i < this .config.Items; i ++ ) {
453 this .addChild(i);
454 this .addChild(i);
455 }
456 this .board.style.width = parseInt( this .config.cols * 152 + 10 ) + " px " ;
457 var aAry = this .allAry;
458 var aL = aAry.length;
459 var _this = this ;
460 var d = 0 ;
461 for ( var i = 0 ; i < aL; i ++ ) {
462
463 this .setChildStyle(aAry[i].child);
464 aAry[i].child.onclick = function () {
465 var sAryKey = this .getAttribute( " relid " );
466
467 if ( this .innerHTML.length == 0 ) { // 入库
468 this .innerHTML = " " ; // 暂时方便判断是否入库用中文状态下的空格填充
469 _this.dress( this );
470 _this.Buffer( this , false );
471 } else { // 出库
472 this .innerHTML = "" ;
473 _this.takeOff( this );
474 _this.Buffer( this , true );
475 }
476 }
477 // this.addEvent(aAry[i].child, "click", this.beClick, aAry[i].child);
478 }
479 this .allAry.sort( this .random);
480 }
481
482 WBoard.prototype.draw = function () {
483 this .init();
484 this .nav();
485 var aL = this .allAry.length;
486 var str = "" ;
487 for ( var i = 0 ; i < aL; i ++ ) {
488 this .board.appendChild( this .allAry[i].child);
489 }
490 this .config.time = this .config.defTime;
491 this .setTimer();
492 }
493
494 WBoard.prototype.replay = function () {
495 this .draw();
496 }
497
498 WBoard.prototype.beClick = function (node) {
499 var sAryKey = node.getAttribute( " relid " );
500 if (node.innerHTML == "" ) { // 入库
501 // node.innerHTML = sAryKey;
502 this .dress(node);
503 this .Buffer(node, false );
504 } else { // 出库
505 // node.innerHTML = "";
506 this .takeOff(node);
507 this .Buffer(node, true );
508 }
509 }
510
511 WBoard.prototype.random = function (a, b) {
512 return Math.random() > . 5 ? - 1 : 1 ; // 用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
513 }
514
515 Array.prototype.del = function (n) {
516 if (n < 0 ) return false ;
517 else {
518 this .splice(n, 1 ); // .concat(this.slice(n + 1, this.length));
519 return this ;
520 }
521 }
522 var testBoard = new WBoard( " o " );
523 testBoard.config.Items = 10 ;//这里是要显示的图片种类，最终显示Items*2的格子数，就是n对
524 testBoard.config.WClothes = [ " images/apple1.png " , " images/chilli1.png " , " images/mushroom1.png " , " images/lotusroot1.png " , " images/grape1.png " , " images/carrot1.png " , " images/banana1.png " , " images/cucumber1.png " , " images/cherry1.png " , " images/pomegranate1.png " ];//这里的图片数必须=Items
525 testBoard.draw();
526
527 </ script >
标签: javascript 游戏 html css
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did46870