javascript – 映射的等距屏幕

我正在试图找出当我有“斜坡”和1个高度的瓷砖时,如何在鼠标下方获得正确的“活动”瓷砖(见下图).

当我的世界平坦时,一切都没有问题.一旦我添加一个高度为1的瓷砖,以及一个回到0的斜坡,我的屏幕 – >地图例程仍然看起来好像一切都“平坦”.

在上图中,绿色“渐变”是我要渲染和计算鼠标的真实图块 – >地图,但是你看到“下面”的蓝色瓷砖是计算出来的区域.因此,如果您将鼠标移动到任何深绿色区域,它会认为您正在使用另一个磁贴.

这是我的地图渲染(非常简单)

canvas.width = canvas.width; // cheap clear in firefox 3.6,does not work in other browsers
for(i=0;ieto(xpos,ypos+(tile_h/2));
      context.lineto(xpos+(tile_w/2),ypos);
      context.lineto(xpos+(tile_w),ypos+(tile_h));
      context.fill();

    }
}    

这是我的鼠标 – >地图例程:

ymouse=( (2*(ev.pageY-canvas.offsetTop-current_y)-ev.pageX+canvas.offsetLeft+current_x)/2 );
xmouse=( ev.pageX+ymouse-current_x-(tile_w/2)-canvas.offsetLeft );
ymouse=Math.round(ymouse/tile_h);
xmouse=Math.round(xmouse/(tile_w/2));

current_tile=[xmouse,ymouse];

我有一种感觉,我将不得不重新开始并实施一个基于世界的地图系统,而不是一个简单的屏幕 – >地图例程.

谢谢.

最佳答案
你的假设是正确的.为了“挑选”世界几何图形,您的例程需要了解世界(而不仅仅是基础图块配置).也就是说,没有任何关于当前拾取的瓦片高度的概念(通过您当前的算法),没有办法确定相邻的瓦片(或者更远的一块,取决于允许的高度)是否应该是通过采摘射线截获.

你已经有了最后可能的选择射线点.剩下的就是在世界空间中定义光线的其余部分,并检查该光线是否与世界几何体相交.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...