使用jQuery做的推箱子H5小游戏，请问按难度递增顺序自动生成关卡的算法？

发布于 2022-09-05 21:22:45 字数 12876 浏览 50 评论 0

这是我用jQuery写的第一关，过来和大家探讨如何写得更好，不喜勿喷，谢谢您的宝贵意见，
还请问能够按难度递增顺序自动生成关卡的算法，谢谢～

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>pushBox</title>
    <style type='text/css'>
    * {
        margin: 0;
        padding: 0;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
    
    .music {
        position: absolute;
        right: 100px;
        top: 100px;
    }
    
    .element {
        position: absolute;
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        border: 1px solid gray;
    }
    
    .wall {
        background-color: blue;
    }
    
    .path {
        background-color: green;
    }
    
    .box {
        background-color: yellow;
        z-index: 100;
        border: 10px solid yellow;
        outline: 1px solid gray;
    }
    
    .box:before {
        position: absolute;
        top: 3px;
        right: 0;
        left: 0;
        bottom: 3px;
        border-top: 37px solid transparent;
        border-bottom: 37px solid transparent;
        border-left: 37px solid green;
        border-right: 37px solid green;
        content: "";
    }
    
    .box:after {
        position: absolute;
        left: 3px;
        right: 3px;
        top: 0;
        bottom: 0;
        border-top: 37px solid green;
        border-bottom: 37px solid green;
        border-left: 37px solid transparent;
        border-right: 37px solid transparent;
        content: "";
    }
    
    .person {
        background-color: red;
        left: 400px;
        top: 500px;
        z-index: 100;
        line-height: 100px;
        text-align: center;
        font-size: 20px;
        color: white;
    }
    
    .end {
        background-color: white;
        line-height: 100px;
        text-align: center;
        font-size: 30px;
        color: red;
    }
    
    .handle {
        position: relative;
        top: 600px;
        right: 100px;
    }
    
    .item {
        position: absolute;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        background-color: blue;
        color: white;
    }
    
    .top {
        right: 80px;
        bottom: 160px;
    }
    
    .bottom {
        right: 80px;
        bottom: 0;
    }
    
    .left {
        right: 160px;
        bottom: 80px;
    }
    
    .right {
        right: 0;
        bottom: 80px;
    }
    </style>
</head>

<body>
    <!-- <div class="music">
        <span style="vertical-align: middle;">背景音乐与控制</span>
        <audio style="vertical-align: middle;" src="urf.mp3" autoplay controls loop></audio>
    </div> -->
    <div id="main">
        <div class="person element" id="person">person</div>
    </div>
    <div class="handle" id="handle">
        <div class="top item" id="top">⬆︎</div>
        <div class="bottom item" id="bottom">⬇︎</div>
        <div class="left item" id="left">⬅︎</div>
        <div class="right item" id="right">右</div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type='text/javascript'>
    var wallArr = [
            [300, 100],
            [400, 100],
            [500, 100],
            [300, 200],
            [500, 200],
            [300, 300],
            [500, 300],
            [600, 300],
            [700, 300],
            [800, 300],
            [100, 400],
            [200, 400],
            [300, 400],
            [800, 400],
            [100, 500],
            [600, 500],
            [700, 500],
            [800, 500],
            [100, 600],
            [200, 600],
            [300, 600],
            [400, 600],
            [600, 600],
            [400, 700],
            [600, 700],
            [400, 800],
            [500, 800],
            [600, 800]
        ],
        pathArr = [
            [400, 200],
            [400, 300],
            [400, 400],
            [500, 400],
            [600, 400],
            [700, 400],
            [200, 500],
            [300, 500],
            [400, 500],
            [500, 500],
            [500, 600],
            [500, 700]
        ],
        boxArr = [
            [400, 400],
            [500, 400],
            [300, 500],
            [500, 600]
        ],
        endArr = [
            [400, 200],
            [700, 400],
            [200, 500],
            [500, 700]
        ],
        wall = path = box = end = main = '',
        $main = $('#main'),
        $handle = $('#handle'),
        $person = $('#person');
    for (var i = 0; i < wallArr.length; i++) {
        wall += "<div class='wall element' data-type='wall' style='left:" + wallArr[i][0] + "px;top:" + wallArr[i][1] + "px'></div>";
    }
    for (var i = 0; i < pathArr.length; i++) {
        path += "<div class='path element' data-type='path' style='left:" + pathArr[i][0] + "px;top:" + pathArr[i][1] + "px'></div>";
    }
    for (var i = 0; i < boxArr.length; i++) {
        box += "<div class='box element' data-type='box' style='left:" + boxArr[i][0] + "px;top:" + boxArr[i][1] + "px'></div>";
    }
    for (var i = 0; i < endArr.length; i++) {
        end += "<div class='end element' data-type='end' style='left:" + endArr[i][0] + "px;top:" + endArr[i][1] + "px'>end</div>";
    }
    main = wall + path + box + end;
    $main.append(main);

    $handle.on('click', '#top', function() {
        var left = $person.css('left'),
            top = parseInt($person.css('top')) - 100 + 'px',
            direction = 'top';
        check(left, top, direction);
    });
    $handle.on('click', '#bottom', function() {
        var left = $person.css('left'),
            top = parseInt($person.css('top')) + 100 + 'px',
            direction = 'bottom';
        check(left, top, direction);
    });
    $handle.on('click', '#left', function() {
        var left = parseInt($person.css('left')) - 100 + 'px',
            top = $person.css('top'),
            direction = 'left';
        check(left, top, direction);
    });
    $handle.on('click', '#right', function() {
        var left = parseInt($person.css('left')) + 100 + 'px',
            top = $person.css('top'),
            direction = 'right';
        check(left, top, direction);
    });
    $main.on('click', '.box', function() {
        var $this = $(this),
            left = $this.css('left'),
            top = $this.css('top'),
            elements = getElementsAroundThisPosition(left, top);
        elements.each(function() {
            if ($(this).hasClass('person')) {
                if (left == $person.css('left')) {
                    if (parseInt(top) > parseInt($person.css('top'))) {
                        var l = left,
                            t = parseInt(top) + 100 + 'px',
                            direction = 'bottom';
                        if (getElementsInThisPosition(l, t).attr('data-type') === 'path' || getElementsInThisPosition(l, t).attr('data-type') === 'end') {
                            boxMove($this, left, top, direction);
                            personMove($person, left, top);
                        }
                    } else {
                        var l = left,
                            t = parseInt(top) - 100 + 'px',
                            direction = 'top';
                        if (getElementsInThisPosition(l, t).attr('data-type') === 'path' || getElementsInThisPosition(l, t).attr('data-type') === 'end') {
                            boxMove($this, left, top, direction);
                            personMove($person, left, top);
                        }
                    }
                } else {
                    if (parseInt(left) > parseInt($person.css('left'))) {
                        var l = parseInt(left) + 100 + 'px',
                            t = top,
                            direction = 'right';
                        if (getElementsInThisPosition(l, t).attr('data-type') === 'path' || getElementsInThisPosition(l, t).attr('data-type') === 'end') {
                            boxMove($this, left, top, direction);
                            personMove($person, left, top);
                        }
                    } else {
                        var l = parseInt(left) - 100 + 'px',
                            t = top,
                            direction = 'left';
                        if (getElementsInThisPosition(l, t).attr('data-type') === 'path' || getElementsInThisPosition(l, t).attr('data-type') === 'end') {
                            boxMove($this, left, top, direction);
                            personMove($person, left, top);
                        }
                    }
                }
            }
        });
    });

    $main.on('click', '.path,.end', function() {
        var $this = $(this),
            left = $this.css('left'),
            top = $this.css('top'),
            elements = getElementsAroundThisPosition(left, top);
        elements.each(function() {
            if ($(this).hasClass('person')) {
                personMove($person, left, top);
            }
        });
    });

    function getElementsAroundThisPosition(left, top) {
        return $('div').filter(function() {
            var $this = $(this),
                l = $this.css('left'),
                t = $this.css('top');
            return (l == (parseInt(left) - 100 + 'px') && t == top) ||
                (l == (parseInt(left) + 100 + 'px') && t == top) ||
                (l == left && t == (parseInt(top) - 100 + 'px')) ||
                (l == left && t == (parseInt(top) + 100 + 'px'));
        });
    }

    function getElementsInThisPosition(left, top) {
        var ele, element = $('div').filter(function() {
            return $(this).css('left') == left && $(this).css('top') == top;
        });
        if (element.length == 2) {
            element.each(function() {
                if ($(this).hasClass('box') || $(this).hasClass('end')) {
                    return ele = $(this);
                }
            })
        } else if (element.length == 3) {
            element.each(function() {
                if ($(this).hasClass('box')) {
                    return ele = $(this);
                }
            })
        } else {
            return ele = $(element);
        }
        return ele;
    }

    function check(left, top, direction) {
        var parameter = getElementsInThisPosition(left, top).attr('data-type');
        if (parameter === 'path' || parameter === 'end') {
            personMove($person, left, top);
        }
        if (parameter === 'box') {
            count(direction, left, top);
            var para = getElementsInThisPosition(l, t).attr('data-type');
            if (para === 'path' || para === 'end') {
                boxMove(getElementsInThisPosition(left, top), left, top, direction);
                personMove($person, left, top);
            }
        }
    }

    function count(direction, left, top) {
        switch (direction) {
            case 'top':
                return t = parseInt(top) - 100 + 'px',
                    l = left;
                break;
            case 'bottom':
                return t = parseInt(top) + 100 + 'px',
                    l = left;
                break;
            case 'left':
                return l = parseInt(left) - 100 + 'px',
                    t = top;
                break;
            case 'right':
                return l = parseInt(left) + 100 + 'px',
                    t = top;
                break;
        }
    }

    function personMove(element, left, top) {
        element.css({
            left: left,
            top: top
        });
    }

    function boxMove(element, left, top, direction) {
        count(direction, left, top);
        element.css({
            left: l,
            top: t
        });
        isEnd();
    }

    function isEnd() {
        var k = 0;
        $('.box').each(function() {
            var l = parseInt($(this).css('left')),
                t = parseInt($(this).css('top'));
            for (var i = 0; i < endArr.length; i++) {
                if (endArr[i][0] == l && endArr[i][1] == t) {
                    k++;
                    if (k == 4) {
                        setTimeout(function() {
                            alert('end');
                        }, 0);
                    }
                }
            }
        });
    }
    </script>
</body>

</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

美人如玉 2022-09-12 21:22:45

每个地图定义成一个 n*n 的矩阵，通过不同的值来标记地板，墙，空白区和目标
然后通过地图的坐标来放置箱子和角色
每一关通过 level 字段区分，然后每次过关之后用数组中的下一个对象重绘地图即可

[
    {
        map:[
            1,1,2,2,2,1,1,1,
            1,1,2,3,2,1,1,1,
            1,1,2,0,2,2,2,2,
            2,2,2,0,0,0,3,2,
            2,3,0,0,0,2,2,2,
            2,2,2,2,0,2,1,1,
            1,1,1,2,3,2,1,1,
            1,1,1,2,2,2,1,1
        ],
        box:[
            {x:3,y:3},
            {x:3,y:4},
            {x:4,y:5},
            {x:5,y:3},
        ],
        person: {x:4,y:4},
        level:1
    }
]

回复收藏 0

~没有更多了~