Purpose

I am starting to really sink in my teeth into client-side web-development. I will therefore develop some applications of the type most suitable for that purpose - you guessed it - GAMES. If you have any comments or suggestions, please feel free to contact me.

A word on JavaScript

I do not like JavaScript a lot, due to its lack of static typing and the way it encourages people to program in a untidy manner. Yet, I see no alternative for implementing client-side logic in a browser-independent way that does not require additional plug-ins.

Don't forget do press F11 to switch to fullscreen before starting the game.

Beach-Dead

(click title or image to play)

Beach-Dead represents the second project in my online game series. Also it is my fist HTML5-based game. Beach-Dead is based on the first scene of the 8-bit classic Beach Head II. I had already written this game in AMOS some 20 years ago and recently found the assets floating around on backup of my Amiga partition. Since this implementation was never published, it seemed like the perfect wrapper project to develop my own HTML5-based game engine. Yet, as it turned out, I had heavily underestimated the effort to re-implement the game logic. While the engine code - including sprite logic, input and sound - merely took me a couple of days to program, I spent several months programming the game logic (always consider that I have a full time job besides this). The main problem being, that you can hardly re-use any BASIC code (which is what AMOS used to be) for a re-implementation in JavaScript. I virtually had to start from scratch. I am considering to port my Windows game Climbers of Fortune next. Since the latter was written in C++, it should be less of a pain to port it to my JavaScript-Based engine.

Gameplay

The game involves two parties - 'Allies' and 'Dictator'. Moreover one or two human players are supported. In one player mode, the player controls the Allies. The controls are are follows:

Allies

Dictator

		w
		\|
a	-		-	d
		\|
		s

(SPACE = fire)

		8
		\|
4	-		-	6
		\|
		2

(ENTER = fire)

Update 13.12.2015: The engine now supports touch controls on mobile devices.

There are three phases. In all three, the Dictator controls the gun at the bottom of the screen, trying to shoot the incoming allied soldiers.

Phase 1

The Allied player controls the helicopter. Pressing fire drops a paratrooper. When a paratrooper reaches the ground, he will run towards the closest of the four upper walls. For each soldier reaching a wall alive, the wall will be marked by a white dot on the top. The phase ends, when all soldiers where either shot or have reached a wall.

Phase 2

All surviving soldiers now need to advance to the lower pair of walls. For this, a red arrow will circulate through the gaps between the upper walls.

Pressing fire places a solider inside the gap, given that there is still one behind the corresponding wall (at least one white dot marking that wall).

Once a soldier is placed inside a gap, press either left or right to make him run towards the lower walls. Again, the phase ends, if all soldiers are either dead or safely behind one of the lower walls.

Phase 3

In the last phase, the soldiers need to reach safety the bottom of the screen - preferably destroying the gun before. Again, the red arrow will circulate between the two lower walls. There are now two ways for activating the soldiers. Simply pressing fire activates a soldier behind the corresponding wall. The soldier will then be controlled by the player until he either gets shot or reaches the bottom of the screen.

If you press either left or right while pressing fire, additionally a soldier will climb over either the same or the far wall.

After climbing over the wall, the soldier will automatically run towards the the bottom of the screen - he sort of serves as bait to protect the player-controlled soldier ;-) The player-controlled soldier is also able to destroy the gun with a hand grenade. The grenade can only be thrown, if the player is close enough to the bottom of the screen.

Again, the phase ends when all soldiers are either dead or safely behind a wall.

Phase 4

Profit!
No, just kidding, there is no Phase 4.

Tech-Stuff

Beach-Dead makes use of the HMTL5 <canvas /> element. A canvas defines rectangular region that can be drawn on using JavaScript. This includes drawing of geometric shapes, such as circles or polygons as well as copying rectangular regions from images or other canvases. The engine implements double buffering through a hidden backbuffer canvas.
Moreover, at first, the sounds used the HTML5 <audio />. As it turned out, mobile browsers - such as Chrome for Android do allow the audio tag sounds to be played programatically (a user gesture is needed). Hence the engine uses the Howler library to play its sounds.

Initially, the update loop was controlled through the window.setInterval() method. This lead to some jittering especially on mobile devices. Now, the update is controlled through requestAnimationFrame() which uses the browsers internal update cycle. Doing so, resulted in a significantly smoother gameplay on both, desktop and mobile devices. When switching to full screen, the display canvas will be streched to the size of the respective browser screen while maintaining the original aspect ration. Note, that the graphic assets of the game date back to 1995 when standard resolutions where still 4:3. I could not yet figure out a way to force the display orientation to landscape on mobile devices. Currently, in portrait mode, the user is prompted with message asking to hold the device in landscape. Any hints on how to enforce landscape orientation in the first place are welcome.

I have tried the game on any devices that I could get my sleazy hands on. This includes desktop browsers and a couple of mobile devices.

Desktop browsers: The game runs flawlessly on Chrome, IE, FireFox. Did not test Safari yet, as I do not own a Mac (and bloody hell never will).
Sony Xperia5+: Runs flawlessly on the pre-installed Chrome.
LG-P710 (my wifes): Runs as expected on Chrome, yet with a low frame rate (can perhaps be addressed to the phone being busy processing social media data). On the Android browser fullscreen is not working.
Sony Ericsson Xperia ARC (my old phone): Used to work except for fullscreen. After usig the screenfull library its not working at all.
HUAWEY Y550: Runs nicely. Yet, casually some sprites appear at the wrong position.

TODOs

The are no scores yet.
The helicopter has no sound.
The gun sound is not original. (see above)

Daleks

(click title or image to play)

The term apparently refers to some alien species from the Dr. Who saga (see here). To be perfectly honest, I know squat about Dr. Who. Yet, I found a Commodore-Amiga version of this game on my Aminet-CDs somewhere around the mid-90s and was immediately hooked to the ingenious simplicity of the gameplay. I already wrote this game some 15 years ago as an applet. Since applets are deprecated in HTML5, this is a perfect opportunity to practice some HTML/CSS/JS coding. This version also implements high scores stored on the server - a feature that I was unable to implement in the applet version. Moreover I can re-use the existing graphic assets ;-).

To the Dr. Who nerds out there: Yes, I know Daleks look different than on the title screen - I hope you can forgive me that.

Gameplay

As already stated - the gameplay is ingeniously simple - yet addictive. You control the little buddy

(Dr. Who, I suppose?). Use your numeric keypad or enhanced WASD for movement:

7 or q		8 or w		9 or e
	\	\|	/
4 or a	-		-	6 or d
	/	\|	\
1 or y		2 or s		3 or x

NOTE: I recently also added a virtual keypad to make the game more accessible with mobile devices.

The Daleks will move straight towards your direction.
Is one of them moves on the same square as you, it kills you.
If two Daleks move on the same square, they kill each other - leaving an unpassable pile of trash.
Press 5 or f to wait at your current position.
Pressing + or r will teleport you to an empty square (hopefully not next to a Dalek).
Pressing enter or c activates your sonic screwdriver - killing all Daleks on a neighbouring square (not granting any points). The sonic screwdriver is available once per level.
When all Daleks are destroyed, you proceed to the next level with even more Daleks ;-)

You receive 10 point for each Dalek killed (not using your screwdriver). If you survive a level without using the screwdriver, you receive an additional 50 points.

Tech-Stuff

Though not visually impressive, the web version of Daleks is a vertical slice through virtually all common web technologies:

HTML CSS and CSS for the graphics
JavaScript for the game logic and input handling.
AJAX for the client-side highscore hadling (which is actually just some more JavaScript).
PHP for the server-side handling of the high scores. This is the first time I laid my hands on PHP - since I come from a strict Java background. Actually, this PHP stuff is really easy.

I explicity wanted to use plain vanilla HTML4/CSS for this one before I lay my hands on HTML5 for upcoming projects. I did not even want to use JQuery - though it would have been useful for the AJAX-requests that handle the high scores. Instead I use the standard XMLHttpRequest object for this purpose. The game seems to run pretty slow on mobile devices (event modern ones, such as my Sony Xperia5+). My guess would be that this can be addressed to the large amount of DOM-nodes (one for each square on the screen).