Daniel Zuzevich Daniel Zuzevich - 4 months ago 28
AngularJS Question

Angular JS Array Parsing

So I am in the very beginning stages of making an interactive game with Angular JS. I have been stumped for the past two days on how I would go about only logging the wrong guesses to the screen(instead of logging every guess typed in). My goal is to ultimately have a max wrong guess amount of 10, then the user loses. I am just stumped at how I would do this. New to Angular, but can't figure it out in plain JS either. Any help or hints would be much appreciated.



app.controller('MainController', ['$scope', function($scope) {
var answerArray = ["linux","macintosh","windows"];
var answer = answerArray[Math.floor(Math.random() * answerArray.length)];
$scope.answer = answer;
$scope.userGuesses = [];
$scope.wrongGuesses = [];
$scope.guessTracker = 0;

$scope.guessCheck = function(){
if($scope.userGuesses.indexOf($scope.guess) === -1){
$scope.userGuesses.push($scope.guess);
}
$scope.guess = "";
};

$scope.letterDisplay = function(){
var chars = $scope.answer.split("");

_.each(chars, function(val, index){
if( $scope.userGuesses.indexOf(val) === -1){
chars[index] = "_";
}
});
return chars;
};
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<body ng-app="hangMan">

<div class="container" ng-controller="MainController">
<div class="row text-center">
<h1>Save Bernie</h1>
</div>

<div class="row text-center">
<div class="col-md-12">
<div id="messageDisplay">
<span ng-repeat="char in letterDisplay() track by $index">
{{char}}
</span>
</div>
</div>
</div>

<!-- Drawing -->
<div id="mainContent" class="row rowspacing">
<div class="col-md-6">
<div id="drawingWrapper">
<div id="pole"></div>
<div id="poleExtension"></div>
<div id="rope"></div>
<div id="torso"></div>
<div id="head"></div>
<div id="leftArm"></div>
<div id="rightArm"></div>
<div id="leftLeg"></div>
<div id="rightLeg"></div>
<div id="hillary"></div>
</div>
</div>
<!-- Controls -->
<div class="col-md-6 text-center">
<div id="userSubmit">
<form ng-submit="guessCheck()">
<input type="text" name="guess" ng-model="guess" required><button>Guess</button>
</form>
<div id="guessDisplay" ng-repeat="character in userGuesses track by $index">
{{character}}
</div>
</div>
</div>
</div>
</div>
<script src='/js/bootstrap.min.js'></script>
<script>var app = angular.module("hangMan", []);</script>
<script src='/js/MainController.js'></script>




Answer

First, let's talk about making a changes to your current code. You can improve performance and make it easier to search for unique user guesses by using a JS object instead of an array. You weren't checking if the guess was correct in the guessCheck function. This is where you can push the wrong guesses to the wrongGuesses array. That is mostly all that needs to be done at the controller. In the HTML template you can use various ng directives such as ng-show, ng-click, etc. to provide the various presentation updates based on the state of the game.

app.controller('MainController', ['$scope', function($scope) {
  var answerArray = ["linux","macintosh","windows"];
  var answer = answerArray[Math.floor(Math.random() * answerArray.length)];
  $scope.answer = answer;
  $scope.userGuesses = {};
  $scope.wrongGuesses = [];

  $scope.guessCheck = function() {
    if(!$scope.userGuesses.hasOwnProperty($scope.guess)){
      var isCorrectGuess = ~$scope.answer.indexOf($scope.guess);
      if (!isCorrectGuess)
        $scope.wrongGuesses.push($scope.guess);
      $scope.userGuesses[$scope.guess] = "true";
    }
    $scope.guess = "";
  };

  $scope.letterDisplay = function(){
    var chars = $scope.answer.split("");

    _.each(chars, function(val, index){
      if(!$scope.userGuesses.hasOwnProperty(val)){
        chars[index] = "_";
      }
    });
    return chars;
  };
}]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<body ng-app="hangMan">

    <div class="container" ng-controller="MainController">
      <div class="row text-center">
          <h1>Save Bernie <span ng-show="wrongGuesses.length===10">(Game OVER!)</span></h1>
      </div>

      <div class="row text-center">
        <div class="col-md-12">
          <div id="messageDisplay">
            <span ng-repeat="char in letterDisplay() track by $index">
              {{char}}
            </span>
         </div>
        </div>
      </div>

      <!-- Drawing -->
      <div id="mainContent" class="row rowspacing">
        <div class="col-md-6">
          <div id="drawingWrapper">
            <div id="pole"></div>
            <div id="poleExtension"></div>
            <div id="rope"></div>
            <div id="torso"></div>
            <div id="head"></div>
            <div id="leftArm"></div>
            <div id="rightArm"></div>
            <div id="leftLeg"></div>
            <div id="rightLeg"></div>
            <div id="hillary"></div>
          </div>
        </div>
      <!-- Controls -->
        <div class="col-md-6 text-center">
          <div id="userSubmit">
            <form ng-submit="guessCheck()">
              <input type="text" name="guess" ng-model="guess" required maxlength="1"><button ng-show="wrongGuesses.length < 10">Guess</button><button ng-show="wrongGuesses.length===10" ng-click="wrongGuesses = []">Reset</button> Wrong Guesses: {{wrongGuesses.length}}
            </form>
             <div id="guessDisplay" ng-repeat="(character,value) in userGuesses track by $index">
              {{character}}
            </div>
          </div>
      </div>
    </div>
  </div>
    <script src='/js/bootstrap.min.js'></script>
    <script>var app = angular.module("hangMan", []);</script>
    <script src='/js/MainController.js'></script>

Comments