Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Open The Lock #2340

Merged
merged 3 commits into from
Jul 14, 2024
Merged

Add Open The Lock #2340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4fc2286
Add Open The Lock
katarianikita2003 Jul 12, 2024
29a88be
Update index.html
katarianikita2003 Jul 12, 2024
bd1770f
Add manifest.json and Updated README.md
katarianikita2003 Jul 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions Open The Lock/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Open The Lock

## Description
"Open The Lock" is a puzzle game where the objective is to get all the locks in a vertical position. The game points are awarded based on the levels cleared.

## How to Play
1. Click on any lock to toggle its state.
2. Clicking a lock will also toggle every lock in the same row and column.
3. The goal is to get all locks into the vertical position (90 degrees).
4. Click the "Shuffle" button to randomize the board and start a new game.

## Running the Game
1. Clone the repository or download the ZIP file.
2. Open `index.html` in your preferred web browser.
3. Enjoy the game!

## Files Included
- `index.html`: The main HTML file.
- `style.css`: The stylesheet for the game.
- `script.js`: The JavaScript file containing game logic.
- `manifest.json`: The web app manifest file.
- `zepto.min.js`: Zepto.js library.

## Web App Manifest
The game includes a web app manifest (`manifest.json`) to provide metadata about the application. This allows users to install the game to their home screen on mobile devices.

### Icons
Ensure you have the following icons in the root directory:
- `icon-192x192.png`: 192x192 pixels
- `icon-512x512.png`: 512x512 pixels
216 changes: 216 additions & 0 deletions Open The Lock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
<!doctype HTML>
<html>

<head>
<title>Open The Locks</title>
<meta name=author content="Bernhard Hofmann">
<script src="zepto.min.js"></script>
<style>
body {
background: #000;
color: #ff0;
}

#gameboard {
width: 100%;
}

#game {
margin-right: auto;
margin-left: auto;
width: 300px;
text-align: center;
}

h1 {
font-family: Verdana, Tahoma, Sans-Serif;
font-size: 14pt;
font-weight: bold;
text-align: center;
}

.rotate90 {
background-color: #ff0;
-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-transition: all 0.25s ease-in-out;

-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-transform: rotate(90deg);
}

.rotate0 {
background-color: #ff0;
-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-transition: all 0.25s ease-in-out;

-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-transform: rotate(0deg);
}

td {
height: 75px;
width: 75px;
background: #000;
}

.lock {
width: 75px;
height: 20px;
text-align: center;
cursor: pointer;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

<body onload='shuffle();'>
<div style="text-align: center;
margin-top: 30px;
font-size: 30px;
padding: 5px; "><a href=""><i style="color:white;"
class="fas fa-home home-icon"></i></a></div>
<div id="gameboard">
<div id="game">
<h1>Unlock the puzzle!<br />(Get them all vertical)</h1>
<table border="2">
<tr>
<td>
<div id="cell_1_1" class="lock" row="1" col="1"></div>
</td>
<td>
<div id="cell_1_2" class="lock" row="1" col="2"></div>
</td>
<td>
<div id="cell_1_3" class="lock" row="1" col="3"></div>
</td>
<td>
<div id="cell_1_4" class="lock" row="1" col="4"></div>
</td>
</tr>
<tr>
<td>
<div id="cell_2_1" class="lock" row="2" col="1"></div>
</td>
<td>
<div id="cell_2_2" class="lock" row="2" col="2"></div>
</td>
<td>
<div id="cell_2_3" class="lock" row="2" col="3"></div>
</td>
<td>
<div id="cell_2_4" class="lock" row="2" col="4"></div>
</td>
</tr>
<tr>
<td>
<div id="cell_3_1" class="lock" row="3" col="1"></div>
</td>
<td>
<div id="cell_3_2" class="lock" row="3" col="2"></div>
</td>
<td>
<div id="cell_3_3" class="lock" row="3" col="3"></div>
</td>
<td>
<div id="cell_3_4" class="lock" row="3" col="4"></div>
</td>
</tr>
<tr>
<td>
<div id="cell_4_1" class="lock" row="4" col="1"></div>
</td>
<td>
<div id="cell_4_2" class="lock" row="4" col="2"></div>
</td>
<td>
<div id="cell_4_3" class="lock" row="4" col="3"></div>
</td>
<td>
<div id="cell_4_4" class="lock" row="4" col="4"></div>
</td>
</tr>
</table>
<button id="shuffle">Shuffle</button>
</div>
</div>
</body>

</html>
<script>
// Reset all locks
$('.lock').addClass('rotate0');
$('#shuffle').click(function () { shuffle(); });

// Define a function to toggle a lock
function toggle(lock) {
if (lock.hasClass('rotate90')) {
lock.removeClass('rotate90');
lock.addClass('rotate0');
} else {
lock.removeClass('rotate0');
lock.addClass('rotate90');
}
}

function checkIfWon() {
if ($('.rotate0').length == 0) {
$('.lock').css({ 'background-color': '#0f0' });
window.confirm('You did it!');
shuffle();
}
}

// Define click handler
$('.lock').click(function () {
// Identify the row and column
var row = $(this).attr('row');
var col = $(this).attr('col');
// Toggle every cell in the row, and every cell in the column
$('.lock[row="' + row + '"]').each(function () {
toggle($(this));
});
$('.lock[col="' + col + '"]').each(function () {
toggle($(this));
});
// Toggle the cell clicked as well
toggle($(this));

checkIfWon();
});

function shuffle() {
// reset the blocks
$('.lock').css({ 'background-color': '#ff0' });
$('.lock').removeClass('rotate90');
$('.lock').removeClass('rotate0');
$('.lock').addClass('rotate0');

var row, col, cellId, count = 0, $cell;
while (count++ < 6) {
row = random(1, 4);
col = random(1, 4);
cellId = 'cell_' + row + '_' + col;
$cell = $('#' + cellId);

$('.lock[row="' + row + '"]').each(function () {
toggle($(this));
});
$('.lock[col="' + col + '"]').each(function () {
toggle($(this));
});
// Toggle the cell clicked as well
toggle($cell);
}
}
function random(min, max) {
return Math.min(max, Math.floor(Math.random() * (max - min + 1)) + min);
}
</script>
22 changes: 22 additions & 0 deletions Open The Lock/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "Unlock The Lock",
"short_name": "UnlockLock",
"description": "Can you unlock the lock by doing the task? Game points will be awarded on the basis of levels cleared.",
"start_url": "index.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#ff0",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

Loading
Loading