Replace a value in array1 with value in array2, when link is clicked, in a DRY way with Angularjs -
i'm new angularjs writing memory card game solidify i've learned far tutorials.
game basics
cards flips on when card's link clicked user.
there 2 arrays in js file, 1 array true values of cards, , second array values user sees (so nothing if card face-down). there link in view each separate value in second array. when user click link, value in second array replaced value in same position of first array.
problem
i'm writing separate function every single card, , feels not dry.. if want use 52 cards in later version of program. current version has 4.
would love advice on how make cleaner (or general criticism) :)
app.js
angular.module('board', [ ]) .controller('boardctrl', function($scope) { var cards = shufflearray(['a','k','q','j']); var table = ['?','?','?','?']; $scope.a = table[0]; $scope.b = table[1]; $scope.c = table[2]; $scope.d = table[3]; /* flip card */ function flipcarda() { $scope.a = cards[0]; } $scope.flipcarda = flipcarda; /* flip card b */ function flipcardb() { $scope.b = cards[1]; } $scope.flipcardb = flipcardb; /* flip card c */ function flipcardc() { $scope.c = cards[2]; } $scope.flipcardc = flipcardc; /* flip card d */ function flipcardd() { $scope.d = cards[3]; } $scope.flipcardd = flipcardd; }); function shufflearray(array) { (var = array.length - 1; > 0; i--) { var j = math.floor(math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } index.html
<!doctype html> <html lang="en" ng-app="board"> <head> <title>chat example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/bootstrap-responsive.min.css"> <script src="bower_components/angular/angular.js"></script> <script src="js/app.js"></script> <script src="bower_components/jquery/dist/jquery.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> </head> <body ng-controller="boardctrl"> <div class="container" style="text-align:center"> <div> <li ng-repeat='category in categories'> <a href='#' ng-click='setcurrentcategory(category)'>{{category.name}}</a> </li> </div> <div class="row"> <a href="#" ng-click='flipcarda()'>{{a}}</a> <a href="#" ng-click='flipcardb()'>{{b}}</a> </div> <div class="row"> <a href="#" ng-click='flipcardc()'>{{c}}</a> <a href="#" ng-click='flipcardd()'>{{d}}</a> </div> </div> </body> </html> thankyou
think of how make functions arguments match arrays in controller.
following no means complete or 100% efficient solution simplifies doing
app.controller('boardctrl', function($scope) { var cards = ['a', 'k', 'q', 'j']; var table = ['?', '?', '?', '?']; // set function references below on scope $scope.flipcard = flipcard; $scope.sethands = sethands; function flipcard(index) { $scope.table[index] = cards[index]; } function sethands() { // shuffle cards = shufflearray(cards); // make copy of table array in scope $scope.table = [].concat(table) } // initialize first hands sethands(); }); html sample
<a href="#" ng-click='flipcard(0)'>{{table[0]}}</a> <button ng-click="sethands()">reset</button> 
Comments
Post a Comment