js-practice/rock-paper-scissors.html at main · PATH456/js-practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<head>
  <title>Rock-Paper-Scissors</title>

</head>

<body>
  <h1>
    Rock Paper Scissors
  </h1>

  <button onclick = "
  player+= 'rock';
  computer = pickRandomVariable(computer);
  findTheWinner(player, computer);
  player = '';
  computer = ['rock', 'paper', 'scissors'];
  check = '';"
  >Rock</button>

  <button onclick ="
  player+= 'paper';
  computer = pickRandomVariable(computer);
  findTheWinner(player, computer);
  player = '';
  computer = ['rock', 'paper', 'scissors'];
  check = '';">Paper</button>

  <button onclick = "
  player+= 'scissors';

  computer = pickRandomVariable(computer);
  findTheWinner(player, computer);
  player = '';
  computer = ['rock', 'paper', 'scissors'];
  check = '';"
  >Scissors</button>

  <div id = "announcement">
    <p id = "win-lose"></p>
    <p id = "pick"></p>
    <p id = "score"></p>
  </div>

  <button onclick = "
   resetScore()";
  >Reset Score</button>

<script>
  let player = '';
  let computer = ['rock', 'paper', 'scissors'];
  let check = '';
  let score = JSON.parse(localStorage.getItem('score')) || {
    win: 0,
    lose: 0,
    tie: 0
  }

  function pickRandomVariable(arr) {
    const randomIndex = Math.floor(Math.random() * arr.length);
    return arr[randomIndex];
  }

  function findTheWinner(player, computer) {
    if (player === 'rock') {
      if (computer === 'rock') {
        score.tie++;
        check += 'Tie';
      } else if (computer === 'paper') {
        score.lose++;
        check += 'You lose';
      } else {
        score.win++;
        check += 'You win';
      }
    } else if (player === 'paper') {
      if (computer === 'rock') {
        check+= 'You win';
        score.win++;
      } else if (computer === 'paper') {
        check += 'Tie';
        score.tie++;
      } else {
        check += 'You lose';
        score.lose++;
      }
    } else {
      if (computer === 'rock') {
        check += 'You lose';
        score.lose++;
      } else if (computer === 'paper') {
        check += 'You win';
        score.win++;
      } else {
        check += 'Tie';
        score.tie++;
      }
    }
    const scoreJSON = JSON.stringify(score);
    localStorage.setItem('score', scoreJSON);

    document.querySelector('#win-lose').innerText = `${check}`;
    document.querySelector('#pick').innerText = `You ${player} - ${computer} Computer`;
    document.querySelector('#score').innerText = `Wins: ${score.win}, Loses: ${score.lose}, Tie: ${score.tie}`;


    // alert(`You picked ${player}. Computer picked ${computer}. ${check}\n\nWin: ${score.win},  Lose: ${score.lose},  Tie: ${score.tie}`);
  }
  function resetScore() {
    localStorage.removeItem('score');
    score.win = 0,
    score.lose = 0,
    score.tie = 0
    document.querySelector('#score').innerText = `Wins: ${score.win}, Loses: ${score.lose}, Tie: ${score.tie}`;
  };

</script>

</body>
</html>