JS--2048小游戏

游戏规则

每次随机产生2 4 上下左右滑动时相同的数字相加 直到不能继续相加时游戏结束
map 中数字代表对应数字 0 2 4 8 16 32···

var map=[
        [0,0,0,0],
        [0,0,0,0],
        [0,0,0,0],
        [0,0,0,0]
    ];	
     var result=[];//放div

1 创建地图

创建4*4数组和div，将div放入父元素和数组

	function creatMap(ele){
        ele.forEach(function (rvalue,rindex) {
            var row=document.createElement("div"); //生成行div 添加row类
            row.className="row";
            result.push([]);
            rvalue.map(function (cvalue,cindex) {
                var cloumn=document.createElement("div");//生成列div 每一个添加color0类
                cloumn.className="cloumn";
                row.appendChild(cloumn);//column列插入到行中
                result[rindex].push(cloumn);
            });
            par.appendChild(row); //row行插入到父元素par
        });
    }

2 开始游戏&结束游戏

• 随机生成2、4概率分别为0.9、0.1，并放入map非0位置中，分数清零
• 当map中找不到 0 结束游戏

    function gameStart(){
        var newgame=document.getElementsByClassName("newgame")[0];
        newgame.onclick=function(){
            resetMap();
            var num1=randomNum();
            var num2=randomNum();
            randomLoc(num1);
            randomLoc(num2);
            renderPage();
        }
    }
 //  随机生成2-4概率分别为0.9-0.1
    function randomNum(){
         return Math.random()>0.9?4:2;
       // console.log(Math.random() > 0.8 ? 4 : 2);
    }
   //随机生成索引0-3
    function randomIndex(){
        return Math.floor(Math.random()*4);
    }
    //将生成数字随机放入 map
    function randomLoc(num){
    //当map中找不到 0 结束游戏
       map.forEach(function (valr) {
            valr.forEach(function(valc){
                if(valc==0){
                    count++;
                }
            }) ;
        });        
        if(!count){//0 * 0 进
            alert("gameover");
        }
        for (;;){//不停寻找非0位置
            var rindex=randomIndex();
            var cindex=randomIndex();
            if(map[rindex][cindex]==0){
                map[rindex][cindex]=num;
                break;//找到位置停止循环
            }
        }
    }

3 即时渲染

根据map内容渲染页面，重置CSS类cloumn，添加对应类color 2 4 8 16 32···

 //根据map内容渲染页面
    function renderPage(){
        for(var r=0;r< map.length;r++){
            for(var c=0;c<map[r].length;c++){
                result[r][c].className="cloumn"; // 类 全部重置为cloumn
                if(map[r][c]!=0){
                    result[r][c].innerHTML=map[r][c];
                    result[r][c].classList.add("color"+map[r][c]);
                }
            }
        }
    }
//重置map渲染，result[][]内容和类cloumn
    function resetMap(){
        for(var r=0;r< map.length;r++){
            for(var c=0;c<map[r].length;c++) {
                map[r][c]=0;
                result[r][c].innerHTML="";
                result[r][c].className="cloumn";
                }
            }
    }

4.触屏上下左右滑动

    var xstart,ystart,xend,yend, xse,yse,way;          
    par.addEventListener("touchstart",function(e){
        var touch= e.touches[0];
        xstart= touch.pageX;
        ystart= touch.pageY;
    });
    par.addEventListener("touchmove",function(e){
        var touch= e.touches[0];
        xend= touch.pageX;
        yend= touch.pageY;
    });
    par.addEventListener("touchend",function(e) {
        xse = xstart - xend;
        yse = ystart - yend;
        way=changeWay(xse, yse);
        switch (way){
            case "left":moveLeft();break;
            case "right":moveRight();break;
            case "up":moveUp();break;
            case "down":moveDown();break;
        }
    });
//判断触屏上下左右
    function changeWay(x,y){//（xse，yse）
            if(Math.abs(x) >Math.abs(y) && x>5){
                return "left";
            }else if(Math.abs(x) >Math.abs(y) && x<5){
                return "right";
            }else if(Math.abs(x) <Math.abs(y) && y<5){
                return "down";
            }else if(Math.abs(x) <Math.abs(y) && y>5){
                return "up";
            }
    }    

5.滑动map改变

左滑时：对map中每一行数字从左边开始比较当前数字和其左边所有数字(从左边第一个到头)
右滑：0-3行>3-0列，从右边开始对当前数字和其左边所有数字比较(从右边第一个到头)
上滑：0-3列>0-3行，从下边开始对当前数字和其上边所有数字比较
下滑：0-3列>3-0行，从下上边(0行)开始对当前数字和其下边所有数字比较

var map=[
        [0,0,0,0],
        [0,2,0,2],
        [0,2,0,0],
        [0,0,0,0]
    ];	

左滑时：对每一行数字从左边开始比较当前数字和其左边所有数字(从左边第一个到头)
当前数字为0则出，相等合并并计分，不相等且左边一个数字为0互换

       function transLeft(){
           for(var r=0;r<=3;r++){//0-3hang
                for(var c=0;c<=3;c++){//0-3lie
                    //本身 为0 退出
                    if(map[r][c]==0){
                        continue;
                    }
                    else{//与左边所有数字比较
                        var count=0;
                        for(var i=c-1;i>=0;i--){
                        //当前的数map[r][i+1] 左边的数 map[r][i]
                            // 相等合并  一个数只能合并一次
                            if(map[r][i+1] == map[r][i] && !count && result[r][i].getAttribute("data-add")== "no"){
                                count++;
                                //左边合并
                                map[r][i] = map[r][i+1]*2;
                                //合并数目 +到分数上
                                var num=map[r][i];
                                score+=num;
                                result[r][i].setAttribute("data-add","yes");
                                //当前清零
                                map[r][i+1]=0;
                            }//左边为0  交换位置
                            else if(map[r][i]==0){
                                var temp=map[r][i+1];
                                map[r][i+1] = map[r][i];
                                map[r][i] = temp;
                            }
                        }
                    }
                }
           }
       }