Skip to content

Commit

Permalink
Merge pull request #190 from samriddhitiwary/feature/LightsOut
Browse files Browse the repository at this point in the history 
Chaos Game
  • Loading branch information
@vansh-codes
vansh-codes authored Oct 29, 2024
2 parents 3a54c25 + b3a2d05 commit 5816bab
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 0 deletions.
210 changes: 210 additions & 0 deletions LightsOut.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lights Out Game</title>
<style>
body {
background-color: #1a1a1a;
color: white;
font-family: Arial, sans-serif;
overflow: hidden; /* Prevent scrolling */
}

.title {
font-size: 5rem;
text-align: center;
background: linear-gradient(to right, #03cc65, #00ff99);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 10px #03cc65, 0 0 20px #03cc65;
margin: 20px 0;
padding: 20px;
position: absolute; /* Absolute positioning for random movement */
top: 50%; /* Center the title vertically */
left: 50%; /* Center the title horizontally */
transform: translate(-50%, -50%); /* Adjust for width and height */
transition: transform 0.2s; /* Smooth transition for movement */
}

.turn-indicator {
text-align: center;
font-size: 3rem;
margin: 20px 0;
position: absolute;
top: 60%; /* Position below the title */
left: 50%; /* Center the heading */
transform: translate(-50%, -50%); /* Adjust for width and height */
transition: transform 0.2s; /* Smooth transition for movement */
}

.win-message {
text-align: center;
font-size: 3rem;
color: #03cc65;
text-shadow: 0 0 10px #03cc65, 0 0 20px #03cc65;
position: absolute;
top: 70%; /* Position below the turn indicator */
left: 50%; /* Center the win message */
transform: translate(-50%, -50%); /* Adjust for width and height */
transition: transform 0.2s; /* Smooth transition for movement */
}

.lightsout-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
position: relative; /* Relative positioning for absolute elements */
}

.board {
display: grid;
grid-gap: 5px;
margin: 0 auto;
}

.cell {
width: 60px;
height: 60px;
border-radius: 10px;
background-color: black;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s; /* Smooth transition for background color and movement */
}

.cell.on {
background-color: #39ff14;
border: 2px solid black;
box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
}

.cell.off {
background-color: black;
border: 2px solid #041301;
box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
}

.move {
position: relative;
animation: moveCell 0.1s ease-in-out infinite alternate;
}

@keyframes moveCell {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(5px, 5px); /* Adjust for a small movement */
}
}
</style>
</head>
<body>
<div class="lightsout-container">
<h1 class="title">Lights Out</h1>
<h2 class="turn-indicator">Welcome to chaos Web</h2>
<div class="board"></div>
<h2 class="win-message"></h2>
</div>
<script>
const sizes = [5, 7, 9];
let currentSizeIndex = 0;
const toggleProbability = 0.5;
let grid = createGrid(sizes[currentSizeIndex]);

function createGrid(size) {
let grid = [];
for (let i = 0; i < size; i++) {
let row = [];
for (let j = 0; j < size; j++) {
row.push(Math.random() < 0.5);
}
grid.push(row);
}
return grid;
}

function toggleRandomCells(grid, row, col) {
grid[row][col] = !grid[row][col];
const totalCells = grid.length * grid[0].length;
const cellsToToggle = Math.floor(totalCells * toggleProbability);
for (let i = 0; i < cellsToToggle; i++) {
const randomRow = Math.floor(Math.random() * grid.length);
const randomCol = Math.floor(Math.random() * grid[0].length);
grid[randomRow][randomCol] = !grid[randomRow][randomCol];
}
return grid;
}

function isWin(grid) {
return grid.every(row => row.every(cell => !cell));
}

function renderGrid(grid) {
const board = document.querySelector('.board');
board.innerHTML = '';
board.style.gridTemplateColumns = `repeat(${grid[0].length}, 60px)`;
grid.forEach((row, rowIndex) => {
row.forEach((cell, colIndex) => {
const cellDiv = document.createElement('div');
cellDiv.className = `cell ${cell ? 'on' : 'off'} ${Math.random() < 0.5 ? 'move' : ''}`;
cellDiv.onclick = () => handleCellClick(rowIndex, colIndex);
board.appendChild(cellDiv);
});
});
}

function handleCellClick(row, col) {
grid = toggleRandomCells(grid, row, col);
renderGrid(grid);
updateWinMessage();
shuffleGrid();
changeGridSize();
}

function updateWinMessage() {
const winMessage = document.querySelector('.win-message');
if (isWin(grid)) {
winMessage.textContent = "Game Won!";
} else {
winMessage.textContent = "";
}
}

function shuffleGrid() {
grid = createGrid(sizes[currentSizeIndex]);
renderGrid(grid);
}

function changeGridSize() {
currentSizeIndex = (currentSizeIndex + 1) % sizes.length;
grid = createGrid(sizes[currentSizeIndex]);
renderGrid(grid);
}

function moveTitleAndIndicator() {
const title = document.querySelector('.title');
const indicator = document.querySelector('.turn-indicator');

const randomX = Math.random() * (window.innerWidth - 300); // 300 to prevent overflow
const randomY = Math.random() * (window.innerHeight - 100); // 100 to prevent overflow

title.style.left = `${randomX}px`;
title.style.top = `${randomY}px`;

const randomXIndicator = Math.random() * (window.innerWidth - 300);
const randomYIndicator = Math.random() * (window.innerHeight - 100);

indicator.style.left = `${randomXIndicator}px`;
indicator.style.top = `${randomYIndicator}px`;
}

renderGrid(grid);
setInterval(shuffleGrid, 2000); // Shuffle every 2 seconds
setInterval(moveTitleAndIndicator, 100); // Move title and indicator every 100 ms
</script>
</body>
</html>
Loading

0 comments on commit 5816bab

Please sign in to comment.