Tagged: games

When you play Hangman with a computer, the computer needs a way to find puzzles for you to solve. When I first wrote my Hangman game, I included several themes, each with a pre-written list of puzzles. Later, I devised a way so that users could embed their own custom puzzles, with encrypted URLs so they could be emailed to friends (see Custom Hangman Puzzles for Valentine’s). Now there’s a way to point to a favorite Twitter account, and use tweets as the source for puzzles.

I call this game-ification: turning user-generated content into a game. My first project was using Flickr photos as puzzles for my Concentration game (see Game-ifying Flickr via Concentration. I thought Twitter’s 140-character limit would be a good fit, but it turns out 140-character puzzles are uninteresting, partially because with that many letters they are too easy to solve. So, I implement a limit of 100 characters. I’d prefer even shorter puzzles, but most tweets are longer. I also limit the number of different letters used. A puzzle with 22 or more different letters is impossible to lose, since it takes 5 wrong guesses to lose. Thus, I use only tweets with 17 different letters, or fewer. I also replace all links with “«»”. Twitter now converts links to “t.co” URLs, which are shorter but made up of gibberish. » Continue Reading…

Game-ifying Twitter with Hangman

Just in time for Valentine’s Day, I added a new romantic theme for the JavaScript Hangman game, Cupid’s Hangman, where the puzzles celebrate the holiday. You’ll discover an assortment of quotations appropriate for Saint Valentine. Hint: try guessing the letters L O V E.

At the same time I’m launching a new feature letting you choose your own puzzle. Starting at the About page, you can enter a word or phrase and select the theme to go with it. The theme determines the puzzles that will be played after your custom puzzle, and some themes have their own color scheme (like Metro and Cupid’s).

The puzzle is encrypted into the URL, so you can link to it in an email without giving away the answer. Here are some samples, inspired by the Necco “Sweethearts” candy hearts with messages stamped on them: » Continue Reading…

Game-ification is the process of turning public data or user-generated content into a game. As a heavy user of Flickr, I’ve been interested in different ways to discover and play with their rich repository of photographic content.

Earlier this month I wrote a JavaScript Concentration Game. By default it uses pre-determined photos from my own Flickr collection. But now you can start at the “about” page and plug in the name of a Flickr user or group, or find photos by searching the text or tags. (Try it here.)

Clicking on a photo brings the title and owner to the top of the screen, which you can click to open the original Flickr page in a new window. At the end of a game, you have the option of playing with the same photos, or drawing the next “page” of photos using the same search criteria.

Game-ification both makes playing Concentration more interesting and adds a fun new way to explore Flickr.

Concentration is an old card game ideally suited as a computer program. Instead of cards, I use photos. The game is a pure memory skills test.

Six pairs of photos are hidden behind squares. The player uncovers two squares at a time. If they match, they remain uncovered. If not, they become hidden again. The goal is to commit the photo’s location to memory so that when a new square is uncovered its pair can be found. Find all pairs using as few guesses as possible.

Like Mastermind and Hangman, Concentration was written in JavaScript, and designed to scale for any display, from large desktops to small mobile devices. I recycled much of the same code from those other programs (see Building Mastermind for All Screen Sizes and Creating Hangman in JavaScript). The layout is determined dynamically at start-up and when the window is resized. » Continue Reading…

Hangman is a word-guessing game, less abstract than code-breaking Mastermind, and using English phrases as the target of the player’s guesses. The tools of the game are simple enough to implement with a simple JavaScript program, and should scale well for full-size desktop screens or smaller mobile devices.

I used some of the same code from Mastermind (Building Mastermind for All Screen Sizes) in order to have the layout easily scale to fit the user’s screen. Because the hidden phrases can greatly vary in length, it’s hard to know how many lines it will require for a given screen width and line height. (Font size does refer to vertical height, but the line height setting is usually more important.) The offsetHeight property purportedly gives you the height of a block in the document object model, but I’ve seen too many times when the value is wrong, only to see it right a few seconds later. I suspect rendering is done in a separate thread, and offsetHeight may not be accurate immediately after assigning content to a block. So, for that reason the Hangman puzzle will overlap lower sections sometimes (and can be corrected by slightly resizing the window). I suspect the best solution might be to switch to using a canvas element to render the entire game. » Continue Reading…

Mastermind is a simple code-breaking game that’s educational and fun. I grew up playing the Hasbro game, where one person configures the code and the other tries to solve it. The tight logic and scoring algorithms make it a good fit for programming projects.

For this version, I wanted the design to scale to both a desktop and a mobile device. An old program I had written put the output in a table, but as I played with dynamic scaling, it dawned on me that the table structure wasn’t adding much value. Design purists famously hate tables used to control layout. I’m no purist, but this seemed a good time to dive into using CSS and JavaScript to manage the output.

Each element in the game exists in a div tag with an ID. There are two CSS properties I set universally in the internal style sheet: » Continue Reading…

The Washington region’s iconic Metorail map is a topological map that plays with scale in order to efficiently display the lines and the stations. I created my own map which allows you to play with other distortion schemes.

Primarily, the map will adjust to reflect travel times between stations (sometimes called an isochrone map). When you select a station, the others are re-arranged so that their distances (as the crow flies) are proportional to the travel time, while preserving the direction, based on their true geographic coordinates.

For the sake of simplicity, I am making up travel time based on the number of stations and the number of transfers. All neighboring stations are considered to have the same travel times. Initially, the “psychic” cost of a transfer is free, but a control below the station list lets you assign a cost to transfering, in terms of the cost of station travel. (A future update will let you use actual travel times.) » Continue Reading…

Metro Distortion Map