How To Make The Glass Bridge Game From Squid Game In Javascript Using VS Code
In this JavaScript Tutorial we will see How to Make The Glass Stepping Stones Game or the glass bridge game From Squid Game In JavaScript and Visual Studio Code .
The Game Rules:
the player have to hop across a bridge of glasses with some glasses that breack easily.
Project Source Code:
<!DOCTYPE HTML>
<head>
<style>
.container{display: flex; flex-direction: row; flex-wrap: wrap;
justify-content: center; align-items: center}
.content, .start, .finish, .pic, .panels, .top, .bottom{
border: 1px solid lightslategray; box-sizing: border-box}
.start, .finish{width:120px; height: 220px; margin: 5px;
display: flex; flex-direction: row;
flex-wrap: wrap; justify-content: center; align-items: center}
.start, .finish, .panels{float: left;}
.panels{width: 850px; height: 220px; margin: 5px}
.top, .bottom{height: 110px; background-color: #2E2C28;display: flex;
flex-direction: row;
flex-wrap: wrap; justify-content: center; align-items: center}
.glass{width: 110px;height: 100px;border: 1px solid #fff;
background-color: #FFDF2B;
margin: 2px; background-size: 100% 100%;}
.glass:hover{background-color: darkgoldenrod}
#pic-start, #pic-finish{background-color: #FFDF2B; width: 100px; height: 100px;
background-size: 100% 100%;}
#pic-start{background-image: url('C://Users//1BestCsharp//Downloads//steps.png')}
#play-again{color: #fff; background-color: green; width:100%;
padding: 20px; border: 1px solid #fff}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="start">
<div class="pic" id="pic-start">
</div>
</div>
<div class="panels">
<div class="top">
<button onclick="stepInThis(this)" class="glass g1"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g1"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g1"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g1"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g1"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g1"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g1"
disabled="disabled"></button>
</div>
<div class="bottom">
<button onclick="stepInThis(this)" class="glass g2"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g2"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g2"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g2"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g2"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g2"
disabled="disabled"></button>
<button onclick="stepInThis(this)" class="glass g2"
disabled="disabled"></button>
</div>
</div>
<div class="finish">
<div class="pic" id="pic-finish">
</div>
</div>
<div>
<button id="play-again" onclick="playagain()">Play Again</button>
</div>
</div>
</div>
<script>
glasses = document.getElementsByClassName('glass');
g1 = document.getElementsByClassName('g1');
g2 = document.getElementsByClassName('g2');
div_finish = document.getElementById('pic-finish');
step = "C://Users//1BestCsharp//Downloads//steps.png";
nostep = "C://Users//1BestCsharp//Downloads//nostep.png";
list = [step, nostep];
imagesOrder = [[]];
counter = 0;
won = true;
index = 0;
// create a function to enable buttons
function enableButton()
{
if(counter <= g1.length - 1)
{
g1[counter].disabled = false;
g2[counter].disabled = false;
}
}
// create a function to populate imagesOrder with random images
function getRandomImages()
{
for(let i = 0; i < g1.length; i++)
{
imagesOrder[i] = [];
// get random image
random_image = list[Math.floor(Math.random()*list.length)];
if(random_image == step)
{
imagesOrder[i][0] = random_image;
imagesOrder[i][1] = nostep;
}
else
{
imagesOrder[i][0] = random_image;
imagesOrder[i][1] = step;
}
console.log(imagesOrder[i][1]);
console.log(imagesOrder[i][0]);
console.log("-------------------");
}
}
function stepInThis(pic)
{
if(pic.classList.contains('g1'))
{
if(pic.disabled == false)
{
if(imagesOrder[counter][0] == nostep)
{
won = false;
}
if(counter == imagesOrder.length-1 && won == true)
{
div_finish.setAttribute("style",
"background-image: url('"+imagesOrder[counter][0]+"');");
alert("You've Won");
}
else if(won == false)
{
alert("You've Lost");
}
pic.setAttribute("style",
"background-image: url('"+imagesOrder[counter][0]+"');");
pic.disabled = true;
g2[counter].disabled = true;
counter++;
enableButton();
}
}
else if(pic.classList.contains('g2'))
{
if(pic.disabled == false)
{
if(imagesOrder[counter][1] == nostep)
{
won = false;
}
if(counter == imagesOrder.length-1 && won == true)
{
div_finish.setAttribute("style",
"background-image: url('"+imagesOrder[counter][1]+"');");
alert("You've Won");
}
else if(won == false)
{
alert("You've Lost");
}
pic.setAttribute("style",
"background-image: url('"+imagesOrder[counter][1]+"');");
pic.disabled = true;
g1[counter].disabled = true;
counter++;
enableButton();
}
}
}
// create a function to play again
function playagain()
{
won = true;
for(let i = 0; i < g1.length; i++)
{
g1[i].setAttribute("style","background-image: url();");
g2[i].setAttribute("style","background-image: url();");
g1[i].disabled = true;
g2[i].disabled = true;
}
counter = 0;
enableButton();
getRandomImages();
}
getRandomImages();
enableButton();
</script>
</body>
</html>
////// OUTPUT :
