LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  

Score: {{score}}

CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat);
body{
  background-color: #362023;
  font-family: 'Montserrat';
  color: white;
}
.center-circle{
  margin-top: 10vh;
  width:320px;
  height: 320px;
  //background-color: #1C2321;
}
.slice{
  width: 150px;
  height:150px;
  display: inline-block;
  margin: 0px;
}
#r{
  background-color: #881600;
  border-top-left-radius: 100%;
  border: 10px #1C2321 solid;
  margin: -5px;

}
#b{
  background-color: #003984;
  border-top-right-radius: 100%;
  border: 10px #1C2321 solid;
  margin: -5px;
 }
#y{
  background-color: #D78521;
  border-bottom-left-radius: 100%;
  border: 10px #1C2321 solid;
  margin: -5px;
}
#g{
  background-color: #1B512D;
  border-bottom-right-radius: 100%;
  border: 10px #1C2321 solid;
  margin: -5px;
}
.btn{
  background-color: #427196;
  color: white;
}
.btn:hover{
  color:white;
}
JS
var app = angular.module('app',[]);
app.controller ('myController', function($scope){
  var strict = false;
  var myMoves = [];
  var enemyMoves = [];
  var i = 0;
  $scope.score = 0;
  function check(){
    if (myMoves[i] === enemyMoves[i]){
      i++;
      if (i === enemyMoves.length)
        win();
    }
    else{
      lose();
    }
  }
  enemyTurn = function(){
    enemyMoves.push(Math.floor(Math.random()*4)+1);
    paint(0);
    console.log(enemyMoves);
  };
  function reset(){
    myMoves = [];
    enemyMoves = [];
    i = 0;
    $scope.score = 0;
  }
  function win(){
    if (i === 20){
      alert("YOU WON!");
      reset();
    }
    else{
      myMoves = [];
      score++;
      $scope.score ++;
      i = 0;
      enemyTurn();
    }
  }
  function lose(){

    if (strict === true){
      alert("You lost");
      reset();
    }
    else{
      alert("TRY AGAIN!");
      myMoves = [];
      console.log("my moves"+ myMoves);
      i = 0;
      paint(0);
    }
  }
  function paint(k){
    setTimeout(function(){
      playButton(enemyMoves[k]);
      k++;
      if (k < enemyMoves.length)
        paint(k);
    }, 900);
  }
  function playButton(nr){
    //case 1 2 3 4
    switch (nr) {
      case 1:
        $("#r").css("background-color", "red");
        document.getElementById("rs").play();
        setTimeout(function(){
          $("#r").css("background-color", "#881600");
        }, 500);
        break;
      case 2:
        $("#b").css("background-color", "blue");
        document.getElementById("bs").play();
        setTimeout(function(){
          $("#b").css("background-color", "#003984");
        }, 500);
        break;
      case 3:
        $("#y").css("background-color", "yellow");
        document.getElementById("ys").play();
        setTimeout(function(){
          $("#y").css("background-color", "#D78521");
        }, 500);
        break;
      case 4:
        $("#g").css("background-color", "green");
        document.getElementById("gs").play();
        setTimeout(function(){
          $("#g").css("background-color", "#1B512D");
        }, 500);
        break;

      default:
        break;
    }
  }
  $scope.playRed = function(){
    myMoves.push(1);
    playButton(1);
    check();
  };
  $scope.playBlue = function(){
    myMoves.push(2);
    playButton(2);
    check();
  };
  $scope.playYellow = function(){
    myMoves.push(3);
    playButton(3);
    check();
  };
  $scope.playGreen = function(){
    myMoves.push(4);
    playButton(4);
    check();
  };
  $scope.start = function(){
    reset();
    score = 0;
    enemyTurn();
  }
  $scope.toggleStrict = function(){
    strict = !strict;
    if (strict === true){
      $("#strict").css("background-color", "#880D1E");
    }
    else{
      $("#strict").css("background-color", "#427196");

    }
  }

});
Term
Sat, 01/13/2018 - 07:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv