我正在为我的计算机类制作游戏,玩家必须在网格中移动并收集乘客。我决定使用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/
答案 0 :(得分:2)
if
语句肯定是一种可能性,但我认为更好的方法是永远不要让值首先从网格中设置出来。例如,在玩家向左移动后指定位置时,将新位置设置为
position.left - 50
相反,可以使用Math.max
函数将其设置为position.left - 50
或您想要的最小值(在您的情况下为pLeft
,即15
}),以较大者为准。
也就是说,您希望将位置设置为Math.max
函数调用的返回值。可以应用相同的逻辑向上移动,并且可以在右侧和底部应用非常相似的逻辑,但使用Math.min
代替。
答案 1 :(得分: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;
}
完整代码: