jQuery基础练习 —— 简易版2048

ゝ一纸荒年。 2023-08-17 17:16 47阅读 0赞

##### 效果图 #####

![在这里插入图片描述][20190930211208133.gif]

##### 写在前面 #####

###### 遇到的问题 ######

① 当布局完成后，给某一个模块添加了文字后，布局发生改变。原因：将`div`设成`display:inline-block`导致。 解决：① 给所有`div`添加浮动。② 添加`vertical-align:middle`  
② 若想通过`$.`调用方法/属性，可将方法/属性写到`$.extend({})`中  
③ 在游戏中会出现多次累加的情况，此时可给每一个带数字的方块添加一个`data-add`属性，给其赋初值为0。当某一方块已经进行过累加操作时，将该方块的`data-add`赋值为1。在方块滑动的过程中，若当前滑块的`data-add`值为1，则不再与邻接方块进行累加值操作。在每一个触摸结束，都将所有方块的`data-add`值赋值为0，即重新开始新的一轮操作。（在这里注意滑动过程中是判断当前方块的`data-add`且在累加后给当前方块的前一个/后一个方块的`data-add`赋值为1）  
④ 在游戏中为了控制游戏是否结束，可判断`emptyArray.length`是否为0，且页面任意两两相邻元素是否都不相同。若两者都满足，则游戏结束。

###### 未解决的问题：？？？？ ######

① 若在创建页面元素时直接将相同的元素`push`进`allArray`以及`emptyArray`中，会出现截取一个数组，另一个数组会受影响。

###### 关键步骤以及思想 ######

> ① 在创建元素时，将行索引以及该行的所有列元素组成的集合`push`进`allArray`中。  
> ② 在随机生成数字前遍历`allArray`数组，将其中没有值的方块的索引存入`emptyArray`中。在生成`emptyArray`后判断该数组的长度是否为0，若为0不生成随机数字且游戏失败，若不为0，则生成随机数字。随机生成的数字是在`numList:[2,4]`中随机选择的，并且根据`emptyArray`中的空方块索引集合随机生成索引，并将数字赋值给该索引对应的方块。  
> ③ 在触摸移动事件中先判断触摸的方向。根据不同的方向做不同的逻辑判断与赋值。  
> ④ 以向左为例，当向左滑动时，每一行从后向前遍历列。当当前方块的值不为空时才进行重新赋值。当当前方块的前一个方块的值为空时，直接将当前方块的值与样式赋值给前一个方块。若前一个方块的值不为空且与当前方块的值相等时，两个方块的值做累加并赋值给前一个方块。否则不进行任何操作。  
> ⑤ 实际上在移动中并不是一同朝一个方向移动，只是在触摸的过程中，多次触发`touchmove`事件对应的函数，则最终看到的效果是所有方块一同朝一个方向移动

###### 完整代码 ######

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=400,user-scalable=no">
    </head>
    <style> *{ margin:0; padding:0; } body{ overflow: hidden; background:silver; } ul,li{ list-style: none; } .map{ width: 400px; height: 400px; position: absolute; left:0; right:0; top:0; bottom:0; margin:auto; } .row{ font-size: 0; } .row>div{ /*float:left;!*加了文字后，布局发生改变，添加float后正常*!*/ background: pink; display: inline-block; vertical-align: middle;/*加了文字后布局改变是因为给div设置了inline-block的原因，加vertical-align后正常*/ border:1px solid black; width: 100px; height: 100px; box-sizing: border-box; font-size: 30px; text-align: center; line-height: 100px; } .color2{ background: orange !important; color:white; } .color4{ background:red !important; color:white; } .color8{ background: #f7ff86 !important; color:white; } .color16{ background: #4eff5e !important; color:white; } .color32{ background: #5be7ff !important; color:white; } .color64{ background: #141dff !important; color:white; } .color128{ background: #ff5853 !important; color:white; } .color256{ background: #00ffd2 !important; color:white; } </style>
    <body>
    <div class="map">
    </div>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-3.0.0.js"></script>
    <script> var startX; var startY; var moveX; var moveY; var end=false; $.extend({ allArray:[], emptyArray:[], row:4, column:4, numList:[2,4], //将所有方法让$继承,最后可直接通过$打点调用出来 randomIndex:function(array){ return Math.floor(Math.random()*array.length) }, createNum:function(){ var that = this; that.emptyArray=[]; that.allArray.map(function (valOuter,index) { var tempList = []; valOuter[1].map(function (val,vindex) { if(!val.html()){ tempList.push(vindex) }else{ val.attr("data-add",0);//通过data-add来控制只累加一次！ } }); if(tempList.length){ that.emptyArray.push([index,tempList]); } }); console.log($.emptyArray.length) if(!$.emptyArray.length){ alert("游戏失败！") }else{ var rowIndex = that.randomIndex(that.emptyArray); var colIndex = that.randomIndex(that.emptyArray[rowIndex][1]); var numIndex = that.randomIndex(that.numList); console.log(that.emptyArray[rowIndex][0],that.emptyArray[rowIndex][1][colIndex]); that.allArray[that.emptyArray[rowIndex][0]][1][that.emptyArray[rowIndex][1][colIndex]].html(that.numList[numIndex]); that.allArray[that.emptyArray[rowIndex][0]][1][that.emptyArray[rowIndex][1][colIndex]].addClass("color"+that.numList[numIndex]); } }, createEle:function () { var that = this; for(var i=0;i<that.row;i++){ var colArray = []; var indexArray = [] var divEle = $("<div></div>");//创建jQuery对象 divEle.addClass("row"); for(var j=0;j<that.column;j++){ var sonEle = $("<div></div>"); divEle.append(sonEle); colArray.push(sonEle); indexArray.push(j); } that.allArray.push([i,colArray]); that.emptyArray.push([i,indexArray]); $(".map").append(divEle); } } }); $(".map").on("touchstart touchmove touchend",function (e) { if(e.type=="touchstart"){ startX = e.originalEvent.changedTouches[0].pageX; startY = e.originalEvent.changedTouches[0].pageY; }else if(e.type=="touchmove"){ moveX = e.originalEvent.changedTouches[0].pageX; moveY = e.originalEvent.changedTouches[0].pageY; var offsetX = moveX - startX; var offsetY = moveY - startY; if(Math.abs(offsetY)>Math.abs(offsetX) && offsetY>0){ //向下 for(var i=0;i<$.allArray[0][1].length;i++){ for(var j=0;j<$.allArray.length-1;j++){ if($.allArray[j][1][i].html()){ if(!$.allArray[j+1][1][i].html()){ $.allArray[j+1][1][i].html($.allArray[j][1][i].html()); $.allArray[j+1][1][i].addClass("color"+ $.allArray[j+1][1][i].html()); $.allArray[j][1][i].toggleClass(); $.allArray[j][1][i].html(""); }else{ if($.allArray[j+1][1][i].html()==$.allArray[j][1][i].html() && $.allArray[j][1][i].attr("data-add")==0){ $.allArray[j+1][1][i].html(parseInt($.allArray[j][1][i].html())+parseInt($.allArray[j+1][1][i].html())); $.allArray[j+1][1][i].addClass("color"+ $.allArray[j+1][1][i].html()); $.allArray[j][1][i].toggleClass(); $.allArray[j][1][i].html(""); $.allArray[j+1][1][i].attr("data-add",1); } } } } } }else if(Math.abs(offsetY)>Math.abs(offsetX) && offsetY<0){ //向上 for(var i=0;i<$.allArray[0][1].length;i++){ for(var j=$.allArray.length-1;j>0;j--){ if($.allArray[j][1][i].html()){ if(!$.allArray[j-1][1][i].html()){ $.allArray[j-1][1][i].html($.allArray[j][1][i].html()); $.allArray[j-1][1][i].addClass("color"+ $.allArray[j-1][1][i].html()); $.allArray[j][1][i].toggleClass(); $.allArray[j][1][i].html(""); }else{ if($.allArray[j-1][1][i].html()==$.allArray[j][1][i].html() && $.allArray[j][1][i].attr("data-add")==0){ $.allArray[j-1][1][i].html(parseInt($.allArray[j][1][i].html())+parseInt($.allArray[j-1][1][i].html())); $.allArray[j-1][1][i].addClass("color"+ $.allArray[j-1][1][i].html()); $.allArray[j][1][i].toggleClass(); $.allArray[j][1][i].html(""); $.allArray[j-1][1][i].attr("data-add",1) } } } } } }else if(Math.abs(offsetY)<Math.abs(offsetX) && offsetX<0){ //向左 for(var i=0;i<$.allArray.length;i++){ var column = $.allArray[i][1]; for(var j=column.length-1;j>0;j--){ if(column[j].html()){ if(!column[j-1].html()){ column[j-1].html(column[j].html()); column[j-1].addClass("color"+column[j].html()); column[j].toggleClass(); column[j].html("") }else{ if(column[j-1].html()==column[j].html() &&column[j].attr("data-add")==0){ column[j-1].html(parseInt(column[j].html())+parseInt(column[j-1].html())); column[j-1].addClass("color"+column[j-1].html()); column[j].toggleClass(); column[j].html(""); column[j-1].attr("data-add",1) } } } } $.allArray[i][1] = column; } }else{ //向右 for(var i=0;i<$.allArray.length;i++){ var column = $.allArray[i][1]; for(var j=0;j<column.length-1;j++){ if(column[j].html()){ if(!column[j+1].html()){ column[j+1].html(column[j].html()); column[j+1].addClass("color"+column[j].html()); column[j].toggleClass(); column[j].html("") }else{ if(column[j+1].html()==column[j].html() && column[j].attr("data-add")==0){ column[j+1].html(parseInt(column[j].html())+parseInt(column[j+1].html())); column[j+1].addClass("color"+column[j+1].html()); column[j].toggleClass(); column[j].html(""); column[j+1].attr("data-add",1); } } } } $.allArray[i][1] = column; } } }else{ $.createNum(); } }); $(document).ready(function () { $.createEle(); $.createNum(); }) </script>
    </body>
    </html>

[20190930211208133.gif]: /images/20230808/19425c2b52b84ed7992349e3cca79271.png