DmitriyPanasenko
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
    <script>


    </script>
</head>

<body>
    <div class="header">Score:<span id="score">0</span></div>
    <div id="buttonStart"><img src="round_button.png">Гасить русню!</div>
    <div class="playing_field" id = "playingField">
        <div class="rectangle">
            <div class="beaverHome">
                <div class="beaver" id="beaver1"></div>
            </div>
        </div>
        <div class="rectangle">
            <div class="beaverHome" >
                <div class="beaver" id="beaver2"></div>
            </div>
        </div>
        <div class="rectangle">
            <div class="beaverHome">
                <div class="beaver"  id="beaver3"></div>
            </div>
        </div>
        <div class="rectangle">
            <div class="beaverHome">
                <div class="beaver" id="beaver4"></div>
            </div>
        </div>
        <div class="rectangle">
            <div class="beaverHome">
                <div class="beaver" id="beaver5"></div>
            </div>
        </div>
    </div>
    <div class="cursor"></div>
</body>
<script>

    let scoreValue = 0
    let TimeVision = 3000

    const cursor = document.querySelector('.cursor')

    
    beaver1.onclick = () => {
        beaver1.style.pointerEvents = "none"
        scoreValue += 10;
        score.innerText = scoreValue;
        beaver1.style.backgroundColor = "red"
        beaver1.style.transform = 'translate(-50% , -50%) rotateX(90deg)'
        cry()
    }
    beaver2.onclick = () => {
        beaver2.style.pointerEvents = "none"
        scoreValue += 10;
        score.innerText = scoreValue
        beaver2.style.backgroundColor = "red"
        beaver2.style.transform = 'translate(-50% , -50%) rotateX(90deg)'
        cry()
    }
    beaver3.onclick = () => {
        beaver3.style.pointerEvents = "none"
        scoreValue += 10;
        score.innerText = scoreValue
        beaver3.style.backgroundColor = "red"
        beaver3.style.transform = 'translate(-50% , -50%) rotateX(90deg)'
        cry()
    }
    beaver4.onclick = () => {
        beaver4.style.pointerEvents = "none"
        scoreValue += 10;
        score.innerText = scoreValue
        beaver4.style.backgroundColor = "red"
        beaver4.style.transform = 'translate(-50% , -50%) rotateX(90deg)'
        cry()
    }
    beaver5.addEventListener('click', () => {
        beaver5.style.pointerEvents = "none"
        scoreValue += 10;
        score.innerText = scoreValue
        beaver5.style.backgroundColor = "red"
        beaver5.style.transform = 'translate(-50% , -50%) rotateX(90deg)'
        cry()
    })

    const playAudio = () =>{
      let myAudio = new Audio;
      myAudio.src = "bam.mp3";
      myAudio.play();

      cursor.style.transition = ".05s"
      cursor.style.width = "150px"
      cursor.style.height = "150px"
      setTimeout(() => {
        cursor.style.transition = ""
        cursor.style.width = "100px"
        cursor.style.height = "100px"
      },200)
   }

   const cry = () =>{
      let audioCry = new Audio;
      audioCry.src = "mujskoy-krik-korotkiy.mp3";
      audioCry.play();
   }

   window.addEventListener('click', playAudio)
   

    let beaverDefaultFunction = () => {
        const arrbeaver = document.querySelectorAll('.beaver')
        for (let elemBeaver of arrbeaver) {
            elemBeaver.style.backgroundColor = "";
            elemBeaver.style.top = "-50%";
            elemBeaver.style.pointerEvents = "auto"
            elemBeaver.style.transform = "translate(-50% , -50%)"
        }
    }

    let beaverUpFunction = () => {


        if (TimeVision > 2000) {
        if (Math.random() > 0.5) beaver1.style.top = "50%"
        if (Math.random() > 0.5) beaver2.style.top = "50%"
        if (Math.random() > 0.5) beaver3.style.top = "50%"
        if (Math.random() > 0.5) beaver4.style.top = "50%"
        if (Math.random() > 0.5) beaver5.style.top = "50%"
        setTimeout(beaverDefaultFunction,TimeVision)
        TimeVision += -200;
        } else {
            clearInterval(interval)
            playingField.style.visibility = 'hidden'
            setTimeout( () => {
                buttonStart.style.display = 'flex'
                TimeVision = 3000
            }, 500)            
            setTimeout( () => {
                buttonStart.style.opacity = '1'
                buttonStart.style.boxShadow = '0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.2), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1)'

            }, 500)
        
        }
    }

    let interval


    window.addEventListener('mousemove', e => {
        cursor.style.top = e.pageY + 'px'
        cursor.style.left = e.pageX + 'px'
    })

    buttonStart.addEventListener('click', () => {
        buttonStart.style.boxShadow = 'inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1)'

        setTimeout( () => {
            buttonStart.style.opacity = '0'
            playingField.style.visibility = 'visible'
        }, 500)
        setTimeout( () => {
            buttonStart.style.display = 'none'
        }, 500)

        setTimeout( () => 0 , 500)
        interval = setInterval(beaverUpFunction, 5000)
    })

</script>

</html>