jq-2048小游戏


```javascript

<!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;
        }
    </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.addClass("hang"); for (var k = 0; k < this.v_td; k++) { var u_map = $("
"
); 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 == 1 && 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": break; case "up": 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>

你可能感兴趣的:(库,框架。)