效果图
写在前面
遇到的问题
① 当布局完成后，给某一个模块添加了文字后，布局发生改变。原因：将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>
