RockPaperSciccor/app.js at master · Hamad-canCode/RockPaperSciccor · 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
const computerChoiceDisplay=document.getElementById('computer-choice')
const userChoiceDisplay=document.getElementById('user-choice')
const resultDisplay=document.getElementById('result')
const next=document.getElementById('next')
const Score=document.getElementById('score')
const compScore=document.getElementById('compscore')
const finalResult=document.getElementById('final')


let userImg=document.getElementById('userImg')
let compImg=document.getElementById('compImg')
const item = ["rock", "paper", "scissors"];
let userChoice
let compChoice
let result
let game = true
let score=0
let compscore=0;
let round=1


const possibleChoice=document.querySelectorAll('.button')

// Selecting Option (rock or paper or scissors)
possibleChoice.forEach(possiblechoice => possiblechoice.addEventListener('click',(e)=>{
    userChoice=e.target.id

    userChoiceDisplay.innerText=userChoice
    userImg.src='img/'+userChoice+'.png';
    game=false
    computerChoice()
    getResult()
    possibleChoice.forEach(possiblechoice => possiblechoice.disabled = true)
}))

// Next Button
next.addEventListener('click',()=>{
    if(round===10){
        if(score>compscore){
            finalResult.innerHTML='YOU WON 🥳!!!'
        }
        if(score<compscore){
            finalResult.innerHTML='YOU LOST 😥!!!'
        }
        else{
            finalResult.innerHTML='ITS A DRAW 🤔!!!'
        }
        score=0
        compscore=0
        round=0

    }
    else{
        userImg.src='';
        game=true
        possibleChoice.forEach(possiblechoice => possiblechoice.disabled = false)
        resultDisplay.innerHTML=''
        Score.innerHTML=score
        compScore.innerHTML=compscore
        finalResult.innerHTML=round
        round++
    }
})

function computerChoice(){
    const rand=Math.floor(Math.random()*3) +1     //Random Number generatd from 1 2 3

    if(rand===1){
        compChoice='rock'
    }
    if(rand===2){
        compChoice='scissors'
    }
    if(rand===3){
        compChoice='paper'
    }
    compImg.src='img/comp'+compChoice+'.png'
    computerChoiceDisplay.innerText=compChoice
}


function getResult(){
    if(compChoice===userChoice){
        result="Draw"
    }
    if((compChoice==='rock'&&userChoice==='scissors')||(compChoice==='scissors'&&userChoice==='paper')||compChoice==='paper'&&userChoice==='rock'){
        result="Lose"
        compscore++
        console.log(score+' comp score: '+compscore)
    }
    if((compChoice==='rock'&&userChoice==='paper')||(compChoice==='scissors'&&userChoice==='rock')||compChoice==='paper'&&userChoice==='scissor'){
        result="Win"
        score++
    }
    resultDisplay.innerHTML=result
    // console.log('User Choice= ',userChoice)
    // console.log('Computer Choice= ',compChoice)
    // console.log(result)
}
let count=0
function start(delay) {

    setInterval(()=> {
      if(game){
        compImg.src='img/comp'+item[count]+'.png'
        count++
        if(count===3){
          count=0
        }
      }
    }, delay)

  }


start(200)