Part One

Introduction

With the increase in browser performance in recent times it has become easier to implement games in JavaScript beyond simple games like Tic-Tac-Toe. We no longer need to use Flash to do cool effects and, with the advent of the HTML5 Canvas element, creating snazzy looking web games and dynamic graphics is easier than ever before. One game, or game engine, I wanted to implement for some time was a psuedo-3D engine such as the one used in the old Wolfenstein 3D game by iD Software. I went through two different approaches, first attempting to create a "regular" 3D engine using Canvas and later going for a raycasting approach using straight DOM techniques.

In this article, I'll deconstruct the latter project and go through the details of how to create your own pseudo-3D raycasting engine. I say pseudo-3D because what we're essentially creating is a 2D map / maze game that we can make appear 3D by as long as we restrict how the player is able to view the world. For instance we cannot allow the "camera" to rotate around other axes than the vertical axis. This ensures that any vertical line in the game world will also be rendered as a vertical line on the screen, a necessity since we're in the rectangular world of DHTML. We will also not allow the player to jump or crouch, although this could be implemented without too much trouble. I won't go too deep into the theoretical side of raycasting, even if it is a relatively simple concept. I'll instead refer you to an excellent raycasting tutorial by F. Permadi, which explains it in much greater detail than is possible here.

The article assumes a decent level of experience with JavaScript, familiarity with the HTML5 canvas element and at least a basic understanding of trigonometry. Some things are best explained through the code examples you'll find throughout the article, but be aware that these snippets do not cover everything. Download the full (commented) code to get all the details.

First steps

As mentioned, the basis of the engine will be a 2D map, so for now we'll forget about the third dimension and focus on creating a 2D maze that we can walk around. The canvas element will be used to draw a topdown view of the world, which will function as a minimap of sorts. The actual "game" will involve manipulating regular DOM elements. This means that all major browsers will be supported out of the box (ie. Firefox 2+, Opera 9+, Safari 3, IE7). The canvas element is currently supported by Firefox, Opera and Safari but not Internet Explorer. Fortunately, we can get around that by using the ExCanvas project, a small JavaScript file that simulates some canvas functionality using VML.

The map

The first thing we need is a map format. One easy way to store this data is in an array of arrays. Each element in the nested arrays will be an integer corresponding to a block (2), wall (1) (basically, a number of more than 0 points to a wall/obstacle of some kind) or open space (0) type. The wall type will be used later to determine which texture to render.

......

Please access the below link to view the full content.

Original link: http://dev.opera.com/articles/vi...