I’ve always loved game shows. One of the cool things about a vacation day or snow day in the winter was that I got to see my favorites. The ones that stick out in my memory were the original Match Game late in the afternoon (I remember being disappointed with the changes made for Match Game ’73, though in hindsight, the changes were for the best), Jeopardy, with Art Fleming around noon time, and my all time favorite, Concentration, in the mid morning.

I think a big part of my attraction to Concentration was the marvelous game board. Thirty numbers, all on rotating trilons, with one face for the number, one face for the prize, and one face for the puzzle piece. Each puzzle was a rebus, spelling out a phrase with pictures.

(Yes, it’s cheesy by today’s standards.)

I worked my way through several versions of the home game, but they were always unsatisfactory in one way — no rotating numbers. The puzzle was on a scroll of paper, with clear slots for removable number and prize cards. The game play was the same, but the game board was different.

Introducing Concentration

I’ve long wanted to build my own Concentration game. About twenty years ago, I tried building my own trilon-based game board, but after building all the trilons, I couldn’t figure out how to make it work.

About four years ago, I started building a version in HTML and JavaScript. I got as far as a game board and score board that worked—prizes were distributed randomly, it detected matches correctly, it handled “take” and “forfeit” properly, but the gameplay was clunky, it didn’t handle end of game well, there was no option to replay,  and it looked crummy. I was intent on duplicating the original look of the original game, but it was unfinished.

Last weekend, needing something I could demonstrate, I picked the project up again and polished it up. Now, with the power of CSS transforms and transitions, I finally have my rotating trilons. I’m now using jQuery in the script, which has simplified transitions between stages of the game. With downloadable fonts, specifically Open Sans, I’ve made the game look a lot nicer. And the game play between turns is a lot smoother.

Play Concentration here.

About the Game

My game uses the same game rules as the original game that ran on NBC from 1958 to 1973, not the later Classic Concentration version which some younger folks might be familiar with. There are thirty numbers, not twenty five, with some “Take One Gift” and “Forfeit One Gift” squares factored in. To guard against the “Forfeit” prizes, there are a couple of gag prizes as well.

There are currently five different puzzles; I plan to add more as I have time and can think of them—the structure of the script makes it very easy for me to add more puzzles. A while back I found “Rebus Font” which is a font made up from many of the symbols used on the original program.

Unlike the original, my puzzles are in color. The original producer, Norm Blumenthal, fought the switch to color, feeling that colored puzzles would give the solution away too fast. When NBC insisted on switching the show to color, he compromised by going to pink drawings on a maroon background.

At the moment, the game does not use responsive design; it works best on a desktop browser or iPad. This is the thing I intend to work on next. It also requires a recent browser that supports CSS transforms. I’ve discovered it doesn’t work properly in IE 11, but at the moment, I don’t have access to a machine to test it on. (UPDATE, February 2015: I’ve discovered the reason it doesn’t work in IE is because IE doesn’t currently support the “preserve-3D” transformation property. There are work-arounds, but I haven’t tried them yet.)

It currently doesn’t handle the “double wild” case, where one happens to pick a pair of matching Wild Cards; it should allow the selection of another set of prizes, but doesn’t.

I may add sound to the game; I have a recording of a trilon turning, but it needs cleanup.

One of the things that kind of surprises me (about myself) after the fact is that I’ve grown a little more willing to deviate from the look of the original. I guess that’s a sign of growth, or a willingness to make changes in service of a better result. In my original version, the scoreboard looked more like the original scoreboard, complete with serif based font, and the look of the Wild Cards. One of the things that had irritated me about the home games was that the Wild Card tiles didn’t look like the ones on television; in the original version, I created one that looked like the original. And yet… once I switched the prizes to Open Sans, the old style Wild Card stuck out like a sore thumb, so I changed them. Finally, I added a single player mode, so the user wouldn’t have to enter a pair of player names.

I hope you enjoy playing my version of Concentration.

Ted For Hire

I had a feeling it wasn’t good when Mark, the president of the company, and Garry, my immediate boss asked to see me last Thursday. The company needed to cut back, and I was out of a job effective Friday. They stressed that it was nothing that I’d done, and that I was leaving on good terms. I asked if I could use them as references, and they enthusiastically agreed. (Mark, in fact, just posted several endorsements on my LinkedIn profile.)

So, where does that leave me? Looking for a job.

I’ve been a web developer for 14 years, writing HTML, CSS and Javascript by hand. I know how to create highly faithful working web pages from Photoshop mockups. I know how to debug cross browser issues. I dealt with Netscape 4 and IE 6. Current browsers are a piece of cake in comparison.

I also have server side experience, using ColdFusion and Microsoft SQL server. Most of that work was in service of our content management and e-commerce platforms, pureEditor and pureCommerce. I wrote a lot of the administrative code for both systems, and along the way, developed a few really neat user interface widgets, implemented in object orientated JavaScript, HTML and ColdFusion:

  • A combination file selector select box plus file uploader
  • A file search plus file uploader widget, for use when dealing with larger quantities of files
  • A “multi-view” page, enabling the administrator to tab between editing a main item, and listing or editing associated items. For example, a page where an admin could edit a course, list students assigned to the course, and edit the student/course assignments.
  • “Search/select” functionality, where the user needs only enter a few letters to search on, causing applicable choices to be populated into an associated select box.
  • A really nice AJAX driven tabbed editor, for administering complex objects like web site records. The tabbing affords organization of the records, and the supporting script loads each section of the form as needed, adds event handlers on load, makes sure the form submission stays in the overlaid editor (rather than going to a new page) , can load external scripts on the fly, and facilitates all sorts of other interaction. I’m really proud of that one.

All of the e-commerce and content management sites have their own custom appearance, implemented via “themes”. I did all the theme development work, starting from HTML prototypes of the designer’s Photoshop mockups to actual integration with the supporting ColdFusion systems.

More recently, for the Bureau of Internet Accessibility, I’ve built a couple of generations of the Bureau site, (the last two versions in HTML 5) built user interface pieces to enable users to see their site scan results, and gotten my feet wet in Python, building several parts of the testing code that assesses pages for accessibility problems. As we started scanning sites, and started generating huge volumes of results (some sites are not well built) I learned how to create imports capable of handling large volumes of data in a reasonable period of time, without taking down the server.

In addition, before becoming a web developer, I spent years in retail. I know how to deal with customers, and I know how to support the people who deal with customers. I know how to document things, and how to explain things to non-technical users.

I’ve learned a lot in 14 years. If you can use my experience, see my resume, or get in touch via resume at tedohara dot net. Or leave a reply here. I see all responses.