Угловой анализ массива JS

Question

Угловой анализ массива JS

0

Поэтому я нахожусь на самых первых этапах создания интерактивной игры с Angular JS. Последние два дня я был в тупике, о том, как я собираюсь только регистрировать неправильные догадки на экране (вместо того, чтобы регистрировать каждое угадывание, введенное). Моя цель состоит в том, чтобы в конечном счете получить максимальное количество ошибок, равное 10, тогда пользователь проигрывает. Я просто в шоке от того, как я это сделаю. Новый для Angular, но не может понять это в простом JS. Любая помощь или подсказки будут высоко оценены.

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>

Dan Zuzevich 28 июль 2016, в 20:20

Источник

Теги:

angularjs

2 ответа

1

объяснения в комментариях. Я также установил максимальную длину входного текстового поля в 1. Замену большинства условий для подчеркивания функций, так как вы просто используете его, почему бы не использовать для всех?

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;  //unused

  $scope.guessCheck = function(){
    // if $scope.guess still doesn't exists on $scope.userGuesses, push it
    if(!_.contains($scope.userGuesses, $scope.guess)){
      // convert $scope.answer into array
      var chars = $scope.answer.split("");

      $scope.userGuesses.push($scope.guess);

      // if $scope.guess is not found on chars array, add it to wrongGuesses
      if(!_.contains(chars, $scope.guess)) {
         $scope.wrongGuesses.push($scope.guess);
      }

      // pop-up alert if wrong guesses reaches 10 or more
      if(_.size($scope.wrongGuesses) >= 10) {
         alert("gameover");
      }
    }
    $scope.guess = "";
  };

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

    _.each(chars, function(val, index){
      // used _.contains instead of .indexOf because why not?
      if(!_.contains($scope.userGuesses, 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</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" maxlength="1" required><button>Guess</button>
            </form>
             <div id="guessDisplay" ng-repeat="character in wrongGuesses 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>

doge1ord 28 июль 2016, в 15:51

0

Большое спасибо за ваш код. Очень признателен!
Dan Zuzevich 28 июль 2016, в 19:29

Ещё вопросы

Большое спасибо за ваш код. Очень признателен!

10100111001 · Accepted Answer · 2016-07-28T16-57-00.000Z

Во-первых, позвольте говорить о внесении изменений в ваш текущий код. Вы можете повысить производительность и упростить поиск уникальных пользовательских догадок с помощью объекта JS вместо массива. Вы не проверяли правильность предположения в функции guessCheck. Здесь вы можете подтолкнуть неправильные догадки массиву wrongGuesses. Это в основном все, что нужно сделать на контроллере. В шаблоне HTML вы можете использовать различные ng-директивы, такие как ng-show, ng-click и т.д., Чтобы предоставлять различные обновления презентации в зависимости от состояния игры.

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>

Обновление: я забыл упомянуть, что вы должны в конечном итоге создать функцию для кнопки сброса, которая должна сбросить объект userGuesses, wrongGuesses array и сбросить ответ или получить новый ответ. В настоящее время сбрасывается только массив wrongGuesses.

Нет проблем, ответ был высоко оценен.
В идеале я не хочу использовать underscore.js какие-либо быстрые рекомендации о том, что я мог бы реализовать вместо этой функции _.each?