어떻게 그리드를 떠나는 플레이어를 멈출 수 있습니까?

전 세계를 돌아 다니며 승객을 모으는 제 컴퓨팅 클래스를위한 게임을 만들고 있습니다. 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 루프를 닫을 수 있습니다. append (box); , 당신은 세포 색을 100 배로 설정하고 있습니다. 필요하지 않습니다. – juvian

@aZen의 팁을 사용하는 해결책 : 메이크 생성 맵을 더 깔끔하게 만들려고했는데 도움이되기를 바랍니다. 당신이 이해하지 못하는 것을 자유롭게 물어보십시오. 전체지도를하지 않았다,하지만 당신은 아이디어를 얻을해야합니다

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

에 새 위치를 설정,에서 (position.left - 50 또는 당신이 원하는 최소값 중 하나에 설정 Math.max 기능을 사용할 수 있습니다 귀하의 사례, pLeft, 15) 중 큰 쪽입니다.

즉, Math.max 함수 호출의 반환 값으로 위치를 설정하려고합니다. 위로 움직이는데도 같은 논리를 적용 할 수 있으며 오른쪽과 아래에는 매우 유사한 논리를 적용 할 수 있지만 대신 Math.min을 사용합니다.

출처

2014-03-29 17:34:47 Michael

"case 37 : $ ('# player')를 시도해보십시오 css ('left', Math.max (15, Math.min (9 * 50 + 15, position .left - 50)) + 'px'); 중단; " "왼쪽"은 및 기타 경우는 비슷합니다. – aZen

어떻게 그리드를 떠나는 플레이어를 멈출 수 있습니까?

답변

관련 문제