2.28.2009

HTML 5 Draft Released

Apparently, the working draft for HTML 5 was released on Feb. 12th. I've very excited about the introduction of a 2D drawing API which can be used with the new canvas element.

I don't know for sure, but it sounds like you'll be able to use scripts to assemble drawings on pages. I don't know how to do this (or if it's even possible) using HTML 4. It'll be durned cool to be able to do it.

Bejeweled

This somewhat popular flash based casual game is described under the schema laid out in an earlier post as follows:

  • Game Condition: Game Condition (ends) is met when a player cannot make any legal moves.
  • Level Condition: Level Condition (end current & load next) is met when the player's score reaches the maximum for that level.
  • Score Condition: The player's score increments up when a player succesfully assembles a group of three or more similarly colored tiles or when the player triggers the level condition.
  • Movement Mode: The player moves tiles around the board by swapping two that are adjacent.
  • Movement Conditions: The player can only swap tiles if a minimum of one tile involved in the swap creates a group of three or more similarly colored tiles.
  • Power Ups: The player is granted power ups when four or more groupings of similarly colored tiles are created.
  • Flavor: Shiny gems on a cartesian grid play surface.

2.26.2009

Click . . . Match . . . Power Up!!!

On Tuesday morning I went through and played a number of different click match games with the hope that doing so would help me to sharpen up my concept for "Beer Pong.

On the one hand, I don't think I've seen a "Click-Match" game that used a hex-grid before. I want to take full advantage of what could be a novel play experience. On the other hand, Beer Pong isn't supposed to be a full fledged product. Its intent is to provide me with enough practic with Javascript to get me to the point where I can comfortably say "I know Javascript" in an interview and keep a straight face.

Looking at "Click-Match" games, it seems like they can be described using a couple of pretty basic descriptors. Mind you, I've only played a couple of different games so far, so this break-down is most likely utterlly incomplete.

What CM Games Have In Common

  • In every case, there are multiple discrete objects (the tiles) that are contained within the playspace of a CM game.
  • The most important thing in a CM game is the relationship of these tiles to one another.
  • A player's manipulation of these tiles within the context of these relationships is the heart of a CM game.

How CM Games Tend To Differ

  • Game Condition - This what determines when a game ends.
  • Level Condition - This is what determines when a level in the game ends.
  • Score Condition - This is what determines when points in a game are scored.
  • Movement Mode - How the player manipulates the position of tiles within the game space.
  • Movement Conditions - Restrictions placed on the movement of tiles within the play space.
  • Power Ups - Instances where the player is able to flout the normal conditions imposed on the game.
  • Flavor -The visual and audio interface bolted onto the game mechanics.

I'll talk about some of the different games specifically in my next post. For now, I need to get back to work on "Beer Pong."

2.25.2009

Oops, I Milestone 7'd

Well, only a little bit.

Late last night I coded up the bit that fills in empty hex's closest to the center with randomly colored tiles. The time interval between block placement doesn't scale with score, but that's only because I haven't coded in any sort of way to keep score.

I got to thinking about Milestone 5. Working up the code to generate and place the hex cells was tough and so was the code to allow for click-swapping. But the code for pattern matching? That's gonna take the cake. Before I dive into what will likely be the gnarliest part of this project, I need to make durned sure that I know how I want this game to work.

With that in mind, I spent a couple of hours this morning reaquainting myself with a bunch of different click-match games. It's getting late so I'll go into the analysis tomorrow. Besides, I need to think about it a bit more.

2.23.2009

You Can't Go To Oregon And Then Leave California

Milestone 4 has been achieved. Click here to see what project Beer Pong currently looks like. Click on a hex to select it. Click on a hex adjacent to the selected hex to swap them.


I thought I was going to be able to use the hex-coordinate system I developed in Milestone 1 to calculate the id's of adjacent hex's. Shockingly, I ended up running into an unexpected problem.


It turns out that while creating the hex-grid and placing tiles is easier with the ijk coordinate system, finding adjacent tiles becomes devilishly tricky. Ironically, the problem with using the Cartesian coordinate system was that placing the tiles was really difficult but finding adjacent tiles was easy.


Luckily for me, in Milestone 2 I had developed a method to convert between hex-coordinates and Cartesian coordinates. I was able to use that conversion method to easily find adjacent hex's.


While working on this Milestone I ran across yet another bit of quirky Javascript behavior. Javascript can generate events that call functions stored in the portion of the the html document. They look like the following:


img src="foo.png" onmouseout="out_foo()" onmousein="in_foo()
onclick="click_foo()" /


When the cursor passes over a hex, in_foo() gets called and makes the border appear. When the cursor passes out of the hex, out_foo() gets called and makes the border disappear. When a hex gets clicked, other stuff happens (contained within click_foo()) that causes the border to stick around when the cursor leaves the hex, maybe disappear on other hexes and maybe swap places with adjacent selected tiles.

Here's where the behavior gets quirky (though in thinking about it while writing this post, it's really not THAT quirky):




  • Tile gre_0_1_2 is a green hex tile at ijk coordinate (0,1,2).

  • Tile pur_1_1_2 is a purple hex tile at ijk coordinate (1,1,2).

  • These two tiles are adjacent.

  • Tile pur_1_1_2 was the last tile clicked and remains highlighted even though I've moused out of it.

  • I mouse into gre_0_1_2 and the tile becomes highlighted.

  • I click gre_o_1_2 and the two highlighted tiles are swapped.

  • Both gre_012 and pur_112 become hidden, as do the borders around both tiles.

  • Tiles pur_012 and gre_112 become visible and the border around pur_012 becomes visible.

  • When I mouse out of pur_012 the border should remain on because it was the last one clicked.

  • However, when I mouse out of the hex, the border becomes hidden.



I had to fiddle fart around to figure out what was going on, but I eventually managed to do it and code up a simple workaround.


In layman's terms, once you enter the State of Oregon you cannot leave any other state until you've first left the State of Oregon, unless you enter a state that happens to be entirely contained within the borders of the State of Oregon. So really, not THAT quirky. Basically, once you mouse into an element, you can't mouse out of any other element until you've moused out of the first one or moused into something else.

2.22.2009

I Think I Need To Have My OS Reinstalled

A guy I met on the tubes (a rather cute one from Florida with a boyfriend in Spokane) was telling me the other day that he had confused me with my ex (Scottland) after he saw a picture of the two of us "standing in front of a rock." I think he meant the pictures of us from when we visited Natural Bridge in Virginia while back east at Bob's wedding.

This conversation spurred me to go back and read some of my entry's from years past. In particular, I dwelt on those written during the six months of self-abuse known as "two quarters at the UC Davis department of Chemical Engineering." It was interesting, reading those posts. I could really tell how much I hated graduate school and what a number it was doing on me.

That being said, it felt like my posts back then were funnier, even when I was bitching about how over my head it felt like the still rising waters were. It was like I had more of a sense of humor. Maybe the last year has been tougher on me than I really give myself credit for. I mean, it's been hard dealing with the Avalanche of Dooms, but I'd always assumed that it hadn't really changed me. Maybe it has.

Oh, and "Hi" Suzanne. You're like, the only person that reads this blog anymore. Do you have an RSS feed set-up or did you just happen to blunder into that post on switch statements right after I put it up?

2.19.2009

Beer Pong Milestones

So I've been thinking about (and organizing) my new coding project in terms of 'milestones.' Essentially, these are major bits of functionality that need to be developed in order for the project to have a chance of being succesfully completed. So far, the milestone list is as follows:

(1) Generate and store data that describes a regular hex grid of tiles in terms of variables that will be important to the game.
(2) Use the data from milestone 1 to display a static hex grid of correctly colored and positioned tiles.
(3) Code in the ability to change the change the color of the tiles without reloading the page.
(4) Allow adjacent tiles to be swapped by clicking them.
(5) Be able to see groupings of three or more colored tiles.
(6) Have empty cells in inner rings back fill with tiles from outer rings that are in cells along a line passing through the center of the board and the empty cell being filled.
(7) Place a randomly colored tile in the innermost empty cell at an interval that decreases as the player's score increases.
(8) Fashion a more aesthetically pleasing and functional interface for the game.

Milestone 8 is probably a good deal more complicated than a single milestone should be. Oh well.

So far, I've completed milestones 1-3. You can see the results of Milestone 3 here.

Critical Note To Self

When translating from pseudo-code to actual code, don't forget to add in the "break;" statements at the end of switch/case code blocks that you left out of the pseudo-code because their presence was "obvious." Doing this can cause unexpected behavior in your code.

2.18.2009

Project Beer Pong

This is the name I've assigned to my next exciting foray into game development. Here are the details so far:
  • Beer Pong will be a click management style casual game.
  • The game will be played on a polar coordinate grid.
  • The player will move tiles around the board by swapping the contents of two adjacent cells.
  • When three or more tiles of the same color are adjacent, they will be removed from the board.
  • Once tiles are removed, infilling (if appropriate) will occur.
  • At game start, every cell on the board will be empty.
    A new tile of random color will be inserted into an empty cell nearest to the center of the board after an interval.
  • As the game progresses, the interval length between new tile insertion will decrease.
  • The game will end when every cell on the board is full.
  • Logged in users will be able to start a game at levels higher than 1.
  • The game will have a leaderboard where high scores and highest level completed will be posted.
  • The theming of the game will in some way be related to beer.

2.13.2009

Thinking In Hex

I completed my substr("LAMP",2,2) project earlier this week and sent out an email to everyone I thought might be interested in seeing it. The comments so far have been positive and in particular the two techie's that have looked at it so far have had complimentary things to say.

My next project is going to be to create a "click management" game entirely in javascript. The end goal here is to get to where I can use AJAX and javascript is a big part of that. Also, I wanted to make a real game. The earlier project (S.Rex War) wasn't really a game.

So, the concept for this new project is going to be a "click-3" game with one twist. Most click-3 games I've seen have been done with a basic x-y coordinate system. I'm going to attempt to make a minor variation on the concept and have it play off of a hex grid.

So far, I've been focusing on fleshing out what the overall code will look like. My experience with the "Cryptic Rotating Block Test" reinforced the idea that you should plan before getting into the actual coding.

The most difficult problem so far has been trying to figure out how to easily represent a hex grid using a Cartesian coordinate system. It's been a real pain but I think I finally have a pretty nifty solution. Oddly enough, I've seen this solution before and it very much reminds me of a three-component phase equilibrium diagram.

2.10.2009

Geithner's Speech

Much of what the treasury secretary said sounded good, but without concrete details and an unfortunate preponderance of the phrase "in the coming weeks" it's hard to say how good the proposals really are.

I did note one rather depressing statement on Geithner's part. Towards the end he goes on for a bit, talking about how there will stops and starts in the progress of repairing the financial system. That there will be experimentation and times when ideas fail and need to be jettisoned.

What he didn't say, but what's pretty clear from reading between the lines, is that the Obama Administration expects this crisis to stick with us for quite some time.

So yeah, we should probably start thinking of a name for what we're going to call this thing we're going to be living in. Great Depression 2 isn't very evocative. Whatever we do end up calling it, it's likely to be the central aspect of all of our lives for the next few years.

Personally, I'm most interested in how the financial system is going to be reformed. Regardless of how well we manage to arrest the crisis, we cannot have true long term recovery without making sure that the systemic flaws inherent in the old system are repaired.