One easy way to store this data is in an array of arrays. Fortunately, we can get around that by using the ExCanvas project, a small JavaScript file that simulates some functionality using VML. The element is currently supported by Firefox, Opera and Safari but not Internet Explorer. This means that all major browsers will be supported out of the box (ie. The actual “game” will involve manipulating regular DOM elements. The element will be used to draw a topdown view of the world, which will function as a minimap of sorts.
First stepsĪs 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. Download the full (commented) code to get all the details. 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. The article assumes a decent level of experience with JavaScript, familiarity with the HTML5 element and at least a basic understanding of trigonometry. Permadi, which explains it in much greater detail than is possible here. I’ll instead refer you to an excellent raycasting tutorial by F.
I won’t go too deep into the theoretical side of raycasting, even if it is a relatively simple concept. We will also not allow the player to jump or crouch, although this could be implemented without too much trouble. 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. For instance we cannot allow the “camera” to rotate around other axes than the vertical axis. 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. 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 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.
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. 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. 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. Next article: Creating Pseudo 3D Games with HTML 5 Canvas and Raycasting - Part 2 Introduction
0 kommentar(er)
