QE GroupD P’SSPIM

✨ Ramita Paesathithavorn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Let's play Among Us!!!</title>
</head>
<body>
    <div class="outerdiv">
        <div class="innerbox">
            <div class="databox">
                <div class="topline">
                    <h1>Let's play Among Us!!! <i title="Better with Speaker" id="speaker" class="fa fa-volume-up" aria-hidden="true"></i></h1>
                    <button id="startgame">Tap to start&nbsp;&nbsp; <i class="fa fa-gamepad" aria-hidden="true"></i></button>
                </div>
<div class="credit-buttons">
    <a class="credit-buttons" href="https://codepen.io/rahulsahofficial/pen/ZEpVxqP?editors=0100" data-show-count="false">
Credit</a>
  <br></br>
            </div>
            <div class="gamebox">
                <div class="reactor">
                    <div class="task_comp">
                        <p>กล้ามาก    เก่งมาก ขอบใจ</p>
                    </div>
                    <div class="leftside">
                        <div class="mainpanel">
                            <div class="ledbar">
                                <div class="eachled" id="ol1">
                                </div>
                                <div class="eachled" id="ol2">
                                </div>
                                <div class="eachled" id="ol3">
                                </div>
                                <div class="eachled" id="ol4">
                                </div>
                                <div class="eachled" id="ol5">
                                </div>
                            </div>
                            <div class="obuttonbox">
                                <div class="obuttoneachline">
                                    <div class="obutton" id="ob1"></div>
                                    <div class="obutton" id="ob2"></div>
                                    <div class="obutton" id="ob3"></div>
                                </div>
                                <div class="obuttoneachline">
                                    <div class="obutton" id="ob4"></div>
                                    <div class="obutton" id="ob5"></div>
                                    <div class="obutton" id="ob6"></div>
                                </div>
                                <div class="obuttoneachline">
                                    <div class="obutton" id="ob7"></div>
                                    <div class="obutton" id="ob8"></div>
                                    <div class="obutton" id="ob9"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rightside">
                        <div class="mainpanel">
                            <div class="ledbar">
                                <div class="eachled rled" id="il1">
                                </div>
                                <div class="eachled rled" id="il2">
                                </div>
                                <div class="eachled rled" id="il3">
                                </div>
                                <div class="eachled rled" id="il4">
                                </div>
                                <div class="eachled rled" id="il5">
                                </div>
                            </div>
                            <div class="iobuttonbox">
                                <div class="obuttoneachline">
                                    <div class="ibutton" id="ib1"></div>
                                    <div class="ibutton" id="ib2"></div>
                                    <div class="ibutton" id="ib3"></div>
                                </div>
                                <div class="obuttoneachline">
                                    <div class="ibutton" id="ib4"></div>
                                    <div class="ibutton" id="ib5"></div>
                                    <div class="ibutton" id="ib6"></div>
                                </div>
                                <div class="obuttoneachline">
                                    <div class="ibutton" id="ib7"></div>
                                    <div class="ibutton" id="ib8"></div>
                                    <div class="ibutton" id="ib9"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="links">
        <ul>
            <li><a target="_blank" href="https://github.com/RahulSahOfficial"><i class="fa fa-github" aria-hidden="true"></i></a></li>
            <li><a target="_blank" href="https://www.instagram.com/developer_sah/"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
            <li><a target="_blank" href="https://twitter.com/developer_sah"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
        </ul>
    </div>
    <div class="footer">
        <p>© Copyright <span id="year">2021</span> &nbsp;&nbsp;|&nbsp;&nbsp; Credit By Rahul Sah</p>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

.outerdiv
{
	padding: 1rem;
	margin: 4rem 0;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 0 30px #1f1f1f99;
}
.innerbox
{

}
.innerbox h1
{
	color: #CD558D;
    font-size: 2rem;
    margin-bottom: 0.25rem;
}
.innerbox p
{
	margin-bottom: 1rem;
    color: #CD558D;
    font-size: 1.1rem;
}
.topline
{
	display: flex;
	justify-content: space-between;
}
.topline button
{
	background: #F9AECD;
    color: #CD558D;
    padding: 0.5rem 2rem;
    font-size: 1.1rem;
    outline: 0;
    border: 0;
    border-radius: 2rem;
    cursor: pointer;
}
.gamebox
{
	display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 1rem;
	background-image: url("https://static.vecteezy.com/system/resources/previews/000/278/190/original/galaxy-background-landscape-vector.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.reactor
{
	position: relative;
	display: flex;
	transform: scale(0.7);
}
.task_comp
{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.task_comp p
{
	display: none;
	-webkit-text-stroke: 2px #900A22;
	margin-bottom: 1;
  padding: 59.5px;
    font-size: 4.45rem;
    color: #900A22;
    font-weight: 500;
}
.leftside,.rightside
{
	display: inline-flex;
	margin: 0.2rem;
    border: 5px solid #333333;
}
.mainpanel
{
	background: #F4CBAF;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 25px solid #D99D7D;
    border-top-color: #FBDDCF;
    border-bottom-color: #EDB592;
}
.ledbar
{
	display: flex;
	margin-bottom: 2rem;
}
.eachled
{
	box-shadow: 2px 5px #2d2d2d6e;
    background: #C99789;
    border: 5px solid #5E453C;
    width: 2rem;
    height: 2rem;
    margin: 0.4rem;
    border-radius: 0.7rem;
}
.obuttonbox,.ibuttonbox
{
	display: flex;
    flex-direction: column;
    background: black;
    border: 2px solid #DFA98F;
    border-radius: 0.5rem;
    padding: 0.3rem;
}
.ibuttonbox
{
	background: none;
    border: none;
}
.obuttoneachline
{
	display: flex;
}
.obutton,.ibutton
{
	margin:0.3rem;
	width: 4rem;
    height: 4rem;
    background: black;
    border-radius: 0.9rem;
}
.active
{
	background: #EF8094 ;
}
.correctled
{
	background: #B4CB8F!important;
}
.wrongled
{
	background: #F44336;
}
.ibuttonready
{
	background: #b56a91!important;
    border: 7px solid #e98b93!important;
    border-top-color: #fae0ca!important;
}
.ibuttonpressed
{
	background: #DD6176!important;
    border: 7px solid #EEA358!important;
    border-top-color: #F6DA7D!important;
}
.ibuttonwrong
{
	background: #F44336!important;
    border: 7px solid #F99E83!important;
    border-top-color: #FFF18E!important;
}
.ibutton
{
	background: #b56a91;
    border: 7px solid #e98b93;
    border-top-color: #fae0ca;
    border-radius: 1.25rem;
    box-shadow: 2px 5px 15px #171717bd;
    cursor: pointer;
}
.links
{
	position: fixed;
	bottom: 5rem;
	right: 2rem;
}
.links ul
{
	list-style-type: none;
}
.links ul li a i
{
	font-size: 2rem;
	color: #efefef;
    opacity: 0.8;
	margin: 0.5rem 0;
	transition: 0.3s;
}
.links ul li a i:hover
{
	transform: scale(1.3);
	color: white;
    opacity: 1;
}
.footer
{
	position: fixed;
	bottom: 0;
	width: 100%;
	background: rgba(128, 128, 128, 70%);
    padding: 0.5rem;
	color: black;
	text-align: center;
}
.footer p
{
	font-size: 1.1rem;
	cursor: pointer;
	font-weight: 300;
	margin-bottom: 0;
}
@media only screen and (max-width: 600px){
	.footer p
	{
		font-size: 0.9rem;
	}
	.links {
		display: none;
	}
	.reactor
	{
		display: flex;
    	flex-direction: column;
	}
  .credit-buttons {
  float: left;
  position: relative;
  top: 5px;
  color: red;
}
	.gamebox
	{
		background: pink;
	}
}
</style>

function create_game()//to initilize and create game
{
	level=1
	can_input=false
	delay=0
	isgameover=false
	gen_arr=[]
	input_arr=[]
	wintune.pause()
	$(".eachled").removeClass("correctled wrongled")
	$(".ibutton").removeClass("ibuttonpressed ibuttonready ibuttonwrong")
	$(".task_comp p").css("display","none")
	$(".task_comp p").removeClass("animate__animated animate__fadeInUp")
	$(".reactor").removeClass("animate__animated animate__zoomOut")
	$(".reactor").addClass("animate__animated animate__zoomIn")
	for(i=1;i<=5;i++)
	{
		rand=Math.floor(Math.random()*9)+1;
		gen_arr.push(rand)
	}
	output_signals()//starting game
}

function animate_pressed_button(name)//to animate pressed buttons
{
	$("#"+name).addClass("ibuttonpressed")
	setTimeout(function(){
	$("#"+name).removeClass("ibuttonpressed")
	},200)
}
function animate_sequence_button(id)//to animate left sequence buttons
{
	$(id).addClass("active")
	setTimeout(function(){
	$(id).removeClass("active")
	},150)
}

$(".ibutton").click(function()//when user click buttons
{
	if (can_input)
	{
		buttonid=$(this).attr("id")
		validate_input(buttonid)
	}
})

function validate_input(buttonid)//tovalidate user input
{
	animate_pressed_button(buttonid)
	input_arr.push(parseInt(buttonid.charAt(2)))
	if(input_arr[input_arr.length-1]!=gen_arr[input_arr.length-1])
	{
		isgameover=true
		can_input=false
		gameover()
	}
	if(!isgameover)
	{
		tap.play()
		$("#il"+input_arr.length).addClass("correctled")
	}
	if(input_arr.length==level && !isgameover)
	{
		level+=1
		delay=0
		input_arr=[]
		if(level==6)
			win()
		else
		{
			setTimeout(function()
			{
				can_input=false
				$(".rled").removeClass("correctled")
				$(".ibutton").removeClass("ibuttonready")
				output_signals()
			},800)
		}
	}
}
function output_signals()//to give left sequence output to user
{
	setTimeout(function()
	{
		$("#ol"+level).addClass("correctled")
	},500)
	gen_arr.forEach( function(element, index) {
		if(index<level)
		{
			setTimeout(function(){
				tap.play()
				animate_sequence_button("#ob"+element)
			},delay+=350)
		}
	})
	setTimeout(function(){
		can_input=true
		$(".ibutton").addClass("ibuttonready")
	},delay+=200)
	
}
function gameover()//game over
{
	wrong.play()
	$(".ibutton").removeClass("ibuttonpressed ibuttonready")
	$(".rled").removeClass("correctled")
	$(".ibutton").addClass("ibuttonwrong")
	$(".rled").addClass("wrongled")
	setTimeout(function(){
		$(".ibutton").removeClass("ibuttonwrong")
		$(".rled").removeClass("wrongled")
	},300)
	setTimeout(function(){
		$(".ibutton").addClass("ibuttonwrong")
		$(".rled").addClass("wrongled")
	},600)
	setTimeout(function(){
		create_game()
	},1000)
}

function win()
{
	completed.play()
	$(".task_comp p").css("display","block")
	$(".task_comp p").addClass("animate__animated animate__fadeInUp")
	setTimeout(function(){
		$(".reactor").addClass("animate__animated animate__zoomOut")
		wintune.play()
		clearInterval(playing);
	},1000)
}
function animate_playing()
{
	playing=setInterval(function(){
		$("#speaker").css("visibility","hidden")
		setTimeout(function(){
			$("#speaker").css("visibility","visible")
		},500)
	},1000)
}
$("#startgame").click(function()
{
	create_game()
	animate_playing()
})
</script>