2016-07-28 9 views
0

私はAngular JSを使ってインタラクティブなゲームを作っています。私は過去2日間、間違った推測だけをログに記録する方法について、(推測されたすべての推測をログに記録するのではなく)スクリーンにぶつかってしまった。私の目標は、最終的に10の最大誤った推測量を持つことです、その後、ユーザーが失われます。私はこれをどうやってやるのかちょうど困惑している。 Angularを新しくしましたが、普通のJSでもそれを理解することはできません。どんな助けやヒントも大歓迎です。Angular JS Array Parsing

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>

答えて

1

まずは、あなたの現在のコードに変更を加えることについて話しましょう。パフォーマンスが向上し、配列の代わりにJSオブジェクトを使用することで、一意のユーザー推測を簡単に検索できます。 guessCheck関数で推測が正しいかどうかをチェックしていませんでした。これは間違った推測をwrongGuesses配列にプッシュすることができます。これは主にコントローラーで行う必要があります。 HTMLテンプレートでは、ng-show、ng-clickなどのさまざまなngディレクティブを使用して、ゲームの状態に基づいてさまざまなプレゼンテーションアップデートを提供できます。

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配列、及びその答えをリセットするか、新しいを取得するのを忘れ回答。現在wrongGuesses配列のみがリセットされています。

+0

問題はありませんが、答えは大歓迎です。 –

+0

理想的には、その_.each関数の代わりに私が実装できるものについて、underscore.jsのクイック推奨を使用したくないのですか? –

1

コメントで説明。また、入力テキストボックスのmaxlengthを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>

+0

ありがとうございます。とても有難い! –