CAT | Game
11
Creating pseudo 3D games with HTML 5 canvas and raycasting: Part 2
No comments · Posted by admin in Canvas, Game, HTML5
From the author,
“This is my second article about creating Wolfenstein-like games with JavaScript, DOM and HTML 5 canvas; the techniques discussed are similar to those used in my WolfenFlickr project. In the first article, I created a basic map for the player to walk around in and a pseudo-3D rendering of the game world using raycasting techniques. In this article I’m first going to improve on the codebase I’ve already built, optimizing the rendering process to gain better performance and making the collision detection between the player and the walls better. In the second half, I’ll implement static sprites to give the castle a bit of atmosphere and finally add an enemy or two.”
Creating pseudo 3D games with HTML 5 canvas and raycasting: Part 2
11
Creating pseudo 3D games with HTML 5 canvas and raycasting
No comments · Posted by admin in Canvas, Game, HTML5
From the author,
“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.”
11
Game Development with JavaScript and the Canvas element
No comments · Posted by admin in Canvas, Game, HTML5
From the author,
“I have written a new series that shows you how to create a platformer game using JavaScript and the new Canvas element that is part of the HTML version 5 standard.”
Game Development with JavaScript and the Canvas element
From the post,
“FreeCiv is a free and open source empire-building strategy game inspired by the history of human civilization. FreeCiv.net is a fork of the original project, designed to run in a web browser. The game can be played online against other players, or in single player mode against AI opponents. The game uses the HTML 5 canvas element to render the isometric map.”
From the post,
“Chip Defender is a tower defense game by Zanarotti Michele built with JavaScript, jQuery and the HTML5 audio and canvas elements. For those of you who haven’t played a tower defense game before, the idea is to try to stop waves of enemies from crossing the map by building towers which shoot at them as they pass. When an enemy is defeated the player earns money or points, which are used to buy or upgrade towers.
Canvas is used to load and rotate images, draw progress bar and arcs, paths and for some of the effects.”
From the post,
“Thrust by Jon Combe is a rewrite of the classic 80s 8-bit computer game using JavaScript and canvas. Everything within the game space (such as the planet surface, ship, enemies, fuel tanks, etc) is dynamically drawn using canvas.
In Thrust you must shoot the enemies before they shoot you; pick up the fuel; shoot the reactor repeatedly until it starts counting down and then collect the pod to escape the planet. Controls are: Z and X to rotate left and right; the enter key to fire, shift to thrust and space to use shields.”
From the post,
“EtchaPhysics by Matt Pelham is a gesture-enabled physics game using HTML5 Canvas.
Solve each level by drawing, moving and pinning objects you create. You can draw lines and shapes such as triangles, rectangles, circles, stars and spirals (by pressing the D key); move objects already on the playing field (by pressing M) and pin objects together (by pressing the P key).”
From the author,
“Classic Etcha-Like functions like “Shake-To-Clear” and “Dial-To-Draw” coupled with a touch and gesture-enabled drawing interface create an addictive and classically fun environment. Sound Effects, Rotation-Based Gravity, and Snapshots round out the fun-factor. Now with 15+ addicting levels, 10 unique game-modes, and iPod Touch / iPhone support!”
I am pretty amazed at all of the HTML5 canvas games that I have come across. This is very encouraging and it must be troubling for Adobe. If you are a flash programmer please take a look at the Canvas API.
Bruno Garcia has created an HTML5 canvas version of everyone’s favorite Russian puzzle game, Tetris.
From the post,
“Kevin Pickell is the man responsible for this retro game offering built with the HTML5 <canvas> element. In Defender, players must defeat waves of invading aliens protecting the astronauts on the surface below.”
From the author,
“This is a version of Defender that I wrote last year for the STM-32 Primer 2, I just converted it to Javascript’”
Superluminal is a space shooter created by Mark Hall where you encounter waves of differing enemies and bosses in a fight across the galaxy. Like most of the games linked to from this site this game uses HTML5 <canvas>
