Umgang mit einem Ereignis in angular js

Ich machte eine html-Seite, auf der gibt es zwei Teil, wenn ich Sie im ersten Teil steigt die Zahl und wenn ich Sie im zweiten Teil der Reihe im zweiten Teil erhöht. Ich verwendet Anuglar JS für es. Es haben auch 2-Spieler-Modus und 4-Spieler-Modus, wenn ich auf Taste 2...2 Spieler spielen und wenn ich auf 4-Taste....4 Spieler spielen.. gibt Es eine Regel in 4-Spieler-Modus, dass jedes team servieren 5 Punkte für e.g, wenn die erste Mannschaft 1 portion und es sind zwei Spieler in jedem team und das team darf die ersten 5 dienen dann nur 1 Spieler dienen in Erster 5 Punkte und dann team 2 starten zu dienen und von team 2 nur 1 Spieler dienen wird, 5 Punkte, dann wieder ein team und die anderen Spieler aus team 1, die nicht zuerst bedient dienen nun 5 Punkte, die dann andere Spieler, die nicht dienen, dienen, 5 Punkte. Jetzt möchte ich, wenn team dienen, dann möchte ich nicht, dass nur 1 Spieler dienen wird, 5 Punkte. Ich möchte, dass 1. Spieler aus team 1 dient 1. Punkt, dann wird Spieler 2 dazu dienen soll 2. Punkt und nach jedem Punkt, den der Spieler ändern sollte.

 angular.module('scoreKeeper', []).
controller('score', ['$scope', function ($scope) {

  $scope.gameInfo = {
    gameStarted: false,
    servesSinceSwitch: 0,
    scoreSwitchMode: 0,
    numberOfPlayers: 2 };


  $scope.team1 = {
    name: "Team 1",
    score: 0,
    serving: false };

  $scope.team2 = {
    name: "Team 2",
    score: 0,
    serving: false };


  $scope.player1 = {
    name: "P1",
    serving: true };


  $scope.player2 = {
    name: "P2",
    serving: true };


  $scope.player3 = {
    name: null,
    serving: false };


  $scope.player4 = {
    name: null,
    serving: false };


  $scope.startGame = function () {$scope.gameInfo.gameStarted = true;};

  $scope.players = function (n) {
    $scope.gameInfo.numberOfPlayers = n;
    if (n == 2) {
      $scope.player3.name = null;
      $scope.player4.name = null;
    } else {
      $scope.player3.name = "P3";
      //$scope.player3.serving = true;
      $scope.player4.name = "P4";
    //$scope.player4.serving = true;

    }

  };
    
    /*
    
  $scope.delPoint = function (j) {

      // Increment the player's score, how many serves since the last switch, and the highest current score
      if ($scope.team1.score > 0 && $scope.team2.score >0){
      $scope['team' + j].score--;
      $scope.gameInfo.servesSinceSwitch--;
      $scope.gameInfo.highestScore = Math.max($scope.team1.score, $scope.team2.score);}
  }*/
 $scope.addPoint = function (j) {
    // Start the game, give the Serving class to the person who won the rally
    if (!$scope.team1.serving && !$scope.team2.serving) {
      $scope['team' + j].serving = true;
      $scope.footer.message = "Game on!";
    } else {

      // Increment the player's score, how many serves since the last switch, and the highest current score
      $scope['team' + j].score++;
      $scope.gameInfo.servesSinceSwitch++;
      $scope.gameInfo.highestScore = Math.max($scope.team1.score, $scope.team2.score);

      // Echo who's in the lead or if it's tied
     

      // Figure out if serves are switching by 5
   

      // Figure out if the game is over and who won
        if ($scope.gameInfo.numberOfPlayers == 4){
             if (($scope.team1.score > $scope.team2.score) && $scope.team1.score <= 20) {
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team1.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player1.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";
      } else if (($scope.team1.score < $scope.team2.score ) && $scope.team2.score <= 20){
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team2.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player2.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";
      } else if (($scope.team1.score == $scope.team2.score) && $scope.team1.score <= 19) {
        $scope.footer.message = "Deuce";
      } else if (($scope.team1.score > $scope.team2.score) && $scope.team1.score >= 21) {
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team1.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player1.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + "\'\s add";
      } else if (($scope.team1.score < $scope.team2.score) && $scope.team2.score >= 21) {
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team2.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player2.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + "\'\s add";
      } else {
        $scope.footer.message = "Deuce";
      }

               if ($scope.gameInfo.servesSinceSwitch == 5 && $scope.gameInfo.scoreSwitchMode == 0) {
        $(".team").toggleClass("team__isServing");
        $scope.team1.serving = !$scope.team1.serving;
        $scope.team2.serving = !$scope.team2.serving;

        if ($scope.gameInfo.numberOfPlayers == 4) {
          if ($scope.team1.serving) {
            $scope.player1.serving = !$scope.player1.serving;
            $scope.player3.serving = !$scope.player3.serving;
          } else {
            $scope.player2.serving = !$scope.player2.serving;
            $scope.player4.serving = !$scope.player4.serving;
          }
        }
        $scope.gameInfo.servesSinceSwitch = 0;

        // Or by 1
      } else if ($scope.gameInfo.scoreSwitchMode == 1) {
        $(".team").toggleClass("team__isServing");
        $scope.team1.serving = !$scope.team1.serving;
        $scope.team2.serving = !$scope.team2.serving;
        if ($scope.gameInfo.numberOfPlayers == 4) {
          if ($scope.team1.serving) {
            $scope.player1.serving = !$scope.player1.serving;
            $scope.player3.serving = !$scope.player3.serving;
          } else {
            $scope.player2.serving = !$scope.player2.serving;
            $scope.player4.serving = !$scope.player4.serving;
          }
        }
      }
      if (Math.abs($scope.team1.score - $scope.team2.score) >= 2 && $scope.gameInfo.highestScore >= 21) {
        $(".scoreBoard").addClass("dimmed");
        $scope.footer.message = "Game over! " + $scope.gameInfo.teamWithHighScore + " wins!";
      }
       
      if ($scope.team1.score == 20 && $scope.team2.score == 20) {
        $scope.gameInfo.scoreSwitchMode = 1;
      }
        }
        else if($scope.gameInfo.numberOfPlayers == 2){
             if (($scope.team1.score > $scope.team2.score) && $scope.team1.score <= 10) {
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team1.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player1.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";
      } else if (($scope.team1.score < $scope.team2.score ) && $scope.team2.score <= 10){
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team2.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player2.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + " is in the lead";
      } else if (($scope.team1.score == $scope.team2.score) && $scope.team1.score <= 9) {
        $scope.footer.message = "Deuce";
      } else if (($scope.team1.score > $scope.team2.score) && $scope.team1.score >= 11) {
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team1.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player1.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + "\'\s add";
      } else if (($scope.team1.score < $scope.team2.score) && $scope.team2.score >= 11) {
        if ($scope.player3.name) {
          $scope.gameInfo.teamWithHighScore = $scope.team2.name;
        } else {
          $scope.gameInfo.teamWithHighScore = $scope.player2.name;
        }
        $scope.footer.message = $scope.gameInfo.teamWithHighScore + "\'\s add";
      } else {
        $scope.footer.message = "Deuce";
      }

               if ($scope.gameInfo.servesSinceSwitch == 2 && $scope.gameInfo.scoreSwitchMode == 0) {
        $(".team").toggleClass("team__isServing");
        $scope.team1.serving = !$scope.team1.serving;
        $scope.team2.serving = !$scope.team2.serving;

        if ($scope.gameInfo.numberOfPlayers == 4) {
          if ($scope.team1.serving) {
            $scope.player1.serving = !$scope.player1.serving;
            $scope.player3.serving = !$scope.player3.serving;
          } else {
            $scope.player2.serving = !$scope.player2.serving;
            $scope.player4.serving = !$scope.player4.serving;
          }
        }
        $scope.gameInfo.servesSinceSwitch = 0;

        // Or by 1
      } else if ($scope.gameInfo.scoreSwitchMode == 1) {
        $(".team").toggleClass("team__isServing");
        $scope.team1.serving = !$scope.team1.serving;
        $scope.team2.serving = !$scope.team2.serving;
        if ($scope.gameInfo.numberOfPlayers == 4) {
          if ($scope.team1.serving) {
            $scope.player1.serving = !$scope.player1.serving;
            $scope.player3.serving = !$scope.player3.serving;
          } else {
            $scope.player2.serving = !$scope.player2.serving;
            $scope.player4.serving = !$scope.player4.serving;
          }
        }
      }
            if (Math.abs($scope.team1.score - $scope.team2.score) >= 2 && $scope.gameInfo.highestScore >= 11) {
        $(".scoreBoard").addClass("dimmed");
        $scope.footer.message = "Game over! " + $scope.gameInfo.teamWithHighScore + " wins!";
      }
        if ($scope.team1.score == 10 && $scope.team2.score == 10) {
        $scope.gameInfo.scoreSwitchMode = 1;
      }
        }
    }
  };

  $scope.delPoint = function (i) {
    //Start the game, give the Serving class to the person who won the rally
      // Increment the player's score, how many serves since the last switch, and the highest current score
      if($scope['team' + i].score>0){
      $scope['team' + i].score--;
      $scope.gameInfo.servesSinceSwitch=$scope.gameInfo.servesSinceSwitch--;
      $scope.gameInfo.highestScore = Math.max($scope.team1.score, $scope.team2.score);
          $scope.gameInfo.servesSinceSwitch-=1;
//$scope.gameInfo.scoreSwitchMode--;
      }
  };

  $scope.footer = {
    message: "Rally for serve" };

}]);
    * {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  font-family: sans-serif;
  background: #FFFFFF;
}

.score {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: fixed;
  height: 90vh;
  width: 100%%;
  z-index: 999;
  color: #FFFFFF;
  font-size: 20vmax;
  pointer-events: none;
}
.score > span {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.scoreBoard {
  flex: 1;
  display: flex;
  justify-content: space-between;
}

.team {
  color: #FFFFFF;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.team.team-1 {
  margin-right: 4px;
}
.team.team-1 .player-right {
  background: #DF5A49;
  margin-top: 2px;
}
.team.team-1 .player-left {
  background: #DF5A49;
}
.team.team-1 .serving__isServing {
  order: 1;
}
.team.team-1 .serving__isNotServing {
  order: -1;
}
.team.team-2 {
  margin-left: 4px;
}
.team.team-2 .player-left {
  background: #0073EC;
  margin-top: 2px;
}
.team.team-2 .player-right {
  background: #0073EC;
}
.team.team-2 .serving__isServing {
  order: -1;
}
.team.team-2 .serving__isNotServing {
  order: 1;
}
.team.team__isServing .serving__isServing {
  color: #FFFFFF;
  animation: serving 1s infinite reverse;
}

.player {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.player input {
  width: 90%%;
  height: 10vh;
  background: #334D5C;
  color: #FFFFFF;
  border: none;
  text-align: center;
  font-size: 8vh;
}
.player.player-alone {
  order: 3;
}

header, input.teamName {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #334D5C;
  color: #BBBBBB;
  max-height: 10vh;
  font-size: 8vh;
  flex: 1;
  border: none;
  text-align: center;
}

@keyframes serving {
  0%% {
    opacity: 1;
  }
  100%% {
    opacity: .5;
  }
}
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  font-size: 5vmin;
  color: #334D5C;
}

footer.menu button {
  background: #334D5C;
  color: #FFFFFF;
  border: none;
  height: 9vh;
  font-size: 7vh;
}
footer.menu button.notSelected {
  color: #909f93;
}

.dimmed {
  opacity: .5;
  pointer-events: none;
}
    @media all and  (min-width:960px) and (max-width: 1440px) {
  .sub1{
      bottom: 52px;
        }
  .sub2{
      bottom: 52px;
        }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body ng-app="scoreKeeper" ng-controller="score">
  
  <div class="screen screen-start" ng-if="!gameInfo.gameStarted">
    <div class="scoreBoard">
      
      <div class="team team-1">
        <input type="text" class="teamName" ng-model="team1.name" ng-if="gameInfo.numberOfPlayers == 4"></input>
        <div class="player player-left">
          <input type="text" ng-model="player1.name"></input>
        </div>
        <div class="player player-right player-serveSpot" ng-if="gameInfo.numberOfPlayers == 4">
          <input type="text" ng-model="player3.name"></input>
        </div>
      </div>
      
      <div class="team team-2">
        <input type="text" class="teamName" ng-model="team2.name" ng-if="gameInfo.numberOfPlayers == 4"></input>
        <div class="player player-right">
          <input type="text" ng-model="player2.name"></input>
        </div>
        <div class="player player-left" ng-if="gameInfo.numberOfPlayers == 4">
          <input type="text" ng-model="player4.name"></input>
        </div>
      </div>
      
    </div>
    <footer class="menu">
        <div style="margin-right:20px">
           
		<button ng-click="serves(2)" ng-class="{'notSelected':gameInfo.numberOfserves == 5}" style="cursor:pointer">2 serves</button>
     
	  
      </div>
<div style="margin-right:20px">
           
		<button ng-click="points(11)" ng-class="{'notSelected':gameInfo.numberOfPoints == 21}" style="cursor:pointer">11 points</button>
     
	  
      </div>

      <div style="margin-right:40px">
           
		<button ng-click="players(2)" ng-class="{'notSelected':gameInfo.numberOfPlayers == 4}" style="cursor:pointer">2</button>
     
	  
      </div>
      <div>
        <button ng-click="startGame()">START</button>
      </div>
        <div style="margin-left:40px">
      <button ng-click="players(4)" ng-class="{'notSelected':gameInfo.numberOfPlayers == 2}" style="cursor:pointer">4</button>
        </div>
                <div style="margin-left:20px">
      <button ng-click="points(21)" ng-class="{'notSelected':gameInfo.numberOfPoints == 11}" style="cursor:pointer">21 points</button>
        </div>
                <div style="margin-left:20px">
      <button ng-click="serves(5)" ng-class="{'notSelected':gameInfo.numberOfserves == 2}" style="cursor:pointer">5 serves</button>
        </div>
    </footer>
  </div>
  
  <div class="score" ng-if="team1.serving || team2.serving">
    <span>{{team1.score}}</span>
    <span>{{team2.score}}</span>
  </div>
  
  <div class="screen screen-game" ng-if="gameInfo.gameStarted">
    <div class="scoreBoard">
      
      <div class="team team-1" ng-click="addPoint(1)" ng-class="{'team__isServing':team1.serving}">
        <header ng-class="{'serving__isServing':player1.serving, 'serving__isNotServing':!player1.serving}">{{player1.name}}</header>
          <div class="player player-left" ng-class="{'player-alone':!player3.name}" style="position:relative">  </div>     
                <div class="player player-right player-serveSpot" ng-if="player3.name"></div>
             <header ng-class="{'serving__isServing':player3.serving, 'serving__isNotServing':!player3.serving}" ng-if="player3.name">{{player3.name}}</header>
        
      </div>
    
      <div class="team team-2" ng-click="addPoint(2)" ng-class="{'team__isServing':team2.serving}">
        <header ng-class="{'serving__isServing':player2.serving, 'serving__isNotServing':!player2.serving}">{{player2.name}}</header>
        <div class="player player-right" ng-class="{'player-alone':!player3.name}"style="position:relative">   
            </div>
        <div class="player player-left" ng-if="player4.name"></div>
        <header ng-class="{'serving__isServing':player4.serving, 'serving__isNotServing':!player4.serving}" ng-if="player4.name">{{player4.name}}</header>
      </div>
      
    </div>
      
      <button  type="button" ng-click="delPoint(1)"  class="sub1" style="position: absolute;left: 10px;font-size: 50px;color: white;font-weight:bolder;    margin: 0px !important;cursor: pointer;background: transparent;border: transparent;">-</button>
      <button  type="button" ng-click="delPoint(2)" class="sub2"style="position: absolute;right: 10px;font-size: 50px;color: white;font-weight:bolder;    margin: 0px !important;cursor: pointer;background: transparent;border: transparent;">-</button>
    <footer>{{footer.message}}</footer>
  </div>
</body>

In einer Zeit der service, der Spieler auf der linken Seite sollte die erste Aufgabe von linken, unteren Viertel auf dem Bildschirm und dann nach einem Torerfolg von beiden Seiten, er/Sie sollte gezeigt werden, um pop-up zu servieren (das ist Ihr name zu blinken) auf der oberen linken Seite. Wann das Tor ist von beiden Seiten, der server sollte wieder gesehen servieren aus dem linken unteren Viertel der Tabelle.

Ich sollte hinzufügen, wenn der service ist auf der rechten Seite, der server startet immer in der oberen rechten, dann bewegt sich auf der unteren rechten, dann wieder auf der oberen rechten wechselnden Positionen auf dem Tisch nach jedem Punkt.

-1
2019-09-17 09:20:39
Quelle
0 Antworten

Sehen Sie sich andere Fragen zu Tags an