Interactive Prototype I - Mines Between the Lines in Actionscript (SoD)

Interactive Prototype 1 – Statement of Delivery

The concept is a mashup between two classic games, Dots (aka Dots and Boxes) and Minesweeper. This interactive prototype was created in Actionscript 3 using Adobe Flash Professional CS6.

This prototype will be testing the basic concepts that mirror features in the Dots and Minesweeper games. A detailed breakdown of my prototype can be found on my blog at: http://jasonh-deco2300.blogspot.com.au/2014/09/the-content-in-previous-blog-post.html

The prototype involves 2 players taking turns moving the mouse and selecting dots in a square grid using the mouse. When two adjacent dots are selected, a horizontal or vertical line will be drawn between the two dots. If a player manages to create 4 lines in the shape of a box, they claim that box and any points which are in that box. Points in the boxes are determined by a hidden minesweeper grid and are revealed automatically as boxes are claimed. The interaction between the mouse controlled by the player and game screen (input and output) will be focused on in the testing of this prototype.

Figure 1: Mines Between The Lines Prototype Sample

Figure 2: Mines Between the Lines Game Sample (with Reset Button)

The main game board is centred in the middle of the window. To the left and right are score counters for the two players. Below is text indicating the current player’s turn. In the bottom right are just samples of what the numbers and mines look like (non-functional).

For testing, users will play through a game on a 5x5 dotted grid.

For feedback, I will be looking for things such as:

                How suitable is using mouse input to play the game? Can you suggest any alternative ways to play the game? Would using keyboard keys (arrow keys or WASD) be easier to understand? Easier to control?

How suitable is the positioning of each of the game elements? (relative to the window, relative to each other)

Eg: Main game in the centre

Player turn at bottom

Scores to the left and right

Title at top

How suitable are the colours of the elements?

Is the size of the board suitable for the game?

                Is 5 x 5 suitable for short games / testing?

                How about 9 x 9 or 10 x 10 dots for a fuller game?

The points awarded for squares and mines, is it too much or too little? Is it balanced?

How big of an achievement is it (do you feel) when you gain or lose points?

Are there too many things to keep track of? Or are you able to keep a clear strategy in your head?

What parts of the game do you find the most confusing?

Feedback will be given through a written survey and additional verbal feedback.

During the making of the prototype, I decided to find some samples of Dots and Minesweeper games that had already been made in Actionscript and use those concepts in my prototype. These included drawing the lines between dots in a grid, and generating the mines and numbers randomly. These functions were incorporated into my prototype as to provide functionality that had already been written by other people.

Connecting Two Dots: http://www.actionscript.org/forums/showthread.php3?t=277270

Build a Minesweeper Game Within 200 Lines of Code: http://code.tutsplus.com/tutorials/build-a-minesweeper-game-within-200-lines-of-code--active-8578

More details can be found on my blog post: http://jasonh-deco2300.blogspot.com.au/2014/09/the-content-in-previous-blog-post.html

The first step was to take the code from Connecting Two Dots and make it into a functional Dots-only game. The code I started with allowed drawing a line when any two dots were clicked. I built on this and added, line detection and tracking, box filled tracking with the use of arrays.

Implementing the Minesweeper functions was the next step. As Minesweeper itself is a complicated game, there were a few features that I did not include in the prototype. These included the option to flag square where players think mines might be located, and other small features such as the reset button, and for the dots to change appearance when hovered on with the mouse.

The final big problem before I had a functional working prototype was with the text of the numbers covering/on top of the dots, resulting in being unable to click on these dots once a square with text appeared. This was because the TextField area that contained the text had significant padding added to all sides of the text. To combat this, I could either make the TextField smaller so that it wasn’t on top of any interactive elements, or send the Textfield to the back, below the dots. However I also needed the square background below the numbers. I combated this by calling the numbers function first and sending to back, and then the squares function and sending to back.

Previous Order (from top to bottom): Numbers, Squares, Dots, Lines.

New Order: Dots, Lines, Numbers (send to back first), Squares (send to back second).