js 2048的實現

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=400,maximum-scale=3.0,minimum-scale=0.5,user-scalable=no">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: silver;
            overflow: hidden;
        }

        .map {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 400px;
            height: 400px;
            background: #fff5e7;
        }

        .hang {
            height: 100px;
        }

        .hang > div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            float: left;
            box-sizing: border-box;
            text-align: center;
            font-size: 30px;
            line-height: 100px;
            color: #fff;
        }

        .color2 {
            background: orange;
        }

        .color4 {
            background: #ffef1b;
        }

        .color8 {
            background: #f61bff;
        }

        .color16 {
            background: #ff1f15;
        }

        .color32 {
            background: #22bbff;
        }
        .color64{
            background: #22bbff;
        }
        .color128{
            background: #ff020c;
        }
        .color256{
            background: #ffe921;
        }
        .color512{
            background: #34ff24;
        }
    </style>
</head>
<body>
<div class="map">

</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    /*
     * 2048分析
     * 畫地圖
     * 構建地圖數組
     * */
    //dom元素生成
    //使用語法是jquery  extend繼承  合併對象
    $.extend({
        h_td: 4,
        v_td: 4,
        mapArray: [],
        createDOM: function () {
            for (var i = 0; i < this.h_td; i++) {
                var array = [];
                var div = $("<div></div>");
                div.addClass("hang");
                for (var k = 0; k < this.v_td; k++) {
                    var u_map = $("<div></div>");
                    u_map.addClass("user");
                    array.push(u_map);
                    div.append(u_map);
                }
                $(".map").append(div);
                this.mapArray.push(array);
            }
        },
        number: [2],
        randomNum: function (arr) {
            //直接生成2,4
            return Math.floor(Math.random() * arr.length);
        },
        changeNumber: function (dom) {
            //檢測當前的位置有沒有數字
            if (parseInt(dom.html())) {
                return false;
            }
            else {
                return true;
            }
        },
        saveNullText: [],
        showNum: function () {
            //隨機一個值
            var that = this;
            that.saveNullText = [];
            that.mapArray.map(function (val, index) {
                var nullarr = [];
                val.map(function (value, vindex) {
                    if (that.changeNumber(value)) {
                        nullarr.push(vindex);
                    }
                });
                if (nullarr.length) {
                    that.saveNullText.push([
                        index,
                        nullarr
                    ]);
                }
            });
            //滑動之後檢測還有沒有空餘的位置生成數字
            var alen = that.saveNullText.length;
            var len = that.saveNullText[0][1].length;
            console.log(alen, len, that.saveNullText[0][1]);
            if (alen == 0  && len == 0) {
                alert("結束");
                return;
            }
            //隨機行
            var hindex, vindex, arrindex;
            do {
                arrindex = that.randomNum(that.saveNullText);
                hindex = that.saveNullText[that.randomNum(that.saveNullText)][0];
                vindex = that.saveNullText[arrindex][1][that.randomNum(that.saveNullText[arrindex][1])];
                if (!parseInt(that.mapArray[hindex][vindex].html())) {
                    break;
                }
            } while (true);
            var text = that.number[that.randomNum(that.number)];
            that.mapArray[hindex][vindex].html(text);
            that.mapArray[hindex][vindex].addClass("color" + text);
            that.saveNullText[arrindex][1].splice(arrindex, 1);
        },
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0,
        addEventTouch: function () {
            var that = this;
            $(".map").on("touchstart touchmove touchend", function (e) {
                if (e.type == "touchstart") {
                    that.startX = e.originalEvent.changedTouches[0].pageX;
                    that.startY = e.originalEvent.changedTouches[0].pageY;
                }
                else if (e.type == "touchmove") {
                    that.endX = e.originalEvent.changedTouches[0].pageX;
                    that.endY = e.originalEvent.changedTouches[0].pageY;
                }
                else {
                    var x = that.endX - that.startX;
                    var y = that.endY - that.startY;
                    that.silderText(that.returnWay(x, y));
                }
            });
        },
        silderText: function (res) {
            var that = this;
            $(".user").attr("data-add", "0");
            switch (res) {
                case "left":
                    for (var i = that.h_td - 1; i >= 0; i--) {
                        for (var k = that.v_td - 1; k >= 0; k--) {
                            var num = parseInt(that.mapArray[i][k].html());
                            if (num && k - 1 >= 0) {
                                var before = parseInt(that.mapArray[i][k - 1].html());
                                if (before) {
                                    if (before == num && that.mapArray[i][k].attr("data-add") == "0") {
                                        //考慮疊加
                                        that.mapArray[i][k].removeClass().html("");
                                        that.mapArray[i][k - 1].removeClass().html(num + before).addClass("user color" + (num + before));
                                        that.mapArray[i][k - 1].attr("data-add", "1");
                                        i++;
                                        break;
                                    }
                                    else {
                                        //前面有不一樣的  全部往前移動
                                        if (that.mapArray[i][k - 2] && !parseInt(that.mapArray[i][k - 2].html())) {
                                            that.mapArray[i][k - 2].html(before).removeClass().addClass("user color" + before);
                                            that.mapArray[i][k - 1].html(num).removeClass().addClass("user color" + num);
                                            that.mapArray[i][k].removeClass().html("");
                                            i++;
                                            break;
                                        }

                                    }
                                }
                                else {
                                    that.mapArray[i][k].removeClass().html("");
                                    that.mapArray[i][k - 1].removeClass().html(num).addClass("user color" + num);
                                    i++;
                                    break;
                                }
                            }
                        }
                    }
                    break;
                case "right":
                    for (var i = 0; i < that.h_td; i++) {
                        for (var k = 0; k < that.v_td; k++) {
                            var num = parseInt(that.mapArray[i][k].html());
                            if (num && k + 1 <= 3) {
                                var before = parseInt(that.mapArray[i][k + 1].html());
                                if (before) {
                                    if (before == num && that.mapArray[i][k].attr("data-add") == "0") {
                                        //考慮疊加
                                        that.mapArray[i][k].removeClass().html("");
                                        that.mapArray[i][k + 1].removeClass().html(num + before).addClass("user color" + (num + before));
                                        that.mapArray[i][k + 1].attr("data-add", "1");
                                        i--;
                                        break;
                                    }
                                    else {
                                        //前面有不一樣的  全部往前移動
                                        if (k + 2 <= 3 && that.mapArray[i][k + 2] && !parseInt(that.mapArray[i][k + 2].html())) {
                                            that.mapArray[i][k + 2].html(before).removeClass().addClass("user color" + before);
                                            that.mapArray[i][k + 1].html(num).removeClass().addClass("user color" + num);
                                            that.mapArray[i][k].removeClass().html("");
                                            i--;
                                            break;
                                        }

                                    }
                                }
                                else {
                                    that.mapArray[i][k].removeClass().html("");
                                    that.mapArray[i][k + 1].removeClass().html(num).addClass("user color" + num);
                                    i--;
                                    break;
                                }
                            }
                        }
                    }
                    break;
                case "down":
                    for (var i = 0; i < that.v_td; i++) {
                        for (var k = 0; k < that.h_td; k++) {
                            var num = parseInt(that.mapArray[i][k].html());
                            if (num && i + 1 <= 3) {
                                var before = parseInt(that.mapArray[i+1][k].html());
                                if (before) {
                                    if (before == num && that.mapArray[i][k].attr("data-add") == "0") {
                                        //考慮疊加
                                        that.mapArray[i][k].removeClass().html("");
                                        that.mapArray[i + 1][k].removeClass().html(num + before).addClass("user color" + (num + before));
                                        that.mapArray[i + 1][k].attr("data-add", "1");
                                        k--;
                                        break;
                                    }
                                    else {
                                        //前面有不一樣的  全部往前移動
                                        if (i + 2 <= 3 && that.mapArray[i + 2][k] && !parseInt(that.mapArray[i + 2][k].html())) {
                                            that.mapArray[i + 2][k].html(before).removeClass().addClass("user color" + before);
                                            that.mapArray[i + 1][k].html(num).removeClass().addClass("user color" + num);
                                            that.mapArray[i][k].removeClass().html("");
                                            k--;
                                            break;
                                        }

                                    }
                                }
                                else {
                                    that.mapArray[i][k].removeClass().html("");
                                    that.mapArray[i + 1][k].removeClass().html(num).addClass("user color" + num);
                                    k--;
                                    break;
                                }
                            }
                        }
                    }
                    break;
                case "up":
                    for (var i = that.v_td - 1; i >= 0; i--) {
                        for (var k = that.h_td - 1; k >= 0; k--) {
                            var num = parseInt(that.mapArray[i][k].html());
                            if (num && i - 1 >= 0) {
                                var before = parseInt(that.mapArray[i-1][k].html());
                                if (before) {
                                    if (before == num && that.mapArray[i][k].attr("data-add") == "0") {
                                        //考慮疊加
                                        that.mapArray[i][k].removeClass().html("");
                                        that.mapArray[i-1][k].removeClass().html(num + before).addClass("user color" + (num + before));
                                        that.mapArray[i-1][k].attr("data-add", "1");
                                        k++;
                                        break;
                                    }
                                    else {
                                        //前面有不一樣的  全部往前移動
                                        if (that.mapArray[i-1][k] && !parseInt(that.mapArray[i-1][k].html())) {
                                            that.mapArray[i-2][k].html(before).removeClass().addClass("user color" + before);
                                            that.mapArray[i-1][k].html(num).removeClass().addClass("user color" + num);
                                            that.mapArray[i][k].removeClass().html("");
                                            k++;
                                            break;
                                        }

                                    }
                                }
                                else {
                                    that.mapArray[i][k].removeClass().html("");
                                    that.mapArray[i-1][k].removeClass().html(num).addClass("user color" + num);
                                    k++;
                                    break;
                                }
                            }
                        }
                    }
                    break;
            }
            //重新生成數字
            that.showNum();
        },
        returnWay: function (numx, numy) {
            if (Math.abs(numx) > Math.abs(numy) && numx < 0) {
                return "left";
            }
            else if (Math.abs(numx) > Math.abs(numy) && numx > 0) {
                return "right";
            }
            else if (Math.abs(numy) > Math.abs(numx) && numy > 0) {
                return "down";
            }
            else if (Math.abs(numy) > Math.abs(numx) && numy < 0) {
                return "up";
            }
        }
    });
    $(function () {
        //創建dom元素的方法
        $.createDOM();
        //隨機生成數字方法
        $.showNum();
        //綁定觸屏事件的方法
        $.addEventTouch();
    });
    /*
    * 存在問題
    * 向上滑動時有時候會滑不上去有待調式
    * 遊戲結束跳出未能完成
    * */
</script>
</body>
</html>
Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

path模塊

node.js（3）

vue常用指令和vue裏面使用less

javaScript寫貪喫蛇案例

js 2048的實現

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結
