MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

 

The raycaster in action

查看现场演示 .

为什么?

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

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

怎么做?

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

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

我最后的那段代码是从一本比较老的Andre所著的《Windows游戏编程大师技巧 》 (ISBN: 0672305070) 中经过反复合并以及一个java raycaster网站上得到的,并且对我有用的地方都进行了重命名,这些必要的修改能让它更好的运行。

结果

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

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

光线发射

已经有好心人手动复制我的文件,你可以在这里看一下,为了满足你自己动手的极客想法,我已经放出了独立的源码文件列表(见下文)。

下面这些可能是你想要的,启动Safari 1.3+或是Firefox 1.5+或者是其他支持canvas的浏览器来体验吧!

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

参见

文档标签和贡献者

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