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

update maze.html #218

Closed
wants to merge 3 commits into from
Closed

update maze.html #218

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
1a7eb08
Update emojiland.html
akshitbansal2005 Oct 29, 2024
307d051
Update maze.html
akshitbansal2005 Nov 2, 2024
ba233a1
Update hypnotic.html
akshitbansal2005 Nov 2, 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
68 changes: 17 additions & 51 deletions emojiland.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,6 @@
position: relative;
}

canvas {
display: block;
width: 100%;
height: 100%;
}

.emoji {
position: absolute;
font-size: 30px;
Expand All @@ -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; }
Expand Down Expand Up @@ -82,19 +70,14 @@
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;
display: inline-block;
}

.char.show {
animation: charEnter 2s ease forwards, alignText 1s ease-in-out 1.5s forwards;
animation: charEnter 2s ease forwards;
}
</style>
</head>
Expand Down Expand Up @@ -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>
Expand All @@ -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',
Expand Down Expand Up @@ -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();
Expand All @@ -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() {
Expand Down Expand Up @@ -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>
</html>
32 changes: 10 additions & 22 deletions hypnotic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -54,12 +50,10 @@

.top-text {
top: 20%;
/* Adjusted for better visibility */
}

.bottom-text {
bottom: 20%;
/* Adjusted for better visibility */
}

@keyframes shake {
Expand All @@ -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 () {
Expand Down
Loading