这是一个翻翻游戏，很简单的游戏，但是对我来说是走出去的第一步，请看到的人别喷我哦。我知道代码没有优化，游戏还有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>