如何阻止我的角色脫離div？

所以我剛剛開始看到Jquery，並且一直在努力找到一種方法讓我的角色在觸及div的末端或div的牆壁時停下來。如何阻止我的角色脫離div？

這是我的jQuery代碼：

$(document).keydown(function(e) { 

var position = $('#charlie').position(); 

switch(e.keyCode) { 

    case 39: // right 
    $('#charlie').css('left', position.left + 20 + 'px').removeClass('flip'); 
    break; 

    case 37: // left 
    $('#charlie').css('left', position.left - 20 + 'px').addClass('flip'); 

} 


});

CSS：

body { 

padding: 0; 
margin: 0; 
} 

h1 { 
text-align: center; 
font-family: jennaSue; 
font-size: 50px; 
} 

.container { 
background-image: url(../img/bg.jpg); 
display: block; 
margin: auto; 
max-width: 500px; 
height: 340px; 
padding: 10px; 
} 

#charlie { 
    width: 70px; 
    height: 80px; 
    margin-top: 260px; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    position: absolute; 
} 

.flip { 
    transform:scaleX(-1); 
}

和HTML代碼：

</head> 
<body> 

<h1>Charlie Brown Run and Dodge</h1> 


<div class="container"> 
    <img src="img/charlie-brown.png" id="charlie" class="character"> 
</div>

提前感謝！

來源

2015-11-23 Myra_

只是爲了澄清，我的角色（#charlie）現在移到了div之外。我希望它停留在div內，停止在（右/左）邊緣移動。 –

一般的想法是獲得你的'＃charlie'對象的寬度，然後比較它的位置+寬度來確定它是否在div的邊界之外。 –

你應該*真的*使用這個畫布... – user2867288

我認爲，所有你需要做的是檢查的界限在你的keydown的處理程序：

$(document).keydown(function(e) { 

var position = $('#charlie').position(), 
    width = $('#charlie').width(), 
    max = $('.container').width(), 
    step = 20; 

switch(e.keyCode) { 

    case 39: // right 
    if (position.left + width + step < max) { 
     $('#charlie').css('left', position.left + step + 'px').removeClass('flip'); 
    } 
    break; 

    case 37: // left 
    if (position.left - step > 0) { 
     $('#charlie').css('left', position.left - step + 'px').addClass('flip'); 
    } 

} 


});

另外，我改變了20幾種情況的發生，step變量，因此，如果你要調整隻有它，你必須在一個地方改變它。

來源

2015-11-23 19:42:58 Chad

謝謝sooo多！有效：）） –

試試這個：

var maxLeft = $('.container').width; 
... 
case 39: // right 
var newLeft = position.left + 20; 
newLeft = min(newLeft, maxLeft); 
$('#charlie').css('left', newLeft + 'px').removeClass('flip'); 
break; 
...

這樣你計算最左值你的容器和按鍵之後你比較新的最大值，並從兩個最小值，並將此作爲新的左價值爲您的圖像。

來源

2015-11-23 19:37:48 Ben

如何阻止我的角色脫離div？

回答

相關問題