Skip to content

Instantly share code, notes, and snippets.

@alfaben12

alfaben12/among-us-unlock-manifolds-game.markdown

Created November 17, 2024 11:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alfaben12/56ce824accc01b869a23a3529b076154 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alfaben12/56ce824accc01b869a23a3529b076154 to your computer and use it in GitHub Desktop.
Download ZIP
Among Us | Unlock Manifolds Game
Raw
among-us-unlock-manifolds-game.markdown

Among Us | Unlock Manifolds Game

I like the game Among Us . I tried to make one of its game called Unlock Manifolds with javscript and jquery Just tap on the keys in ascending order to win the game tap as fast as possible If you won all tiles will be green and new game will start in 4sec Go Play and Enjoy!!

A Pen by Rahul Sah on CodePen.

License.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<title>Among Us | Unlock Manifolds</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="outerdiv">
<div class="datadiv">
<div class="imgbox">
<img src="https://wonder-day.com/wp-content/uploads/2020/10/wonder-day-among-us-21.png" >
</div>
<div class="textbox">
<h2>Among US | Unlock Manifolds</h2>
<p>This task is completed by clicking/pressing the numbers in ascending order (1, 2, 3, 4, 5, 6, 7, 8, 9, 10). If you click the incorrect number, the keypad will flash red, and you will need to restart the sequence. If you leave the keypad, the position will randomize again.</p>
</div>
</div>
<div class="innerdiv">
<div class="gamebox">
<div class="task_comp">
<p >Task Completed!</p>
</div>
<div class="eachline">
<div class="eachbox">
<p>7</p>
</div>
<div class="eachbox">
<p>9</p>
</div>
<div class="eachbox">
<p>3</p>
</div>
<div class="eachbox" >
<p>8</p>
</div>
<div class="eachbox">
<p>1</p>
</div>
</div>
<div class="eachline">
<div class="eachbox">
<p>4</p>
</div>
<div class="eachbox">
<p>5</p>
</div>
<div class="eachbox">
<p>2</p>
</div>
<div class="eachbox">
<p>10</p>
</div>
<div class="eachbox">
<p>5</p>
</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; Created By Rahul Sah 🇮🇳</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var gen_arr=[]
var should_press=1
// Making random array
function create_game()
{
gen_arr=[]
while(gen_arr.length!=10)
{
rand=Math.floor(Math.random()*10)+1;
if(!gen_arr.includes(rand))
gen_arr.push(rand)
}
$(".eachbox p").each(function(index,eachbox_p)
{
$(eachbox_p).text(gen_arr[index])
$(eachbox_p).attr("onclick","pressed(this,"+gen_arr[index]+")")
})
}
function pressed(obj,number)
{
if(number==should_press)
{
should_press=should_press+1
$(obj).addClass("correct")
if(should_press==11)
win()
}
else
{
gameover()
}
}
function gameover()
{
function animate_gameover(){
$(".eachbox p").each(function(index,eachbox_p)
{
$(eachbox_p).removeClass("correct")
$(eachbox_p).addClass("wrong")
})
setTimeout(function(){
$(".eachbox p").each(function(index,eachbox_p)
{
$(eachbox_p).removeClass("correct")
$(eachbox_p).removeClass("wrong")
})
},300)
}
animate_gameover()
setTimeout(function(){
animate_gameover()
},500)
should_press=1
}
function win()
{
$(".task_comp p").css("display","block")
$(".task_comp p").addClass("animate__animated animate__fadeInUp")
setTimeout(function(){
restart()
},4000)
}
function restart()
{
should_press=1
$(".task_comp p").css("display","none")
$(".task_comp p").removeClass("animate__animated animate__fadeInUp")
$(".eachbox p").each(function(index,eachbox_p)
{
$(eachbox_p).removeClass("correct")
$(eachbox_p).removeClass("wrong")
})
create_game()
}
create_game()
Raw
style.css
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body,input,button,select,textarea{
font:400 1rem Roboto;
color: #222222;
}
a{
text-decoration: none;
}
a:link,a:active,a:visited{
color:#6A26CD;
}
a:hover{
color:#431488;
}
ul,ol{
margin: 0 0 1rem;
padding: 0 0 0 1rem;
}
table{
border-collapse: collapse;
}
th{
text-align:left;
}
td{
vertical-align: middle;
}
body
{
width: 100%;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
/*background-image: linear-gradient(45deg, #2196F3, #3F51B5);*/
display: flex;
justify-content: center;
align-items: center;
background-color: #2196F3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23ffffff' fill-opacity='0.25' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
}
.outerdiv
{
padding: 1rem;
margin: 4rem 0;
background: white;
border-radius: 1rem;
box-shadow: 0 0 30px #1f1f1f99;
}
.datadiv
{
display: flex;
}
.imgbox img
{
width: 10rem;
}
.textbox h2
{
font-size: 1.5rem;
color: #F44336;
}
.textbox p
{
width: 21rem;
font-size: 0.9rem;
color: #9E9E9E;
margin: 0.5rem 0;
}
.innerdiv
{
background: #ACABAB;
border: 10px solid #767276;
padding: 1rem;
border-radius: 1rem;
}
.eachline
{
display: flex;
}
.gamebox
{
position: relative;
display: flex;
flex-direction: column;
padding: 0.5rem;
background: #0F3FB4;
border: 4px solid #656769;
border-radius: 0.4rem;
}
.eachbox
{
font-family: 'Kalam', cursive!important;
width: 5rem;
height: 5rem;
margin: 0.2rem;
color: #122253;
font-size: 3rem;
font-weight: 700;
}
.eachbox p
{
width: 100%;
height: 100%;
background: #8E9FCB;
border-radius: 0.5rem;
text-align: center;
padding: 0.5rem;
user-select: none;
cursor: pointer;
}
.correct{
background:#32cd32!important;
}
.wrong
{
background: #F44336!important;
}
.task_comp
{
position: absolute;
top: 50%;
left: 50%;
font-size: 2rem;
transform: translate(-50%,-50%);
white-space: nowrap;
color: white;
font-weight: 500;
letter-spacing: 2px;
}
.task_comp p
{
display: none;
}
.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: #000000db;
padding: 0.5rem;
color: white;
text-align: center;
}
.footer p
{
font-size: 1.1rem;
cursor: pointer;
font-weight: 300;
margin-bottom: 0;
}
@media only screen and (max-width: 600px){
.eachline
{
flex-direction: column;
}
.gamebox
{
flex-direction: row;
}
.datadiv
{
display: none;
}
.footer p
{
font-size: 0.9rem;
}
.links {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment