Happy family THX (Copy 2183)

✨ ธนเดช แซ่ฉั่ว

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <style>body{
    width:100%;
    height: 100%;
    overflow: hidden;
    z-index: -20;
}
.bg{
    /* display: block; */
    /* margin:auto; */
    width: 100%;
    height: 111%;
    transform: translate(-50%, -50%);
    top: 49.75%;
    left: 50%;
    position:absolute;
    z-index: -10;

}
.nobita1{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 50%;
    position:absolute;
    visibility: visible;
}
.nobita2{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 50%;
    position:absolute;
    visibility: hidden;
}

.jaiko1{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: visible;
}
.jaiko2{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: hidden;
}

.suneo1{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-160%, 20%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: visible;
}
.suneo2{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-160%, 20%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: hidden;
}

.gian1{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: visible;
}
.gian2{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: hidden;
}

.teacher1{
    width:250px;
    height:300px;
    margin: auto;
    transform: translate(-300%, 68%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: visible;
}
.teacher2{
    width:250px;
    height:300px;
    margin: auto;
    transform: translate(-300%, 68%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: hidden;
}

.shizuka1{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: visible;
}
.shizuka2{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: hidden;
}

.deki1{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: visible;
}
.deki2{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: hidden;
}
.none1{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: visible;
}
.none2{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-50%, 100%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: hidden;
}

.pthx{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-250%, 50%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: visible;
    z-index: -5;
}

.pthx2{
    width:250px;
    height: 250px;
    margin: auto;
    transform: translate(-250%, 50%);
    top: 30%;
    left: 70%;
    position:absolute;
    visibility: hidden;
    z-index: -5;
}
</style>
    </head>
    <body>
        <img src="https://cdn.discordapp.com/attachments/806902125610270764/810123840352682034/test.jpg" class="bg">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852084625418/26_20210213153630.PNG" id="act1" class="nobita1" onclick="clickact()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852147146772/26_20210213153626.PNG" id="act2" class="nobita2" onclick="clickact()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act3" class="jaiko1" onclick="clickact2()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act4" class="jaiko2" onclick="clickact2()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810085000137539604/26_20210213162003.PNG" id="act5" class="suneo1" onclick="clickact3()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810085000199405578/26_20210213162010.PNG" id="act6" class="suneo2" onclick="clickact3()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act7" class="gian1" onclick="clickact4()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act8" class="gian2" onclick="clickact4()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810085000288010251/26_20210213164700.PNG" id="act9" class="teacher1" onclick="clickact5()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810084999307067423/26_20210213164407.PNG" id="act10" class="teacher2" onclick="clickact5()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act11" class="shizuka1" onclick="clickact6()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act12" class="shizuka2" onclick="clickact6()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act13" class="deki1" onclick="clickact7()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act14" class="deki2" onclick="clickact7()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act13" class="deki1" onclick="clickact8()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act14" class="deki2" onclick="clickact8()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act15" class="pthx" onclick="clickact9()">
        <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act16" class="pthx2" onclick="clickact9()">
    <script>
    let stateact1 = 1, stateact2 = 0;
    function clickact(){
    if (stateact1 == 1 && stateact2 == 0){
        document.getElementById("act1").style.visibility = 'hidden';
        document.getElementById("act2").style.visibility = 'visible';
    stateact1 --, stateact2 ++;}
    else if (stateact1 == 0 && stateact2 == 1){
        document.getElementById("act1").style.visibility = 'visible';
        document.getElementById("act2").style.visibility = 'hidden';
        stateact1 ++, stateact2 --;
    }
    
}
    let stateact3 = 1, stateact4 = 0;
    function clickact2(){
    if (stateact3 == 1 && stateact4 == 0){
        document.getElementById("act3").style.visibility = 'hidden';
        document.getElementById("act4").style.visibility = 'visible';
    stateact3 --, stateact4 ++;}
    else if (stateact3 == 0 && stateact4 == 1){
        document.getElementById("act3").style.visibility = 'visible';
        document.getElementById("act4").style.visibility = 'hidden';
        stateact3 ++, stateact4 --;
    }
    
}