Wednesday, May 18, 2011

Build a Minesweeper Game Within 200 Lines of Code

In this tutorial we will learn how to plan and code a minesweeper game using AS3 and Flash. Can we make it in just 200 lines?! Let’s see…


Final Result Preview

Let’s take a look at the final result we will be working towards:

Because Flash Player doesn’t support right-click, shift-click on the squares you think contain mines in order to mark them.


Minesweeper Rules

If you’re a minesweeper player, then probably you know the game rules — but just in case you’re not:

Minesweeper game consists of a group of squares where each square represents a region. Each region either contains a mine or not. Your mission is to reveal (or “open”) all the mine-free regions and mark the ones that contain mines. You open the region by left-clicking it, and mark a region by shift-clicking. The key for determining whether a certain region contains a mine or not is that for every 3×3 grid (9 regions) of squares, the number written on the region in the center represents the number of mines in the 8 other surrounding regions.

So, when starting your game, your first few clicks will depend on your luck to find mine-free regions, but once you open a fair amount of regions, you can use logic to find the regions that contain mines.

A good example for a minesweeper game, is the one that ships with Windows (any version); a simple search for [online minesweeper game] will also direct you to several versions, which all have the same concept. Otherwise, play the game from the final SWF file, embedded above.


Modeling Minesweeper the OOP Way

In a minesweeper game, if we want to think of the game from the OOP point of view, we can consider each region as an object. We will call this object a ‘zone’, and all of the game zones will be in a container object that we will call the ‘board’.

For every zone object, there is a bunch of properties like:

  • state: whether it contains a mine or not.
  • revealed: if it’s revealed, the user has opened the zone.
  • marked: whether the user has marked the zone as containing a mine.
  • zoneValue: the number written inside the zone representing the number of mines in the surrounding zones.
  • xcor: the horizontal position of the zone in the board.
  • ycor: the vertical position of the zone in the board.

And that’s how we will build the game. there will be a Zone class linked with a zone movie clip in the library, and we will instantiate the amount of zones we need from our main class to make the game board.


Addressing the Right-Click Problem within Flash

For a regular minesweeper game — a native one that’s not in the browser — you can have access to both mouse buttons, so that the user playing the game can open regions by left clicking and mark them by right clicking. If you were to publish the game as an AIR application, then you would have access to all of the mouse features including the right and middle mouse buttons, and you should do that for better user experience while playing the game.

But if you want to publish the game via Flash Player in the browser, then you don’t have access to the right mouse button, since the right mouse button will open the context menu for the Flash Player; so we have to figure out a solution for this problem.

The solution that I came up with is through using the keyboard. I made it by detecting the shift key, and found that the easiest way to do that is by using the shiftKey property for the MouseEvent class. there are a bunch of other properties for some special keyboard keys like the Alt (for windows), Option (for mac), and the Ctrl (Command) key. I recommend that you check them out in the documentation help for the MouseEvent class if you don’t already know them.


Contents of the FLA

Let’s take a look at the FLA that we will be working with.

[...]

Read more: Build a Minesweeper Game Within 200 Lines of Code

No comments:

Post a Comment