如何阻止玩家離開電網？

我正在爲我的計算課程製作遊戲，玩家必須在網格中移動並收集乘客。我決定用jQuery製作我的JavaScript，並且到目前爲止我已經構建了網格，添加了各個盒子的必要顏色並允許播放器移動。如何阻止玩家離開電網？

我現在面臨的問題是我不知道如何阻止玩家離開電網。這是我到目前爲止的代碼：如果

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>BotMod</title> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 

    ul{list-style:none;} 
    a{text-decoration:none;} 


    #grid{ 
    position: relative; 
    width:500px; 
    height:500px; 
    background:#eee; 
    padding:10px; 
    border-radius:10px; 
    } 

    .box{ 
    font-size:10px; 
    text-align:center; 
    float:left; 
    width:40px; 
    height:40px; 
    background:#fff; 
    border-radius:6px; 
    margin:4px; 
    border:1px solid #aaa; 
    } 

    #player { 
    position: absolute; 
    height: 10px; 
    width: 10px; 
    outline: 1px solid black; 
    background-color: yellow; 
    left: 15px; 
    } 

</style> 

<style id="jsbin-css"> 

</style> 
</head> 
<body> 



<div id="grid"> 
</div> 

<script> 
var boxX = 0; 
var boxY = 0; 
var box = '<div class="box" />'; 

for (var i = 0; i < 100; i ++){ 
    $('#grid').append(box); 
    $('#grid .box:eq(0)').css('background', 'green'); 
    $('#grid .box:eq(1)').css('background', 'green'); 
    $('#grid .box:eq(2)').css('background', 'white'); 
    $('#grid .box:eq(3)').css('background', 'white'); 
    $('#grid .box:eq(4)').css('background', 'white'); 
    $('#grid .box:eq(5)').css('background', 'white'); 
    $('#grid .box:eq(6)').css('background', 'green'); 
    $('#grid .box:eq(7)').css('background', 'green'); 
    $('#grid .box:eq(8)').css('background', 'white'); 
    $('#grid .box:eq(9)').css('background', 'white'); 
    $('#grid .box:eq(10)').css('background', 'green'); 
    $('#grid .box:eq(11)').css('background', '#49311c'); 
    $('#grid .box:eq(12)').css('background', '#49311c'); 
    $('#grid .box:eq(13)').css('background', 'white'); 
    $('#grid .box:eq(14)').css('background', 'white'); 
    $('#grid .box:eq(15)').css('background', 'white'); 
    $('#grid .box:eq(16)').css('background', 'green'); 
    $('#grid .box:eq(17)').css('background', 'green'); 
    $('#grid .box:eq(18)').css('background', 'white'); 
    $('#grid .box:eq(19)').css('background', 'white'); 
    $('#grid .box:eq(20)').css('background', '#49311c'); 
    $('#grid .box:eq(21)').css('background', '#49311c'); 
    $('#grid .box:eq(22)').css('background', '#49311c'); 
    $('#grid .box:eq(23)').css('background', 'green'); 
    $('#grid .box:eq(24)').css('background', 'green'); 
    $('#grid .box:eq(25)').css('background', 'white'); 
    $('#grid .box:eq(26)').css('background', 'green'); 
    $('#grid .box:eq(27)').css('background', 'green'); 
    $('#grid .box:eq(28)').css('background', 'white'); 
    $('#grid .box:eq(29)').css('background', 'white'); 
    $('#grid .box:eq(30)').css('background', 'white'); 
    $('#grid .box:eq(31)').css('background', '#49311c'); 
    $('#grid .box:eq(32)').css('background', 'green'); 
    $('#grid .box:eq(33)').css('background', 'green'); 
    $('#grid .box:eq(34)').css('background', 'green'); 
    $('#grid .box:eq(35)').css('background', 'green'); 
    $('#grid .box:eq(36)').css('background', 'green'); 
    $('#grid .box:eq(37)').css('background', 'green'); 
    $('#grid .box:eq(38)').css('background', 'green'); 
    $('#grid .box:eq(39)').css('background', 'green'); 
    $('#grid .box:eq(40)').css('background', '#49311c'); 
    $('#grid .box:eq(41)').css('background', '#49311c'); 
    $('#grid .box:eq(42)').css('background', 'green'); 
    $('#grid .box:eq(43)').css('background', 'white'); 
    $('#grid .box:eq(44)').css('background', 'green'); 
    $('#grid .box:eq(45)').css('background', 'white'); 
    $('#grid .box:eq(46)').css('background', '#49311c'); 
    $('#grid .box:eq(47)').css('background', '#49311c'); 
    $('#grid .box:eq(48)').css('background', 'green'); 
    $('#grid .box:eq(49)').css('background', 'green'); 
    $('#grid .box:eq(50)').css('background', '#49311c'); 
    $('#grid .box:eq(51)').css('background', '#49311c'); 
    $('#grid .box:eq(52)').css('background', '#49311c'); 
    $('#grid .box:eq(53)').css('background', 'white'); 
    $('#grid .box:eq(54)').css('background', '#49311c'); 
    $('#grid .box:eq(55)').css('background', '#49311c'); 
    $('#grid .box:eq(56)').css('background', '#49311c'); 
    $('#grid .box:eq(57)').css('background', '#49311c'); 
    $('#grid .box:eq(58)').css('background', 'white'); 
    $('#grid .box:eq(59)').css('background', 'green'); 
    $('#grid .box:eq(60)').css('background', '#49311c'); 
    $('#grid .box:eq(61)').css('background', '#49311c'); 
    $('#grid .box:eq(62)').css('background', '#49311c'); 
    $('#grid .box:eq(63)').css('background', '#49311c'); 
    $('#grid .box:eq(64)').css('background', '#49311c'); 
    $('#grid .box:eq(65)').css('background', 'white'); 
    $('#grid .box:eq(66)').css('background', 'white'); 
    $('#grid .box:eq(67)').css('background', 'white'); 
    $('#grid .box:eq(68)').css('background', 'green'); 
    $('#grid .box:eq(69)').css('background', 'green'); 
    $('#grid .box:eq(70)').css('background', 'green'); 
    $('#grid .box:eq(71)').css('background', '#49311c'); 
    $('#grid .box:eq(72)').css('background', '#49311c'); 
    $('#grid .box:eq(73)').css('background', '#49311c'); 
    $('#grid .box:eq(74)').css('background', 'white'); 
    $('#grid .box:eq(75)').css('background', 'white'); 
    $('#grid .box:eq(76)').css('background', 'white'); 
    $('#grid .box:eq(77)').css('background', 'white'); 
    $('#grid .box:eq(78)').css('background', 'green'); 
    $('#grid .box:eq(79)').css('background', 'white'); 
    $('#grid .box:eq(80)').css('background', 'green'); 
    $('#grid .box:eq(81)').css('background', 'green'); 
    $('#grid .box:eq(82)').css('background', 'green'); 
    $('#grid .box:eq(83)').css('background', 'green'); 
    $('#grid .box:eq(84)').css('background', 'white'); 
    $('#grid .box:eq(85)').css('background', 'green'); 
    $('#grid .box:eq(86)').css('background', 'green'); 
    $('#grid .box:eq(87)').css('background', 'white'); 
    $('#grid .box:eq(88)').css('background', 'white'); 
    $('#grid .box:eq(89)').css('background', 'white'); 
    $('#grid .box:eq(90)').css('background', 'green'); 
    $('#grid .box:eq(91)').css('background', 'green'); 
    $('#grid .box:eq(92)').css('background', 'green'); 
    $('#grid .box:eq(93)').css('background', 'green'); 
    $('#grid .box:eq(94)').css('background', 'green'); 
    $('#grid .box:eq(95)').css('background', 'green'); 
    $('#grid .box:eq(96)').css('background', 'green'); 
    $('#grid .box:eq(97)').css('background', 'green'); 
    $('#grid .box:eq(98)').css('background', 'white'); 
    $('#grid .box:eq(99)').css('background', '#49311c'); 
} 

$(function() { 
var player = '<div id="player"></div>'; 
$('#grid .box:eq(0)').append(player); 

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

var position = $('#player').position(); 
pLeft = 15; 
switch (e.keyCode) { 

    case 37: // Left 
    $('#player').css('left', position.left - 50 + 'px'); 
    break; 

    case 38: // Up 
    $('#player').css('top', position.top - 50 + 'px'); 
    break; 

    case 39: // Right 
    $('#player').css('left', position.left + 50 + 'px'); 
    break; 

    case 40: // Down 
    $('#player').css('top', position.top + 50 + 'px'); 
    break; 

} 

    }); 
}); 

</script> 
</body> 
</html>

對不起這是很難明白我想說什麼但本質上我需要一些幫助，離開網停止球員。我仍然在學習JavaScript和jQuery，但我想推動自己，因此代碼示例將更容易理解。

我在想一個If語句，像這樣：

If (pLeft <= 15) { 
    pLeft += ...; 
}

但是我似乎無法捉摸如何做到這一點。

編輯：

看到這裏的工作例如：http://jsfiddle.net/qm3Rz/

來源

2014-03-29 Matt Kent

感謝張貼你的代碼，這使得它更容易看到你在與什麼工作。儘管如此，通過jsfiddle提供了一個工作示例通常比在此發佈整個代碼轉儲更好。檢查出來：http://jsfiddle.net/qm3Rz/ – Michael

謝謝，編輯我的問題，包括該鏈接。 –

如果你還沒有看到我的答案，你可以在$（'＃grid'）後面關閉for循環。，你正在設置單元格顏色100次，這是不必要的 – juvian

使用@aZen的提示的解決方案：我試圖讓make generation map更整潔，希望它也能起到幫助作用。隨意問任何你不明白的事情。沒有使整個地圖，但你應該得到的想法：

switch (e.keyCode) { 

    case 37: // Left 
    $('#player').css('left', Math.max(15, Math.min(9*50 + 15,position.left - 50)) + 'px'); 
    break; 

    case 38: // Up 
    $('#player').css('top', Math.max(15, Math.min(9*50 + 15,position.top - 50)) + 'px'); 
    break; 

    case 39: // Right 
    $('#player').css('left', Math.max(15, Math.min(9*50 + 15,position.left + 50)) + 'px'); 
    break; 

    case 40: // Down 
    $('#player').css('top', Math.max(15, Math.min(9*50 + 15,position.top + 50)) + 'px'); 
    break;

}

全碼：

http://jsfiddle.net/bucQ7/

來源

2014-03-29 17:50:10 juvian

謝謝，正是我需要的。我喜歡你如何重新構建網格，我有點理解math.min和max如何工作，所以再次感謝你的幫助。 –

很高興幫助你，玩得開心！ – juvian

的if說法絕對是一個可能性，但我認爲，更好的方法是絕不允許的值在掀起網格第一名。當離開的球員動作後分配位置，例如，在設置新的位置

position.left - 50

相反，它可以使用Math.max功能，將其設置爲position.left - 50或你想要的最低值（你的情況，pLeft，這是15），以較大者爲準。

也就是說，您要將位置設置爲函數調用的返回值。相同的邏輯可以應用於向上移動，並且可以在右側和底部應用非常類似的邏輯，但是替代地使用Math.min。

來源

2014-03-29 17:34:47 Michael

嘗試「情況37：$（'＃player'）.css（'left'，Math.max（15，Math.min（9 * 50 + 15，position .left - 50））+'px'）; break;「對於「左」和類似的其他情況。 – aZen

如何阻止玩家離開電網？

回答

相關問題