Question

我刚刚开始了解jQuery，我想出了一个简单的超级马里奥模仿。我可以用箭头键移动马里奥，我想我可以在马里奥移动到位后将蘑菇褪去，但这似乎不像我预期的那样有效，如果有人能指出我正确的方向，我会非常幸福！

这是HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Super Mario!</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <img class="mushroom" src="http://ih2.redbubble.net/image.6378228.5104/sticker,375x360.u2.png"/>
        <img class="mario" src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
    </body>
</html>

这是CSS：

img {
    position: relative;
    left: 0;
    top: 0;
}

.mushroom {
    position: relative;
    left: 300;
    top: 200;
    width: 48px;
    height: 48px;
}

这是jQuery：

$(document).ready(function() {
    // Keydown function to move mario
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            // Left arrow key pressed
            case 37:
                $('.mario').animate({left: "-=10px"}, 'fast');
                break;
            // Up Arrow Pressed
            case 38:
                $('.mario').animate({top: "-=10px"}, 'fast');
                break;
            // Right Arrow Pressed
            case 39:
                $('.mario').animate({left: "+=10px"}, 'fast');
                break;
            // Down Array Pressed
            case 40:
                $('.mario').animate({top: "+=10px"}, 'fast');
                break;
        }
        // On Mario's arrival remove Mushroom
        $(document).on('keydown', '.mario', function(e){
            var x = e.clientX - this.offsetLeft,
                y = e.clientY - this.offsetTop;

            if (x > 300 && x < 400 && y > 200 && y < 300) {
                $('.mushroom').fadeOut('slow');
            }
        });
    });
});

首先，我尝试使用IF语句检查Mario的css位置 - 它不起作用 - 但是我意识到，css可能不会在keydown上重写。所以我被卡住了：/

IF声明的想法如下：

// On Mario's arrival remove Mashroom
$(document).on('keydown', '.mushroom', function() {
    if($('.mario').css("left")=="300" && ("top")=="200") {
        $('.mashroom').animate({left: "+=10px"}, 'fast'); 
    }
});

感谢您的帮助！

Answer 1

缺少

$('.mario').css("top")

if($('.mario').css("left")=="300" && $('.mario').css("top")=="200") {
//                                   ^              ^

使用jQuery将其他对象移动到位后淡出对象

1 个答案: