基本的光线投射

 

The raycaster in action

查看现场演示 .

为什么?

实现后,令我高兴地是,我已经阅读的漂亮的<canvas>元素不仅是即将支持Firefox,而且已经支持当前版本的Safari,我要尝试一个小实验。

在MDN中,我发现canvas概述和教程是非常完美的,但是还没有人写关于动画的东西,于是我想尝试一个我之前做过的基本射线的动画,看看能从我们期待的JavaScript控制像素缓冲区中得到什么样的现象。

怎么做?

基本思想是对任意延迟的帧速率使用setInterval。每一个间隔后都会调用一个更新函数来重绘画布显示当前视图。我知道我可以从一个简单的例子开始,但我相信canvas教程会有,我想看看我能否做到。

所以,每次更新,涉嫌发射器会检测你最近是否按下任何按键,如果你是闲置状态,会不通过投射来保存计算结果。如果你有按键按下,画布会清空,绘制背景和前景,更新相机的位置或方向,光线被抛弃。当光线与墙壁相交时,他们呈现出一种垂直的帆布条,其颜色和墙壁颜色相匹配,根据离墙壁的距离混合不同深度的颜色。帆布条的高度也会根据相机到墙壁的距离进行调节,并且被绘制在水平线居中位置。

我最后的那段代码是从一本比较老的Andre所著的游戏编程中经过反复合并以及一个java raycaster网站上得到的,并且对我有用的地方都进行了重命名,这是让我做的更好应该做的。

结果

Safari2.0.1中的画布执行的非常好。使用块效应因子来渲染8像素宽的条纹,我可以在我的苹果mini中以24fps的帧率运行320*240的窗口。Firefox1.5 Beta1 更快;同样帧率和窗口大小的情况下,我可以运行4像素宽的。不是ID软件系列的一个新成员,它是一个完美的解释型环境,并且我不需要担心内存分配、视频模式或者编码在汇编或者其他内部的例程。代码会通过使用预计算的数组查找来尝试高效的运行,但是我没有优化大师,所以这可能会写的更快。

此外,它在尝试任何类型的游戏引擎方面留下了很多希望-没有条纹的墙、没有精灵、没有门,甚至没有任何传送器到达另一层。但是我相信所有那些东西可以给足够时间去添加。canvas API支持图像的像素复制,所以纹理看起来可行。我会留下另一篇文章,可能是从别人那找来的。

光线发射

这里的人已经动手复制我的文件,所以,为了满足你的黑客享受,我已经张贴了个人文件内容作为代码列表(见下文)。

所以,打开Safari.13机票总金额Firefox1.5或者其他支持canvas的浏览器来体验吧

input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

参见

文档标签和贡献者

标签: 
 此页面的贡献者: NNNaix, YeClimEric, ziyunfei, Blabla cn
 最后编辑者: NNNaix,