Javascript 确定网格上允许的移动
有人能提出一个合适的方法来计算一个网格上的移动，类似于下图中的网格 假设piece1在位置a1，piece2在位置c3，如果piece1可以移动（比如）3个正方形，而piece2可以移动2，我如何确定哪些网格正方形是允许移动的 我花了太长时间开发基于文本的MUD，看起来，我根本无法让我的大脑采取下一步行动，即使在最简单的情况下，如何可视化潜在的运动 如果这很重要的话，我正试图用javascript来实现这一点，但说实话，我认为我在这里的失败是概念化的失败，而不是语言理解的失败 更新-我正在添加在发布以下响应后编写的第一轮代码。我认为看到代码可能对与我处境相似的人有用 它很草率，目前只对放置在板上的一个项目有效，但至少Javascript 确定网格上允许的移动,javascript,grid,Javascript,Grid,有人能提出一个合适的方法来计算一个网格上的移动，类似于下图中的网格 假设piece1在位置a1，piece2在位置c3，如果piece1可以移动（比如）3个正方形，而piece2可以移动2，我如何确定哪些网格正方形是允许移动的 我花了太长时间开发基于文本的MUD，看起来，我根本无法让我的大脑采取下一步行动，即使在最简单的情况下，如何可视化潜在的运动 如果这很重要的话，我正试图用javascript来实现这一点，但说实话，我认为我在这里的失败是概念化的失败，而不是语言理解的失败 更新-我正在添加
check\u allowed\u moves（）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;utf-8"/>
<title>Test page</title>
<style>
#chessboard { clear: both; border:solid 1px black; height: 656px;
width:656px; /*width = 8*40 + 16 for border*/ }
#chessboard .row { overflow: auto; clear: both; }
#chessboard .row span { display: block; height: 80px;
width: 80px; float: left;
border:solid 1px black; }
.allowable { background: blue; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
google.load("jqueryui", "1.5.3");
</script>
<script type="text/javascript">
$(document).ready(function() {
(function() {
var global = this;
global.Map = function(container) {
function render_board() {
var max_rows = 8;
var cols = new Array('a','b', 'c', 'd', 'e', 'f', 'g', 'h');
var jqMap = $('<div />');
jqMap.attr('id', 'chessboard');
var x=0;
for(x; x<max_rows; x++) {
var jqRow = $('<span />');
jqRow.addClass('row');
var i=0;
for(i; i<cols.length; i++) {
var jqCol = $('<span />');
jqCol.attr('id', cols[i]+(x+1));
jqCol.addClass(cols[i]);
jqRow.append(jqCol);
}
jqMap.append(jqRow);
}
$('#'+container).append(jqMap);
}
function add_piece(where, id) {
var jqPiece = $('<div>MY PIECE'+id+'</div>');
var jqWhere = $('#'+where);
jqPiece.attr('id', 'piece-'+id);
jqPiece.addClass('army');
jqPiece.draggable({cursor: 'move',
grid:[82, 82],
containment: '#chessboard',
revert: 'invalid',
stop: function(ev, ui) {
//console.log(ev.target.id);
}
});
jqWhere.append(jqPiece);
check_allowable_moves(where);
}
function check_allowable_moves(location) {
var x_axis = { 'a':1,'b':2, 'c':3, 'd':4, 'e':5, 'f':6, 'g':7, 'h':8 };
var x_axis_alpha = { 1:'a',2:'b', 3:'c', 4:'d', 5:'e', 6:'f', 7:'g', 8:'h' };
$('.allowable').droppable("destroy");
$('.allowable').removeClass('allowable');
//get the x,y values of the piece just placed
var x = parseInt(x_axis[location[0]], 10);
var y = parseInt(location[1], 10);
var x_min = x-2;
var y_min = y-2;
for(x_min; x_min<=x+2; x_min++) {
for(y_min; y_min<=y+2; y_min++) {
var jqCell = $('#'+x_axis_alpha[x_min]+y_min)
jqCell.addClass('allowable');
jqCell.droppable({ accept: '.army',
drop: function(ev, ui) {
//console.log(ev, ui, $(this));
//handle_drop(ev, ui, $(this));
check_allowable_moves($(this).attr('id'));
}
});
}
y_min = parseFloat(y)-2;
}
}
render_board();
add_piece('d5', '2');
}
})();
var map = new Map('content');
});
</script>
</head>
<body id="debug">
<div id="page">
<div id="content"> </div>
</div><!-- end page -->
</body>
</html>
测试页
#棋盘{清晰：两个；边框：实心1px黑色；高度：656px；
宽度：656px；/*宽度=8*40+16表示边框*/}
#棋盘。行{溢出：自动；清除：两者；}
#棋盘。行跨距{显示：块；高度：80px；
宽度：80px；浮动：左侧；
边框：实心1px黑色；}
.允许的{背景：蓝色；}
load（“jquery”，“1.2.6”）；
google.load（“jqueryui”，“1.5.3”）；
$（文档）.ready（函数（）{
（功能（）{
var global=这个；
global.Map=函数（容器）{
函数render_board（）{
var max_rows=8；
var cols=新数组（'a'、'b'、'c'、'd'、'e'、'f'、'g'、'h'）；
var jqMap=$（''）；
jqMap.attr（'id'，'chessboard'）；
var x=0；
对于（x；x假设工件p位于位置x，y，并且可以将n个正方形移动到位置x2，y2。这意味着（x-x2）和（y-y2）之间的绝对差值之和不能大于n
如果你想显示哪些方块可以移动（而不是输入x2和y2），我认为最好是在方块中的所有位置上绕一圈。也就是说
for (x - n TO x + n):
for (y - n TO x + n):
if (abs(x - x2) + abs(y - y2) <= n):
mark as okay.
用于（x-n到x+n）：
对于（y-n到x+n）：
如果（abs（x-x2）+abs（y-y2）这纯粹是一个概念层面上的问题，但尝试以下逻辑：
将所有可能的位置移离起点一步，并将它们放在堆栈上（移动=0）
从堆栈中弹出一个并重复，使用新坐标作为新的起点。（移动=1）。您必须确保不会在堆栈上放置任何重复坐标
重复2次，直到你用尽了所有可用的动作
我可能没有向您解释这个问题，如果您对我想说的有任何疑问，请告诉我。您可以使用上述方法，但可以使用递归
递归“深度”是移动距离
当深度>移动时爆发
每次迭代都应该返回一个空间向量并添加自己的位置
删除重复项一般来说，此类问题涉及到一个合理有限的网格，其中包含一个可能到达的位置。采用一个网格大小的数据结构，其元素能够以足够的精度保存剩余移动点的数量
将网格初始化为未访问值。该值不得在零到最大可能移动速度的范围内。负值是理想值
将起始位置初始化为剩余移动数
在这一点上，有三种可能的方法：
1） 每一步都重新扫描整个网格。简单但较慢。终止是指没有点数产生合法移动
2） 在堆栈上存储点。比#1快，但仍然不是最好的。堆栈为空时终止
Repeat
ObtainPoint {From queue, stack or brute force}
For Each Neighbor do
Remaining = Current - MovementCost
If Remaining > CurrentValue[Neighbor] then
CurrentValue[Neighbor] = Remaining
Push or Queue Neighbor
Until Done
3） 在队列中存储点。这是最好的。当队列为空时终止
Repeat
ObtainPoint {From queue, stack or brute force}
For Each Neighbor do
Remaining = Current - MovementCost
If Remaining > CurrentValue[Neighbor] then
CurrentValue[Neighbor] = Remaining
Push or Queue Neighbor
Until Done
请注意，使用基于堆栈的方法时，在某些情况下，您总是会放弃旧的计算并重新进行计算。只有在某些情况下绕行恶劣地形比穿越地形更便宜时，基于队列的方法才会发生这种情况
仅在循环结束时检查终止条件，或者在ActainPoint尝试使用空队列或堆栈时终止。ActainPoint之后的空队列/堆栈并不意味着您已完成
（请注意，这是对Ian答案的一个相当大的扩展。）图像没有进入您的帖子。图像在那里，只是没有显示。以下是URL:Fixed，出于某种原因，markdown预览接受带有？的URL，但不是实际呈现的帖子。如果还没有，将提交uservoice错误报告。实际上，原始图像可能因为以下原因被抑制：Steerpike:Can pieces沿对角线移动，或仅沿hor/vert移动？另外，假设piece2向上移动两次，这是否会阻止piece1移动到那里？这是有意义的。我想我需要坐下来，用一个便笺簿和一支笔，用伪代码正确地草草完成步骤。感谢您的编辑来描述对角线移动-非常有用。这是一个令人难以置信的令人印象深刻的例子在提问后的3分钟内，我收到了一个非常清晰实用的答案，这让我有点吃惊。非常感谢。呵呵，欢迎来到StackOverflow。