Question

我正在为我的计算机类制作游戏，玩家必须在网格中移动并收集乘客。我决定使用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/

Answer 1

if语句肯定是一种可能性，但我认为更好的方法是永远不要让值首先从网格中设置出来。例如，在玩家向左移动后指定位置时，将新位置设置为

position.left - 50

相反，可以使用Math.max函数将其设置为position.left - 50或您想要的最小值（在您的情况下为pLeft，即15 }），以较大者为准。

也就是说，您希望将位置设置为Math.max函数调用的返回值。可以应用相同的逻辑向上移动，并且可以在右侧和底部应用非常相似的逻辑，但使用Math.min代替。

Answer 2

使用@aZen的提示解决方案：我试图让make生成地图更整洁，希望它也有帮助。随意问你不理解的任何事情。没有制作完整的地图，但你应该明白：

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/

如何阻止玩家离开网格？

2 个答案: