Specialty Graphics

Some Browser Games

This page features several browser games I've created. The games are made using HTML 5 and JavaScript. I've tested these games in current versions of Firefox and Chrome. Many of these games do not work properly in older browsers.

Tile Spell

Tile spelling game image.

Tile Match combines features of my previous word search game and tile matching game. Like Mahjong games, the goal is to remove all tiles from the board. Select free tiles, that spell one of the words listed on the right side, and the tiles will be removed. Each game has 27 words to find. The words are randomly selected from a list of 150 words.

A shuffle feature, with a limited number of uses, can be used if players have no plays available.

Players can choose from three tile arrangments.

Play testers have reported some bugs, but the feedback has been mostly positive. I think this might be my best game so far.

Updated 6 March 2016

Tile Match

Tile Match is a game similiar to Mahjong.

When a new game is started, tiles randomly populate the board. Click on any two matching tiles, that are not blocked on either the left or right, and the tiles will be removed. The goal is to remove all tiles from play.

The initial version includes three tile sets, spacecraft, card suits and brushed runes. Each tile set includes 108 tiles, comprised of 27 images, each repeated four times. Four tile layout designs are available.

Features

Tile matching game.

A shuffle button is available if the player reaches a point where no tile matches are available. However, only two shuffles are available for each game.

Selecting the "Hint" button will highlight a pair of matching tiles.

The game uses some basic animations and sound effects. Buttons are available to turn these features off if desired.

Future Upgrades

Tile matching game options.

Future upgrades might include a scoring system. A player might earn a point for each pair of tiles matched, with bonus points awarded for matching several tile pairs in quick succession, or for matching two sets of identical tiles in a row. Higher scores would allow the player to earn extra shuffles.

If I do implement a scoring system, I might add additional tile sets and tile layouts.

Posted 19 September 2015

Word search game image.

I found out that My Mom enjoys working word search puzzles, so I thought I'd try to create a JavaScript version.

To select a word, click and drag your mouse or other pointing device from one end of a word to the other. Optionally, users may click to select the letter at one end of a word, then select the letter at the other end.

As words are found, they are crossed out on the word list on the right side of the screen. A sound effect and a brief fireworks-like animation play when each word is found. Users can deactivate both the sounds and animation using controls near the lower right of the screen.

Players can choose three puzzle sizes, 15 x 15, 20 x 20, and 20 x 25. (After changing the puzzle size, users must click one of the word list button to generate a new puzzle.) A "Show Solution" button is available if players become stuck and need a little help.

Nine word lists are currently available, with more to be added in the future. Users have the option to create a puzzle from their own list of words if desired. Simply paste or type a list of words into the "Enter a Custom Word List" box near the bottom of the screen and click on the button to generate a puzzle.

The word list on the right side of the screen can be moved. Click and drag with your mouse to reposition the list as is most convenient for your display size.

Updated 8 July 2013

Tennis Game

Tennis game image.

My implementation of the classic "Pong" game.

The left player uses the 'w' and 's' keys for paddle control, while the right player can use the up and down arrow keys. The game currently does not end at a specific score value. If playing a match, players should decide on a winning score beforehand.

Game Options

Controls are included to adjust the game speed, paddle size, and ball size.

If "English" is turned on, the balls trajectory will be affected by any vertical paddle motion at the moment of impact. Activating "Gravity" will pull the ball toward the lower surface of the playing area. The ball will follow a parabolic trajectory instead of the usual straight line path.

Finally, one or both paddles can be set "computer" to automate its control.

Updated 8 July 2013

Tank

Tank game logo. Tank game image.

This is a reproduction of one of the first computer games I made. This game was originally created on a Radio Shack TRS-80 Color Computer, using a language known as Extended Color Basic.

The object of the game is to destroy the enemy tanks as they cross the screen from left to right. Use the cross-hairs, controlled by the mouse, to aim your gun. Press the left mouse button to fire a round. The round takes a few moments to reach the target, so be sure to lead the tank by a little, depending on its speed.

The game ends when all ten rounds have been fired.

Sprite Sheet

The game is designed to have the look and feel of the original. However, under the hood, it is very different. While the original used vector drawing commands to draw the images, this version uses a bit-mapped sprite sheet saved as a PNG file.

Sprite sheet for this game.

The highest graphics mode available on the Color Computer was 256 x 192 pixels. At that resolution, only two colors could normally be used at one time. To imitate the resolution of the original display, I created the sprite sheet (image at left) using square blocks measuring four pixels per side.

Updated 8 July 2013

Tank 2

Tiger tank illustration. Tank game image.

Tank 2 is an update of my original tank game from the 1980's. This version includes nine kinds of tanks, both enemy and friendly, with different point values. Destroying a friendly tank will result in a ten point penalty.

In the original game, players had to lead their target to compensate for the shells flight time. In this version, players must also account for the shell falling as it reaches more distant targets.

The tanks can now come from either direction and several tanks may be on the screen at the same time.

High Score Table

A table showing previous scores, on your computer, has been added below the game. Each game you complete will be added to the history list. As the list grows, you can sort by user name, score, or time played. Users may delete individual scores if desired.

The score database is stored in a cookie on the users computer.

 

Sprite Sheets and Graphics

Here are links to the graphics I created for this game.

Sprite sheet for this game. Graphic for this game. Instruction graphic for this game.

Updated 8 July 2013

New Image Puzzle Game

Image puzzle game.

A new version of my puzzle program has been uploaded. The program now includes twelve images from my archives.

Upon puzzle creation, each piece is rotated a random number of 90 degree increments. Right-click using your mouse to rotate a piece 90 degrees.

New Features Added - September 2012:

A totally redesigned image selection screen allows for a larger selection of images. (A dozen in this version, many more in the future.)

The game timer has been improved, and now includes the time of the last puzzle completed during the current session.

Several game elements have been animated, including puzzle creation and piece rotation. A toggle switch on the image selection screen allows users to turn the animations off if too slow on their computer.

Sounds have been added for certain events! This represents my first experiments using HTML-5 audio. The sounds seem to work OK in Firefox and Chrome, but do not function properly when using Microsoft Internet Explorer.

A shadow has been added to the puzzle pieces. This increases the contrast between light colored pieces against the white background. Shadows can be toggled off and on using the S key.

I added a small window displaying the entire image. Users can reposition the image with their mouse if desired. The window is on by default, but can be toggled off and on using the V key.

New Features Added - July 2013:

The number of images available has been increased to 24.

A high score database has been added below the puzzle. Each time a puzzle is completed, the puzzle name, puzzle size, completion time, date, and optionally the users name, will be added to the database. Players can delete individual scores from the table if desired. The table can also be sorted by any of the fields by clicking on the column header for the field.

Posted 15 September 2012

Updated 9 July 2013

Image Puzzle Game

Image puzzle game.

I've added a new browser game. It's called Image Puzzle and allows players to create puzzles from any of the six included images.

The program splits an image into squares and randomly places them in the playing area. Use the mouse to click and drag the pieces to their proper location. When a piece is near its final location, it will snap into position and will no longer be selectable.

The game opens to a splash screen from which the user can select an image.

When the puzzle has been created, press the 'P' key to cycle between 12, 48, and 108 piece puzzles. An optional grid is available. Press the 'G' key to toggle the grid on and off.

Near the bottom of the screen, feedback is given as to the number of pieces placed correctly and the percent completion.

Posted 22 August 2012

Lunar Lander Game

Lunar lander illustration. Lunar lander game image.

I'm in the process of developing several HTML5 browser games. The first one, a simple lunar lander game, has been uploaded.

The objective is simple. Safely land your spacecraft on the surface before running out of fuel. To land successfully, the terrain under your lander needs to be relatively flat. Additionally, your horizontal speed and vertical sink rate must be within predefined limits.

When the game first runs, a starting screen will display user controls and provide the player with a choice between three terrain maps. Select a map by pressing its number or by clicking with your mouse. The up and down arrow keys control the main engine throttle, while the left and right arrow keys fire your maneuvering thrusters. Press the 'H' key to cycle the data display on and off. Data is given for vertical velocity, horizontal velocity, and fuel remaining. If your speed is too high, the number will turn red. Values within acceptable limits will be green.

The game has been tested successfully in Firefox 13 and Google Chrome 19. Some older browsers, that do not properly support HTML5, will not be able to play the game.

I have a number of ideas for a future upgrades, including a randomized terrain generator that will improve the re-playability of the game, and the ability to record the number of successful landings a player makes.

Posted 26 June 2012