Scribd Logo
Upload

Welcome to Scribd!

  • Whack A Mole

    Uploaded by

    B.C.H. Reddy
    42 views7 pages
    Whack A Mole project

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Whack A Mole project

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    42 views7 pages

    Whack A Mole

    Uploaded by

    B.C.H. Reddy
    Whack A Mole project

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    HACKATHON PROJECT

    WHACK A MOLE
    IMAGES

    INDEX HTML
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Whack a Mole!</title>
    </head>
    <body>
    <h1>Whack-a-mole!</h1><span class="score">0</span>
    <button onClick="startGame()">Start!</button>
    <div class="game">
    <div class="hole hole1">
    <div class="mole"></div>
    </div>
    <div class="hole hole2">
    <div class="mole"></div>
    </div>
    <div class="hole hole3">
    <div class="mole"></div>
    </div>
    <div class="hole hole4">
    <div class="mole"></div>
    </div>
    <div class="hole hole5">
    <div class="mole"></div>
    </div>
    <div class="hole hole6">
    <div class="mole"></div>
    </div>
    </div>
    <script src="script.js"></script>
    </body>
    </html>

    SCRIPT JS
    const holes = document.querySelectorAll('.hole');
    const scoreBoard = document.querySelector('.score');
    const moles = document.querySelectorAll('.mole');
    let lastHole;
    let timeUp = false;
    let score = 0;

    //create a function to make a random time for mole to pop from the hole
    function randomTime(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }
    function randomHole(holes){
        const index  = Math.floor(Math.random() * holes.length);
        const hole = holes[index];

        //prevent same hole from getting the same number


        if (hole === lastHole){
            return randomHole(holes);
        }
        lastHole = hole;
        return hole;
    }

    function peep() {
        const time = randomTime(500, 1000); //get a random time to determine how
    long mole should peep
        const hole = randomHole(holes); //get the random hole from the randomHole
    function
        hole.classList.add('up'); //add the CSS class so selected mole can "pop
    up"
        setTimeout(() => {
            hole.classList.remove('up'); //make the selected mole "pop down" after
    a random time
            if(!timeUp) {
                peep();
            }
        }, time);
    }

    function startGame() {
        scoreBoard.textContent = 0;
        timeUp = false;
        score = 0;
        peep();
        setTimeout(() => timeUp = true, 15000) //show random moles for 15 seconds
    }

    function wack(e){
        if(!e.isTrusted) return; //** new thing I learned */
        score++;
        this.parentNode.classList.remove('up'); //this refers to item clicked
        scoreBoard.textContent = score;
    }

    moles.forEach(mole => mole.addEventListener('click', wack))


    STYLE CSS
    html {
        font-size: 35px;
        background: #98BCF4;
    }

    body {
        padding: 0;
        margin: 0;
        text-align: center;
    }

    h1 {
        text-align: center;
        font-size: 100px;
        line-height: 1;
        margin-bottom: 0;
    }

    .score {
        background:blue;
        padding: 0 48px;
        line-height: 1;
        border-radius: 16px;
        color: #fff;
        margin-left: 15px;
    }

    .game {
        width: 600px;
        height: 400px;
        display:flex;
        flex-wrap:wrap;
        margin: 0 auto;
       
    }

    .hole{
        flex: 1 0 33.33%;
        overflow: hidden;
        position: relative;
    }

    .hole:after{
        display:block;
        background: url(dirt.jpg) bottom center no-repeat;
        background-size:contain;
        content: '';
        width: 100%;
        height: 90px;
        position: absolute;
        z-index: 2;
        bottom: -30px;
    }

    .mole {
        background: url('mole.jpg') bottom center no-repeat;
        background-size: 80%;
        position: absolute;
        top: 100%;
        width: 100%;
        height: 100%;
        transition: all 0.4s;
    }

    .hole.up .mole{
        top:0;
    }

    button{
        width:175px;
        font-size: 35px;
        height: 70px;
        color: #fff;
        background-color: blue;
        border-radius: 10px;
        margin-left: 20px;
        margin-top: 90px;
    }

    @media (min-width: 667px) and (max-width: 1024px){


       
        h1 {
            display: none;
        }
        .score {
        background:blue;
        padding: 0 12px;
        line-height: 1;
        border-radius: 16px;
        color: #fff;
        font-size: 40px;
        margin-left: 20px;
    }

        .hole.up .mole{
            top:17px;
        }
    }

    @media (max-width: 667px){

        .game {
            width: 667px;
            height: 300px;
            display:flex;
            flex-wrap:wrap;
            margin: 0 auto;
        }

        .score{
            width:35px;
            font-size: 15px;
            height: 40px;
            color: #fff;
            background-color: blue;
            border-radius: 10px;
            margin-left: 10px;
            margin-top: 10px;
            padding: 5px;
            }

            button{
                margin: 10px 10px 10px 10px;
                height: 40px;
                width: 75px;
                font-size: 15px;
            }

        .hole:after{
            display:block;
            background: url(dirt.jpg) bottom center no-repeat;
            background-size:contain;
            content: '';
            max-width: 70%;
            height: 60px;
            position: absolute;
            z-index: 2;
            bottom: -30px;
        }

        .mole {
            background: url('mole.jpg') bottom center no-repeat;
            background-size: 60%;
            position: absolute;
            top: 100%;
            max-width: 70%;
            height: 70%;
            transition: all 0.4s;
        }

        .hole.up .mole{
            top:50px;
        }
    }

    Team Details
    ROLL NO NAMES

    2110030099 Praneetha

    2110030359 Chihnita

    2110030412 Yesashwini

    2110030432 Amar Sai

    2110030444 Dhana Sree

    You might also like