AngularJS Game Programming: Making Minesweeper (Part VII)

In the last post we added code to detect and tell the player when they have won. In this post we’re going to add code to detect when the player has lost.

This is actually actually a lot easier, just check if the post where they clicked has as mine. If it does do pretty much the same thing we did when the player won, which is set a flag / variable in the scope.

In this case we set hasLostMessageVisible to true. And just like we did when the user won we add the message to the HTML and use ngIf to show the message when hasLostMessageVisible is true.

To check if they clicked on a mine we update the uncoverSpot() function. From this:

$scope.uncoverSpot = function(spot) {
    spot.isCovered = false;
    if(hasWon($scope.minefield)) {
        $scope.isWinMessageVisible = true;

To this:

$scope.uncoverSpot = function(spot) {
    spot.isCovered = false;
    if(spot.content == "mine") { // new
        $scope.hasLostMessageVisible = true; // new
    } else { // new
        if(hasWon($scope.minefield)) { // original code
            $scope.isWinMessageVisible = true;
    } // new

And we add the message to the HTML:

<h3 ng-if="hasLostMessageVisible">You Lost!</h3>

You can play with this code in this JS Fiddle:

There, now we have the core features of Minesweeper. You can now play the game and win and lose. It doesn’t yet have all the features that the orignal Windows Minesweeper had but it’s certainly a starting point.

I hope you enjoyed it.

The difference between Service, Provider, and Factory in AngularJS

If you are searching for this it’s probably because you are trying to figure out which one is the right one for you to use. Or because you’ve come across the three of them and are trying to determine the difference because they seem similar.

If you think they are similar – you’re right. They are very similar. In fact, they are all the the same thing.

They are all providers. The factory and the service are just special cases of the provider, but you can accomplish everything you want using just provider. I’ll show you.

[Read more…]

AngularJS – See how it all connects

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:

JavaScript (my-script.js)
angular.module("MyModule", [])
.controller("MyController", function($scope) { $scope.clickCount = 0;
$scope.userClick = function() { $scope.clickCount++; };
<!DOCTYPE html>
<html ng-app="MyModule">
        <script src="angular.min.js"></script>
        <script src="myscript.js"></script>
<div ng-controller="MyController"> You clicked the button {{clickCount}} times.<br/> <button ng-click="userClick()">Click me!</button> </div>
</body> </html>