zoukankan      html  css  js  c++  java
  • 我的第一个javascript游戏展示

      这是一个翻翻游戏,很简单的游戏,但是对我来说是走出去的第一步,请看到的人别喷我哦。我知道代码没有优化,游戏还有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>
  • 相关阅读:
    mouse_event模拟鼠标滚轮
    润乾报表配置技术路线
    建筑 物件 开心背单词 读句子,单词,字母,看图例, 翻译,看动画
    文字过渡动画,曲线过渡动画,,使用这个插件assign shape keys
    运动锻炼 开心背单词 读句子,单词,字母,看图例, 翻译,看动画,学英语,轻松背单词,简单背单词
    blender293 内置插件 精度绘画控件,PDT学习003,pdt tangents 切线
    日常用品 背单词 读句子 看图片 读单词 读字母 翻译, 看动画 学英语
    blender293 内置插件 精度绘画控件,PDT学习 precision drawing tools
    乔布斯 背单词 02 读句子 单词 字母 翻译,看动画 学英语 名言 我菜顾我在,我菜故我在,blender加python
    狐狸 和 乌鸦 英语 朗读句子 背单词
  • 原文地址:https://www.cnblogs.com/wangtuda/p/2892393.html
Copyright © 2011-2022 走看看