<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Matching Puzzle</title>
<style>
/* Basic reset and background styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1a1a1d;
color: #eee;
}
h1 {
text-align: center;
color: #f26d21;
margin-bottom: 20px;
}
/* Game Board */
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 15px;
}
/* Card Styles */
.card {
width: 100px;
height: 100px;
background-color: #333;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: transparent;
cursor: pointer;
transition: transform 0.2s;
}
.card.flip {
color: #fff;
background-color: #f26d21;
transform: rotateY(180deg);
}
.card.matched {
background-color: #333;
color: #333;
cursor: not-allowed;
}
/* Game Info */
.game-info {
margin-top: 20px;
text-align: center;
font-size: 1.2em;
color: #f26d21;
}
</style>
</head>
<body>
<div>
<h1>🎃 Halloween Matching Puzzle 👻</h1>
<div class="game-board" id="gameBoard"></div>
<div class="game-info" id="gameInfo">Attempts: 0</div>
</div>
<script>
// Halloween icons
const halloweenIcons = ["🎃", "👻", "🕸️", "🧛", "🧙", "🕷️", "💀", "🍬"];
const gameBoard = document.getElementById("gameBoard");
const gameInfo = document.getElementById("gameInfo");
// Duplicate and shuffle icons for pairs
let cards = [...halloweenIcons, ...halloweenIcons];
cards.sort(() => 0.5 - Math.random());
let firstCard = null;
let secondCard = null;
let attempts = 0;
let matches = 0;
// Render cards
cards.forEach(icon => {
const card = document.createElement("div");
card.classList.add("card");
card.innerHTML = icon;
card.addEventListener("click", () => flipCard(card));
gameBoard.appendChild(card);
});
// Flip card function
function flipCard(card) {
if (card.classList.contains("flip") || card.classList.contains("matched")) return;
card.classList.add("flip");
if (!firstCard) {
firstCard = card;
} else {
secondCard = card;
attempts++;
gameInfo.textContent =
checkForMatch();
}
}
// Check for a match
function checkForMatch() {
const isMatch = firstCard.innerHTML === secondCard.innerHTML;
if (isMatch) {
firstCard.classList.add("matched");
secondCard.classList.add("matched");
matches++;
if (matches === halloweenIcons.length) {
setTimeout(() => alert(
}
resetTurn();
} else {
setTimeout(() => {
firstCard.classList.remove("flip");
secondCard.classList.remove("flip");
resetTurn();
}, 1000);
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Matching Puzzle</title>
<style>
/* Basic reset and background styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1a1a1d;
color: #eee;
}
h1 {
text-align: center;
color: #f26d21;
margin-bottom: 20px;
}
/* Game Board */
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 15px;
}
/* Card Styles */
.card {
width: 100px;
height: 100px;
background-color: #333;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
color: transparent;
cursor: pointer;
transition: transform 0.2s;
}
.card.flip {
color: #fff;
background-color: #f26d21;
transform: rotateY(180deg);
}
.card.matched {
background-color: #333;
color: #333;
cursor: not-allowed;
}
/* Game Info */
.game-info {
margin-top: 20px;
text-align: center;
font-size: 1.2em;
color: #f26d21;
}
</style>
</head>
<body>
<div>
<h1>🎃 Halloween Matching Puzzle 👻</h1>
<div class="game-board" id="gameBoard"></div>
<div class="game-info" id="gameInfo">Attempts: 0</div>
</div>
<script>
// Halloween icons
const halloweenIcons = ["🎃", "👻", "🕸️", "🧛", "🧙", "🕷️", "💀", "🍬"];
const gameBoard = document.getElementById("gameBoard");
const gameInfo = document.getElementById("gameInfo");
// Duplicate and shuffle icons for pairs
let cards = [...halloweenIcons, ...halloweenIcons];
cards.sort(() => 0.5 - Math.random());
let firstCard = null;
let secondCard = null;
let attempts = 0;
let matches = 0;
// Render cards
cards.forEach(icon => {
const card = document.createElement("div");
card.classList.add("card");
card.innerHTML = icon;
card.addEventListener("click", () => flipCard(card));
gameBoard.appendChild(card);
});
// Flip card function
function flipCard(card) {
if (card.classList.contains("flip") || card.classList.contains("matched")) return;
card.classList.add("flip");
if (!firstCard) {
firstCard = card;
} else {
secondCard = card;
attempts++;
gameInfo.textContent =
Attempts: ${attempts};checkForMatch();
}
}
// Check for a match
function checkForMatch() {
const isMatch = firstCard.innerHTML === secondCard.innerHTML;
if (isMatch) {
firstCard.classList.add("matched");
secondCard.classList.add("matched");
matches++;
if (matches === halloweenIcons.length) {
setTimeout(() => alert(
You won in ${attempts} attempts!), 500);}
resetTurn();
} else {
setTimeout(() => {
firstCard.classList.remove("flip");
secondCard.classList.remove("flip");
resetTurn();
}, 1000);
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Flag animation</title>
<style>
:root{
--w: 900px;
}
html,body{height:100%;margin:0;font-family:Arial, sans-serif}
.page{
min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f2faff;padding:20px;
}
.flag-wrap{width:min(95vw,var(--w));max-width:1000px;}
svg{display:block;width:100%;height:auto;border:1px solid #ccc;border-radius:6px;overflow:visible}
.controls{margin-top:12px;display:flex;gap:10px}
button{padding:6px 12px;border-radius:6px;border:0;background:#0b5ed7;color:#fff;font-weight:600;cursor:pointer}
button.secondary{background:#eee;color:#111}
@media (prefers-reduced-motion: reduce){
.wave-filter{filter:none !important}
}
</style>
</head>
<body>
<div class="page">
<div class="flag-wrap">
<svg id="uzflag" viewBox="0 0 900 450" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="wave" x="-20%" y="-20%" width="140%" height="140%" class="wave-filter">
<feTurbulence id="turb" baseFrequency="0.009 0.02" numOctaves="2" seed="2" type="fractalNoise" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="18" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
<rect width="900" height="450" fill="#ffffff" />
<g id="flagGroup" filter="url(#wave)">
<rect x="0" y="0" width="900" height="150" fill="#1EB3E6" />
<rect x="0" y="150" width="900" height="6" fill="#C82B2B" />
<rect x="0" y="156" width="900" height="138" fill="#FFFFFF" />
<rect x="0" y="294" width="900" height="6" fill="#C82B2B" />
<rect x="0" y="300" width="900" height="150" fill="#118C4E" />
</g>
</svg>
<div class="controls">
<button id="playBtn">Play</button>
<button id="pauseBtn" class="secondary">Stop</button>
</div>
</div>
</div>
<script>
(function(){
const turb = document.getElementById('turb');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
let running = true;
let start = performance.now();
let rafId;
const params = {
baseX: 0.009,
baseY: 0.02
}
function animate(now){
const t = (now - start);
const bx = params.baseX + Math.sin(t * 0.0006) * 0.003;
const by = params.baseY + Math.cos(t * 0.0009) * 0.006;
turb.setAttribute('baseFrequency', bx + ' ' + by);
rafId = requestAnimationFrame(animate);
}
rafId = requestAnimationFrame(animate);
playBtn.addEventListener('click', ()=>{
if(!running){ running = true; rafId = requestAnimationFrame(animate); }
});
pauseBtn.addEventListener('click', ()=>{
if(running){ running = false; cancelAnimationFrame(rafId); }
});
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if(mq.matches){ if(running){ cancelAnimationFrame(rafId); } }
})();
</script>
</body>
</html>