Birthday Invitation Puzzle
About this app
Solve the puzzle to see the birthday party information!
Birthday Invitation Puzzle 🧩 Birthday Invitation Puzzle 🎂 Solve the puzzle to see the birthday party information!
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Birthday Invitation Puzzle</title>
<meta name="description" content="Solve the puzzle to see the birthday party information!">
<meta name="keywords" content="HTML, Javascript, Puzzle, Game, Birthday, Invitation">
<script type="text/javascript">
try {
let selectedImg;
let correctPos = [];
let currPos = [];
const imgURL = "imageURL"; // Insert your image URL here
document.addEventListener("DOMContentLoaded", function() {
const canvas = document.getElementById("puzzle-canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = imgURL;
img.onload = function() {
let pieceWidth = img.width / 3;
let pieceHeight = img.height / 3;
for (let x = 0; x < 3; ++x) {
for (let y = 0; y < 3; ++y) {
let piece = document.createElement("canvas");
piece.width = pieceWidth;
piece.height = pieceHeight;
piece.getContext("2d").drawImage(img, x * pieceWidth, y * pieceHeight, pieceWidth, pieceHeight, 0, 0, pieceWidth, pieceHeight);
correctPos.push({ top: y * pieceHeight, left: x * pieceWidth, el: piece });
currPos.push({ top: y * pieceHeight, left: x * pieceWidth, el: piece });
}
}
currPos.sort(() => Math.random() - 0.5);
currPos.forEach((piece, i) => {
piece.el.style.top = `${piece.top}px`;
piece.el.style.left = `${piece.left}px`;
piece.el.style.position = "absolute";
piece.el.addEventListener("click", () => selectPiece(i));
document.getElementById("puzzle-canvas").appendChild(piece.el);
});
};
});
function selectPiece(i) {
if (selectedImg === undefined) {
selectedImg = i;
} else {
[currPos[selectedImg], currPos[i]] = [currPos[i], currPos[selectedImg]];
currPos.forEach((piece, i) => {
piece.el.style.top = `${correctPos[i].top}px`;
piece.el.style.left = `${correctPos[i].left}px`;
});
selectedImg = undefined;
checkWin();
}
}
function checkWin() {
if (currPos.every((piece, i) => piece.el === correctPos[i].el)) {
alert("Congratulations! You've solved the puzzle! 🥳");
}
}
} catch (error) {
throw error;
}
</script>
<style>
#puzzle-canvas {
position: relative;
width: 600px;
height: 600px;
margin: auto;
background-color: #fafafa;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>🧩 Birthday Invitation Puzzle 🎂</h1>
<p>Solve the puzzle to see the birthday party information!</p>
<div id="puzzle-canvas"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!