javascript - 我怎样才能阻止玩家离开网格？-6ren

javascript - 我怎样才能阻止玩家离开网格？

转载作者：行者123 更新时间：2023-11-30 10:18:10

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

最佳答案

使用@aZen 的提示解决方案: 我试着让 make generation map 更整洁，希望它也有帮助。有什么不明白的可以尽管问。没有制作完整的 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/

关于javascript - 我怎样才能阻止玩家离开网格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22734292/

文章推荐： java - Java 中的多线程 FTP 服务器

文章推荐： json - Swift 带有带有列表信息的 json 数据

文章推荐： swift - Swift 中返回多个值的字符串

Dartz - 离开 Either
var newRight; if(either.isRight()) { newRight = either.getOrElse(() => throw UnimplementedError())
ios - 离开/关闭按钮操作上的文本字段
我正在做一个登录字段。它由 UITextfields 和一个弹出选择器 Controller 的按钮组成。单击按钮以显示按钮弹出时，我想删除/保留/取消编辑文本字段。我试过: [发件人resignF
javascript - 离开/关闭标签前确认？
我试图在用户关闭选项卡或转到另一个选项卡(如 facebook、gmail、GoDaddy 和其他选项卡)之前显示确认弹窗。我的代码适用于 Firefox，但不适用于 chrome、safari 等
c# - 离开 While 循环？
我无法退出代码中的 While 循环和方法。用户可以选择输入 1 或 2 和 0 来取消(离开菜单和方法)。但是就像现在的代码一样，我猜 Switch 中的默认选项会阻止它离开 While 循环!？我
php - 需要帮助让表格从提交区域提交/离开
所以我目前正在学习这个关于 PHP 表单的教程，并且我把它放到了这个页面的底部，它说到目前为止要测试表单，http://www.webreference.com/programming/php/sea
iphone - 离开 XMPPRoom
我正在开发一个可以让用户登录 2 个 xmpprooms 的应用程序，但同时只能登录 2 个，所以如果他想连接到另一个，我必须断开他与前一个的连接并连接到下一个。使用此代码: 这是我离开房间的方式:
reactjs - 离开 React 组件时网络摄像头不会关闭
我目前正在 React 应用程序中使用我的网络摄像头拍照。然而，当我离开组件时，绿灯继续亮着，我似乎无法关闭我的网络摄像头。这是我用来使用网络摄像头的代码。 navigator.webkitGet
rfid - 使用有源RFID标签检测存在(到达/离开)
实际到达很简单，标签进入接收器天线范围，但是偏离是造成问题的原因。首先，我们了解一些有关设置的信息。标签: 它们以433Mhz的速度工作，每1.5秒钟发送一次“心跳”，移动时进入传输突发模式，这种
java - 离开 SettingsActivity 时应用强制关闭
这是我的第二个问题(已经回答):Creating SharedPreferences object inside Fragment . 在弄清楚如何在静态 Fragment 类中创建 SharedPr
firebase - 离开 Firebase 中的项目但不拥有该项目的所有权
我需要离开 Firebase 中的一个项目，但我没有选择离开该项目，因为我没有该项目的所有权。我是该项目的成员，需要离开该项目，因为该项目的开发已在几个月前停止有什么选择可以做到这一点吗？我还需要从
javascript - 离开 IE 选项卡会发生什么事件？
我希望在以下情况下触发我的 javascript: 当打开多个 IE 选项卡时，当前 IE 选项卡将被切换。当前 IE 选项卡关闭时。我不希望我的 JS 代码被页内弹出对话框触发。当整个 IE
socket.io 加入/离开
我在 socket.io wiki 上查看如何使用房间，但加入和离开不起作用，我想知道他们是否可能更改了一些内容但没有机会更新 wiki？ socket.join("room-"+data.meid)
java - 离开 Activity 时如何停止应用程序的振动？
在此 Activity 中我使用振动，因此由用户选择按照振动节奏移动的球，但是当我想向后返回屏幕时，即返回到MainActivity，应用程序继续振动而不停止。这是我的代码，我已经尝试了所有方法，但无
ios - 离开 View 时删除完成时的列表项
我正在构建一个用于学习 SwiftUI 的小型待办事项应用程序，我可以在 CoreData 中创建一个任务列表并将它们标记为完成，这会将 isComplete 设置为 true 并将图像从空圆圈更改为
asp.net - 离开 if 语句
我在 if 语句中有一个 if 语句。如果第二个if语句中的条件返回false，我要转到第一个else因为它会自动设置我的验证控件。希望你明白 if (page.isvalid() ) {
android - 离开 Activity 后保留变量
我正在尝试找到一种方法，让我的变量在应用程序的整个生命周期中保持不变。我设计该应用程序的方式是用户单击类(class)并提交成绩。我想要的是应用程序在 Activity 结束后存储成绩。当用户退出屏幕
ios - 边界功能不会阻止 Sprite 离开
首先你应该知道，允许玩家玩的区域是一个正方形，即320x320，位于屏幕中央。这个 320x320 的正方形是一个 5x5 的网格 [每个图 block 64x64]，并且玩家始终位于网格图 bloc
ios - 离开 UIViewController 时应用程序崩溃
我的应用程序在离开 UIViewController 时崩溃并出现以下错误。 [FeedSingleViewCell retain]: message sent to deallocated inst
ios - 离开 AVFullScreenViewController 后屏幕不会旋转回纵向
使用此代码允许媒体播放器在全屏时横向旋转(应用程序不支持): // handle orientation for the device func application (_ application:
ios - 手机进入飞行模式时计时器停止，离开 AM 后不会重新启动
好的。查看了可能的答案，但我在这里没有看到我的问题。我有一个相当标准的 GCD 重复计时器: class RepeatingGCDTimer { /// This holds our cur

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我怎样才能阻止玩家离开网格？