游戏逻辑：位置交叉和上下

Game Logic: Cross, Above, Below 把小人从石块下方拖动到石块上方，观察z-index的变化情况。

jquery-ui, game, engine

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2665
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    var rocks = $('.rock');
    var minion = $('#minion1');
    var tootip = minion.find('span');
    var overlappingOffset1 = 25;
    var overlappingOffset2 = 50;

function coordinates($obj) {
        var coords = $obj.position();
        coords.right = parseInt(coords.left) + parseInt($obj.width());
        coords.bottom = parseInt(coords.top) + parseInt($obj.height());
        return coords;
    }

function checkObjects() {
        var minionCoords = coordinates(minion);
        rocks.each(function() {
            var rock = $(this);
            var rockCoords = coordinates(rock);
            var nearRockBoxH = (minionCoords.right >= rockCoords.left && minionCoords.left <= rockCoords.right);
            var bellowRock = nearRockBoxH && (minionCoords.top <= rockCoords.bottom - overlappingOffset1 && minionCoords.top >= rockCoords.bottom - overlappingOffset2);
            var aboveRock = nearRockBoxH && (minionCoords.bottom >= rockCoords.top && minionCoords.bottom <= rockCoords.top + overlappingOffset2);
            var crossing = nearRockBoxH && (minionCoords.top <= rockCoords.bottom - overlappingOffset2 && minionCoords.bottom >= rockCoords.top + overlappingOffset2);

if (crossing) // if minion is crossed with rock
            {
                rock.addClass('crossing');
            } else {
                rock.removeClass('crossing');
                if (bellowRock) // if minion is bellow the rock
                    rock.addClass('hit');
                else
                    rock.removeClass('hit');

if (aboveRock) // if minion is above the rock
                    rock.addClass('push');
                else
                    rock.removeClass('push');
            }
        });
    }

rocks.click(function() {
        var rock = $(this).addClass('push');
        setTimeout(function() {
            rock.removeClass('push')
        }, 250)
    });

minion.draggable({
        containment: "#cave1",
        scroll: false,
        drag: checkObjects,
        start: function() {
            tootip.animate({
                top: "-115px",
                opacity: 0
            }, 250); // hide tooltip when start dragging
        },
        stop: function() {
            setTimeout(function() {
                tootip.animate({
                    top: "-90px",
                    opacity: 1
                }, 250);
            }, 2500); // show tootip when stop dragging
        }
    });
});

编译

CSS

body {
    margin: 0;
    background: #002324;
}
.cave {
    position: relative;
    width: 944px;
    height: 590px;
    margin: 0 auto;
    overflow: hidden;
    background: url("http://projects.copist.ru/cave/cave-bg.jpg");
}
.rock {
    position: absolute;
    width: 154px;
    height: 72px;
    -webkit-transition: transform 0.1s ease-in;
    -moz-transition: transform 0.1s ease-in;
    -o-transition: transform 0.1s ease-in;
    transition: transform 0.1s ease-in;
    display: block;
    background: url("http://projects.copist.ru/cave/rock.png");
    z-index: 0;
}
.minion {
    position: absolute;
    width: 96px;
    height: 130px;
    background: url("http://projects.copist.ru/cave/minion.png");
    z-index: 50;
}
.minion span {
    font-family: sans-serif;
    font-size: 14px;
    background: #FFF7B2;
    display: block;
    width: 100px;
    text-align: center;
    position: absolute;
    top: -75px;
    padding: 10px;
    z-index: 2;
}
.minion span:after {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: -8px;
    background: #FFF7B2;
    left: 50%;
    transform: rotate(45deg);
    z-index: 1;
}
.rock#rock1 {
    left: 160px;
    bottom: 0;
}
.rock#rock2 {
    left: 310px;
    bottom: 300px;
}
.rock#rock3 {
    left: 300px;
    bottom: 40px;
}
.rock#rock4 {
    left: 450px;
    bottom: 74px;
}
.rock#rock5 {
    left: 556px;
    bottom: 0;
}
.rock#rock6 {
    left: 674px;
    bottom: 375px;
}
.rock#rock7 {
    left: 0px;
    bottom: 175px;
}
.minion#minion1 {
    left: 20px;
    bottom: 0;
}
.minion.crossing,
.rock.crossing {
    /* when minion and rock are crossing */
    
    background-color: rgba(255, 0, 0, 0.25);
}
.rock.hit {
    /* rock when minion is bellow */
    
    transform: translateY(-25px);
    z-index: 9999;
}
.rock.push {
    /* rock when minion is above */
    
    transform: translateY(5px);
    z-index: 0;
}
p {
    width: 944px;
    margin: 10px auto;
    color: #fff;
    font-size: 18px;
    line-height: 24px;
    font-family: sans-serif;
}

HTML

<div id="minion1" class="minion">
        <span>Drag me about the rocks</span>
    </div>

</div>
<p>Stones are in isometric view, that is, we see their front, side and top edges. From this, collision will not happen when the boundaries intersect exactly, but with a little overlapping.</p>

<p>Objects have a curved shape. To simplify the calculations, I can consider they are ellipses. Even easier to regard them as rectangles.</p>

<p>When the main character is below the stone, the stone's z-index must be higher than that of the character. The stone hides the top of the character, as a roof. I added effect like the stone is pushed up by the minion.</p>

<p>When the character is above the stone, the stone's z-index must be smaller than that of the character. Then it will be, as it were standing on top of the stone. I added effect like the stone is pressed down by the minion.</p>

Game Logic: Cross, Above, Below 把小人从石块下方拖动到石块上方，观察z-index的变化情况。

jquery-ui, game, engine

编辑器支持Emmet

快捷键

Game Logic: Cross, Above, Below 把小人从石块下方拖动到石块上方，观察z-index的变化情况。

jquery-ui, game, engine

使用React和Redux实现单人空当接龙纸牌游戏

使用HTML5创建的2016圣诞节交互式拖拉猜字谜游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：