From 1a7eb0868ee7455865dc28bf40af92d8ff5b3874 Mon Sep 17 00:00:00 2001
From: Akshit Bansal <155195875+akshitbansal2005@users.noreply.github.com>
Date: Tue, 29 Oct 2024 21:26:56 +0530
Subject: [PATCH 1/3] Update emojiland.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Strengths
- **Clear Structure**: The HTML and CSS are well-organized, making the code readable and maintainable.
- **Interactive Features**: Emojis are generated at random positions, and audio plays on hover, enhancing user engagement.
- **Dynamic Animation**: The welcome message animates character-by-character, creating an appealing introduction.
- **Memory Management**: The use of timeouts helps prevent memory leaks by clearing out emojis after a set duration.

### Areas for Improvement
1. **Audio Preloading**: Currently, audio files aren’t preloaded, which could cause delays in playback.
2. **Accessibility**: The implementation lacks ARIA roles and labels, which would improve accessibility for screen readers.
3. **Mobile Responsiveness**: The hover effects may not work well on touch devices; adapting interactions for mobile users could enhance usability.
4. **Configuration Management**: Hardcoding emojis and audio could be improved by using a configuration object or JSON for easier updates.
---
 emojiland.html | 68 +++++++++++++-------------------------------------
 1 file changed, 17 insertions(+), 51 deletions(-)

diff --git a/emojiland.html b/emojiland.html
index aec5a3d..d5731a9 100644
--- a/emojiland.html
+++ b/emojiland.html
@@ -18,12 +18,6 @@
             position: relative;
         }
 
-        canvas {
-            display: block;
-            width: 100%;
-            height: 100%;
-        }
-
         .emoji {
             position: absolute;
             font-size: 30px;
@@ -35,12 +29,6 @@
             transform: scale(5) !important;
         }
 
-        @keyframes randomChangeSize {
-            0% { font-size: 20px; }
-            50% { font-size: 70px; }
-            100% { font-size: 20px; }
-        }
-
         @keyframes glitchBackground {
             0% { background-color: black; }
             33% { background-color: lightgrey; }
@@ -82,11 +70,6 @@
             100% { transform: rotate(0deg) scale(1); opacity: 1; }
         }
 
-        @keyframes alignText {
-            0% { transform: translateY(50px); opacity: 0; }
-            100% { transform: translateY(0); opacity: 1; }
-        }
-
         .char {
             opacity: 0;
             animation: charEnter 2s ease forwards;
@@ -94,7 +77,7 @@
         }
 
         .char.show {
-            animation: charEnter 2s ease forwards, alignText 1s ease-in-out 1.5s forwards;
+            animation: charEnter 2s ease forwards;
         }   
     </style>
 </head>
@@ -125,9 +108,7 @@
         </span>
     </div>
 
-    <section id="emoji-land">
-        <canvas id="emojiCanvas"></canvas>
-    </section>
+    <section id="emoji-land"></section>
 
     <!-- Audio files -->
     <audio id="dramaticSound" src="sfx/Emoji-Land/drammatic-cinematic-glitch.mp3"></audio>
@@ -138,14 +119,9 @@
     <audio id="digitalChaos" src="sfx/Emoji-Land/digital-chaos.mp3"></audio>
 
     <script>
-        const canvas = document.getElementById('emojiCanvas');
-        const ctx = canvas.getContext('2d');
-
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-
+        const emojiLand = document.getElementById('emoji-land');
         const emojis = ['😎', '🤯', '😱', '👻', '🤖', '👽', '💀', '😵‍💫', '😈', '🤡', '🔥', '🌪️', '💥', 
-        '🎃', '💣', '⚡', '🤪', '😜', '🌀', '👾', '😬', '🤢', '😠', '🛸', '🐉', '👺', '🥴', '🫨'];
+            '🎃', '💣', '⚡', '🤪', '😜', '🌀', '👾', '😬', '🤢', '😠', '🛸', '🐉', '👺', '🥴', '🫨'];
 
         const audioFiles = {
             '😎': 'introMusic',
@@ -188,10 +164,6 @@
             return emojis[Math.floor(Math.random() * emojis.length)];
         }
 
-        function randomDuration() {
-            return (Math.random() * 3) + 1; 
-        }
-
         function createEmoji() {
             const emojiDiv = document.createElement('div');
             const emoji = randomEmoji();
@@ -200,27 +172,21 @@
             emojiDiv.style.left = `${randomPosition(window.innerWidth)}px`;
             emojiDiv.style.top = `${randomPosition(window.innerHeight)}px`;
             emojiDiv.style.fontSize = '20px'; // Initial size
-            emojiDiv.style.animation = `randomChangeSize ${randomDuration()}s infinite ease-in-out`; // Each emoji animates differently
 
+            // Play audio on hover
             const audioId = audioFiles[emoji];
             const audio = document.getElementById(audioId);
+            emojiDiv.onmouseenter = () => audio && audio.play();
+            emojiDiv.onmouseleave = () => audio && audio.pause();
 
-            emojiDiv.onmouseover = () => {
-                if (audio) {
-                    audio.currentTime = 0; 
-                    audio.play();
-                }
-            };
-
-            emojiDiv.onmouseout = () => {
-                if (audio) {
-                    audio.pause(); 
-                    audio.currentTime = 0; 
-                }
-            };
-
-            document.body.appendChild(emojiDiv);
+            emojiLand.appendChild(emojiDiv);
             emojiElements.push(emojiDiv);
+
+            // Remove emoji after a while to prevent memory leaks
+            setTimeout(() => {
+                emojiDiv.remove();
+                emojiElements = emojiElements.filter(el => el !== emojiDiv);
+            }, 5000); // Remove emoji after 5 seconds
         }
 
         function populateEmojiLand() {
@@ -251,9 +217,9 @@
         }, 4000); 
 
         window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
+            emojiLand.innerHTML = ''; // Clear emojis on resize to prevent layout issues
+            populateEmojiLand(); // Re-populate emojis after resize
         });
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>

From 307d0519051ead6cae58d3a6cccbc3ca7437ce22 Mon Sep 17 00:00:00 2001
From: Akshit Bansal <155195875+akshitbansal2005@users.noreply.github.com>
Date: Sun, 3 Nov 2024 01:47:09 +0530
Subject: [PATCH 2/3] Update maze.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. **Purpose**:
   This HTML and JavaScript code creates a fun, interactive maze game with a twist. As you scroll down the page, a hidden maze game section appears. In this game, players navigate a maze with reversed controls (up is down, left is right, etc.).

2. **HTML Layout**:
   - The structure has a welcoming message at the top, a hidden section for the maze game, and a hint below that explains the reversed controls.
   - The actual maze is drawn on a canvas element, making it easy to render the grid and update visuals for player movement.

3. **CSS Styling**:
   - Basic styling for a clean, centered layout with responsive font sizes and a blinking effect for the hint. The canvas has a solid border to frame the maze.
   - There’s a “Restart” button that appears only after the player completes the maze, making it easy to play again.

4. **JavaScript Functionality**:
   - **Scroll Event**: The maze section stays hidden until it’s scrolled into view. When this happens, the game initializes and becomes playable.
   - **Maze Creation**: A 10x10 grid is randomly generated, with each cell either being a wall or an open path. The start and end points are always open.
   - **Drawing the Maze**: The grid is rendered on the canvas, with different colors for walls, open paths, and the player.
   - **Reverse Controls**: Movement is intentionally reversed to add a challenge:
     - Arrow up makes the player move down, arrow left moves them right, etc.
   - **Winning**: When the player reaches the bottom-right corner, a congratulatory alert pops up, and the “Restart” button becomes visible for another round.

5. **Overall Flow**:
   - Scroll to reveal → Initialize maze → Move with reversed keys → Reach the end to win → Option to restart
---
 maze.html | 182 +++++++++++++++++++++---------------------------------
 1 file changed, 69 insertions(+), 113 deletions(-)

diff --git a/maze.html b/maze.html
index 15e0eab..b482d83 100644
--- a/maze.html
+++ b/maze.html
@@ -1,96 +1,59 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Reverse Scrolling Maze Game</title>
     <style>
         body {
-            background-color: rgba(20, 108, 21, 0.982);
-            animation: blink 1s steps 0s infinite normal;
+            background-color: #146c15;
             margin: 0;
-            padding: 0;
             font-family: Arial, sans-serif;
-            /* Added a default font */
         }
 
-        h1 {
-            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-            font-size: 4vw;
-            /* Responsive font size */
-            text-align: center;
-            margin-top: 40px;
-        }
-
-        h2 {
-            font-size: 3vw;
-            /* Responsive font size for h2 */
+        h1, h2 {
             text-align: center;
+            color: white;
             margin: 20px 0;
-            /* Added margin */
         }
 
-        @keyframes blink {
-            0% {
-                opacity: 1;
-            }
-
-            50% {
-                opacity: 0;
-            }
-
-            100% {
-                opacity: 1;
-            }
+        h1 {
+            font-size: 4vw;
         }
 
-        .blink {
-            animation: blink 1s infinite;
+        h2 {
+            font-size: 2.5vw;
         }
 
         #maze-section {
+            display: none;
             margin: 0 auto;
-            /* Centered the maze section */
             width: 90%;
-            /* Responsive width */
             max-width: 800px;
-            /* Max width for larger screens */
+            text-align: center;
         }
 
         canvas {
             border: 6px solid black;
             width: 100%;
-            /* Full width */
             height: auto;
-            /* Maintain aspect ratio */
         }
 
         .hint {
             color: yellow;
-            text-align: center;
-            /* Centered hint text */
-            font-size: 1.5em;
-            /* Responsive hint font size */
+            font-size: 1.2em;
             margin: 20px 0;
-            /* Added margin */
         }
 
-        @media (min-width: 768px) {
-            h1 {
-                font-size: 5vw;
-                /* Adjust font size for larger screens */
-            }
-
-            h2 {
-                font-size: 3vw;
-                /* Adjust h2 font size for larger screens */
-            }
-
-            .hint {
-                font-size: 1.5em;
-                /* Keep hint size for larger screens */
-            }
+        #restartBtn {
+            display: none;
+            padding: 10px 20px;
+            font-size: 1em;
+            color: white;
+            background-color: #333;
+            border: none;
+            cursor: pointer;
+            margin: 20px;
         }
     </style>
 </head>
@@ -101,45 +64,37 @@
         <h1>Scroll down to discover something fun...</h1>
     </section>
 
-    <br><br><br><br><br><br><br><br>
-
-    <section style="margin-top: 20px;"></section>
-    <br><br>
-
-    <section id="maze-section" class="hidden">
+    <section id="maze-section">
         <h2>Reverse Maze Game</h2>
         <canvas id="mazeCanvas" width="600" height="600"></canvas>
-    </section>
-
-    <section class="hint">
-        <p>HINT: Use arrow keys to navigate the maze (controls are reversed).</p>
+        <p class="hint">HINT: Use arrow keys to navigate the maze (controls are reversed).</p>
+        <button id="restartBtn" onclick="restartGame()">Restart Game</button>
     </section>
 
     <script>
+        const canvas = document.getElementById('mazeCanvas');
+        const ctx = canvas.getContext('2d');
+        const mazeSection = document.getElementById('maze-section');
+        const restartBtn = document.getElementById('restartBtn');
+
+        const mazeSize = 10;
+        const cellSize = canvas.width / mazeSize;
+        let playerX = 0, playerY = 0;
+        let maze = [];
+        let mazeInitialized = false;
+
+        // Show maze when scrolling into view
         window.addEventListener('scroll', () => {
-            const mazeSection = document.getElementById('maze-section');
             const viewportHeight = window.innerHeight;
             const mazePosition = mazeSection.getBoundingClientRect();
-
-            // Check if the maze section is within the viewport
             if (mazePosition.top < viewportHeight && mazePosition.bottom >= 0) {
-                mazeSection.classList.remove('hidden'); // Show the maze section
+                mazeSection.style.display = 'block';
                 if (!mazeInitialized) {
-                    initMazeGame(); // Initialize maze once when section is visible
+                    initMazeGame();
                 }
             }
         });
 
-        const canvas = document.getElementById('mazeCanvas');
-        const ctx = canvas.getContext('2d');
-
-        const mazeSize = 10; // Size of the maze grid (10x10)
-        const cellSize = canvas.width / mazeSize;
-
-        let playerX = 0, playerY = 0; // Initial player position
-        let maze = []; // Maze grid
-        let mazeInitialized = false;
-
         // Initialize the maze game
         function initMazeGame() {
             generateMaze();
@@ -150,64 +105,65 @@ <h2>Reverse Maze Game</h2>
 
         // Generate a random maze
         function generateMaze() {
-            maze = [];
-            for (let i = 0; i < mazeSize; i++) {
-                const row = [];
-                for (let j = 0; j < mazeSize; j++) {
-                    row.push(Math.random() > 0.7 ? 1 : 0); // 1 for wall, 0 for free space
-                }
-                maze.push(row);
-            }
-            maze[0][0] = 0; // Start position
-            maze[mazeSize - 1][mazeSize - 1] = 0; // Goal position
+            maze = Array.from({ length: mazeSize }, () =>
+                Array.from({ length: mazeSize }, () => Math.random() > 0.7 ? 1 : 0)
+            );
+            maze[0][0] = 0;
+            maze[mazeSize - 1][mazeSize - 1] = 0;
         }
 
-        // Draw the maze on the canvas
+        // Draw the maze and player
         function drawMaze() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
-
-            for (let i = 0; i < mazeSize; i++) {
-                for (let j = 0; j < mazeSize; j++) {
-                    if (maze[i][j] === 1) {
-                        ctx.fillStyle = '#333'; // Draw wall
-                    } else {
-                        ctx.fillStyle = '#fff'; // Draw path
-                    }
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            maze.forEach((row, i) => {
+                row.forEach((cell, j) => {
+                    ctx.fillStyle = cell === 1 ? '#333' : '#fff';
                     ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
-                }
-            }
+                });
+            });
             drawPlayer();
         }
 
-        // Draw the player
+        // Draw player
         function drawPlayer() {
             ctx.fillStyle = 'blue';
             ctx.fillRect(playerX * cellSize, playerY * cellSize, cellSize, cellSize);
         }
 
-        // Handle reversed movement controls
+        // Handle movement with reversed controls
         function handleMovement(event) {
             const key = event.key;
-
             if (key === 'ArrowUp' && playerY < mazeSize - 1 && maze[playerY + 1][playerX] === 0) {
-                playerY++; // Move down (reversed)
+                playerY++;
             } else if (key === 'ArrowDown' && playerY > 0 && maze[playerY - 1][playerX] === 0) {
-                playerY--; // Move up (reversed)
+                playerY--;
             } else if (key === 'ArrowLeft' && playerX < mazeSize - 1 && maze[playerY][playerX + 1] === 0) {
-                playerX++; // Move right (reversed)
+                playerX++;
             } else if (key === 'ArrowRight' && playerX > 0 && maze[playerY][playerX - 1] === 0) {
-                playerX--; // Move left (reversed)
+                playerX--;
             }
-
             drawMaze();
+            checkGoal();
+        }
 
-            // Check if the player has reached the goal
+        // Check if player has reached the goal
+        function checkGoal() {
             if (playerX === mazeSize - 1 && playerY === mazeSize - 1) {
                 alert('Congratulations! You reached the goal.');
                 window.removeEventListener('keydown', handleMovement);
+                restartBtn.style.display = 'inline-block';
             }
         }
+
+        // Restart game
+        function restartGame() {
+            playerX = 0;
+            playerY = 0;
+            generateMaze();
+            drawMaze();
+            restartBtn.style.display = 'none';
+            window.addEventListener('keydown', handleMovement);
+        }
     </script>
 </body>
-
 </html>

From ba233a1d2722f8cd795192cf510ace0e6f1c8650 Mon Sep 17 00:00:00 2001
From: Akshit Bansal <155195875+akshitbansal2005@users.noreply.github.com>
Date: Sun, 3 Nov 2024 01:56:54 +0530
Subject: [PATCH 3/3] Update hypnotic.html

### Overview
The code creates an engaging web page featuring a chaotic visual experience with animated text and a dynamic canvas.

### Structure
- **HTML**: Well-organized with a clear hierarchy. It includes a preloader, canvas for drawing, and chaos-themed text.
- **Flexbox Layout**: Effectively centers content on the page.

### Styling
- **CSS Reset**: Resets default styles for consistent layout.
- **Responsive Design**: Media queries adjust font sizes for better readability on different devices.
- **Animation**: Text is animated with a shake effect, enhancing the chaotic theme.

### Functionality
- **Dynamic Canvas**: Uses JavaScript to create a spiraling pattern with random colors, embodying the chaotic aesthetic.
- **Color Contrast**: Ensures stroke colors contrast well with the background for better visibility.

### Performance
- **Animation Handling**: Utilizes `setInterval` for drawing, which could affect performance but is manageable here.
- **Responsive Resizing**: Canvas resizes dynamically, maintaining aspect ratio across devices.
---
 hypnotic.html | 32 ++++++++++----------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/hypnotic.html b/hypnotic.html
index 380ddb7..dc198ef 100644
--- a/hypnotic.html
+++ b/hypnotic.html
@@ -16,9 +16,7 @@
         html,
         body {
             height: 100%;
-            /* Ensure the body takes the full height of the viewport */
             overflow: hidden;
-            /* Prevent scrollbars from appearing */
         }
 
         .parent {
@@ -31,14 +29,12 @@
             position: relative;
             overflow: hidden;
             background-color: black;
-            /* Background color can be changed if needed */
         }
 
         .content {
             text-align: center;
             position: relative;
             width: 100%;
-            /* Ensures it takes full width */
         }
 
         .chaotic-text {
@@ -54,12 +50,10 @@
 
         .top-text {
             top: 20%;
-            /* Adjusted for better visibility */
         }
 
         .bottom-text {
             bottom: 20%;
-            /* Adjusted for better visibility */
         }
 
         @keyframes shake {
@@ -86,86 +80,80 @@
 
         #myCanvas {
             width: 100%;
-            /* Responsive width */
             height: 100%;
-            /* Responsive height */
-            max-width: 100%;
-            /* Maximum width */
             margin: auto;
             display: block;
-            /* Centering */
         }
 
-        /* Responsive font size */
         @media (max-width: 768px) {
             .chaotic-text {
                 font-size: 1.5rem;
-                /* Smaller font on mobile */
             }
         }
 
         @media (max-width: 480px) {
             .chaotic-text {
                 font-size: 1rem;
-                /* Even smaller font on very small screens */
             }
         }
     </style>
 </head>
 
 <body class="parent">
-    <!-- preloader -->
+    <!-- Preloader -->
     <div class="container">
         <div class="preloader">
             <div class="preloader__wheel-wrapper">
                 <div class="preloader__wheel"><span class="preloader__content">l</span>
                     <div class="preloader__inner-wheel"></div>
-                    <div class="preloader__second-inner-whell"></div>
+                    <div class="preloader__second-inner-wheel"></div>
                 </div>
             </div>
             <div class="preloader__wheel-wrapper">
                 <div class="preloader__wheel"><span class="preloader__content">o</span>
                     <div class="preloader__inner-wheel"></div>
-                    <div class="preloader__second-inner-whell"></div>
+                    <div class="preloader__second-inner-wheel"></div>
                 </div>
             </div>
             <div class="preloader__wheel-wrapper">
                 <div class="preloader__wheel"><span class="preloader__content">a</span>
                     <div class="preloader__inner-wheel"></div>
-                    <div class="preloader__second-inner-whell"></div>
+                    <div class="preloader__second-inner-wheel"></div>
                 </div>
             </div>
             <div class="preloader__wheel-wrapper">
                 <div class="preloader__wheel"><span class="preloader__content">d</span>
                     <div class="preloader__inner-wheel"></div>
-                    <div class="preloader__second-inner-whell"></div>
+                    <div class="preloader__second-inner-wheel"></div>
                 </div>
             </div>
             <div class="preloader__wheel-wrapper">
                 <div class="preloader__wheel"><span class="preloader__content">i</span>
                     <div class="preloader__inner-wheel"></div>
-                    <div class="preloader__second-inner-whell"></div>
+                    <div class="preloader__second-inner-wheel"></div>
                 </div>
             </div>
             <div class="preloader__wheel-wrapper">
                 <div class="preloader__wheel"><span class="preloader__content">n</span>
                     <div class="preloader__inner-wheel"></div>
-                    <div class="preloader__second-inner-whell"></div>
+                    <div class="preloader__second-inner-wheel"></div>
                 </div>
             </div>
             <div class="preloader__wheel-wrapper">
                 <div class="preloader__wheel"><span class="preloader__content">g</span>
                     <div class="preloader__inner-wheel"></div>
-                    <div class="preloader__second-inner-whell"></div>
+                    <div class="preloader__second-inner-wheel"></div>
                 </div>
             </div>
         </div>
     </div>
+    
     <div class="content">
         <div class="chaotic-text top-text">Welcome to Chaos! Where sanity is overrated.</div>
         <canvas id="myCanvas" width="300" height="300"></canvas>
         <div class="chaotic-text bottom-text">Relax? Sure, if you like chaos!</div>
     </div>
+    
     <script src="preloader.js"></script>
     <script>
         window.onload = function () {