AngularJS Game Programming: Making Minesweeper (Part II)

by 1 Comment

angularjs-game-programming-making-minesweeper-blog-part-ii

Last time on “AngularJS Game Programming”: We covered the game elements in minesweeper. In this post we’re going to start diving into writing the code.

Setup AngularJS

First we need setup AngularJS. This means including the AngularJS JavaScript file, creating a controller and wiring it up to the HTML. This is what that looks like:

<!DOCTYPE html>
<html ng-app>
  <head>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
      <script>
      function MinesweeperController($scope) {
          // code goes here
      });
      </script>
  </head>
    <body ng-controller="MinesweeperController">
    </body>
</html>

You can play around with the code here: http://jsfiddle.net/luisperezphd/vheyL/

I’m assuming you already have at least some exposure to Angular. If you want to dig deeper into controllers and directives in AngularJS first you can take a look at my step by step walkthrough blog post series at: How to make an email web app using Angular.

Code the Minefield

We’re going to program the game in the order I described it in the first post. Starting with the minefield. The minefield is a fixed grid of rows and columns. To model it we’re going to create an array of rows and populate each row with an array of spots.

The spots are going to be objects that keep track of the state of that particular spot on the grid. For example the spot object will keep track of whether that spot has been uncovered. Here is the code that will create the model of the 9 by 9 minefield:

function createMinefield() {
    var minefield = {};
    minefield.rows = [];
    
    for(var i = 0; i < 9; i++) {
        var row = {};
        row.spots = [];
        
        for(var j = 0; j < 9; j++) {
            var spot = {};
            spot.isRevealed = false;
            row.spots.push(spot);
        }
        
        minefield.rows.push(row);
    }
    
    return minefield;
}

Now we’ll assign the minefield to a variable in the $scope so we can access it from the HTML. So in our controller we’re going to add this line:

$scope.minefield = createMinefield();

Then in our HTML we’re going to bind our minefield data to an HTML table, repeating the table row for each row in our mine field, and repeating the <td> for each spot in our row. Like so:

<table border="1">
    <tr ng-repeat="row in minefield.rows">
        <td ng-repeat="spot in row.spots">
            {{spot.isCovered}}
        </td>
    </tr>
</table>

Our output should look like this:

true-false-minesweeper-minefield

It’s not the prettiest minefield I’ve ever seen but it’s a start.

Play with it at: http://jsfiddle.net/luisperezphd/QY4AL/

Next Time

In the next post we will add code that will allow us to uncover the posts. And we’ll add graphics to make it look more like a game.

Next: Making it look like the real thing

AngularJS – See how it all connects

by 3 Comments

Hover over the code to see how it all connects.

There are a lot of parts to Angular. When you are first learning it it can be very overwhelming. To help I created this small learning tool to let you see how different parts connect.

The way it works is simple simply move your mouse over an Angular element anywhere you see it and it will highlight it everywhere else. Visually showing you how it’s all connected.

The sample code simply counts the number of times you click a button. It’s a simple app that illustrated some of the commonly used components of angular:

  1. Contains the necessary part “ng-app” directive
  2. The very useful controller
  3. Data binding to a variable
  4. Binding to a function

Go ahead over over these bullets or the code and see what I mean. Let me know what you think in the comments below.

You clicked the button {{clickCount}} times.

You can play around with a working version of this code using this JS Fiddle: http://jsfiddle.net/luisperezphd/JTU67/.

JavaScript (my-script.js) 
angular.module("MyModule", [])

    .controller("MyController", function($scope) {
        $scope.clickCount = 0;


        $scope.userClick = function() {
            $scope.clickCount++;
        };

    });
HTML 
<!DOCTYPE html>
<html ng-app="MyModule">
    <head>
        <script src="angular.min.js"></script>
        <script src="myscript.js"></script>
    </head>
    <body>

        <div ng-controller="MyController">
            You clicked the button {{clickCount}} times.<br/>
            <button ng-click="userClick()">Click me!</button>
        </div>

    </body>
</html>

jQuery versus Angular: Tweet

by Leave a Comment

I’ve been asked what is the role of AngularJS and how does it fit with jQuery. Instead of a long explanation I thought some code samples can help in understanding some of the the differences.

Below are two code samples, one in jQuery and one in Angular. The code displays how close you are to the 140 character limit in Tweeter. This is what it looks like:

[Read more…]