Birthday Puzzle Invitation
About this app
A fun and interactive birthday invitation puzzle.
Birthday Puzzle Invitation
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 Puzzle Invitation</title>
<meta name="description" content="A fun and interactive birthday invitation puzzle.">
<meta name="keywords" content="birthday, invitation, puzzle, game">
<style>
#puzzle-container {
width: 400px;
height: 711px; /* Adjusted height based on 9:16 aspect ratio */
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.puzzlepiece {
width: 100px;
height: 177.75px; /* Adjusted height based on 9:16 aspect ratio */
background-image: url('https://videngo.com/app/puzzle/image.png');
background-size: 400px 711px; /* Adjusted size based on 9:16 aspect ratio */
border: 1px solid #000;
box-sizing: border-box;
cursor: grab; /* Added cursor style */
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div id="puzzle-container"></div>
</div>
<script>
var gridSize = 4;
var shuffledIndex = [];
var imageSource = "https://videngo.com/app/puzzle/image.png";
// On document ready
document.addEventListener("DOMContentLoaded", function() {
generatePuzzle();
});
function generatePuzzle() {
var tiles = '';
for (var i = 0; i < gridSize * gridSize; i++) {
tiles += '<div class="puzzlepiece" draggable="true" ondragstart="dragStart(event)" ondragover="dragOver(event)" ondrop="drop(event)" style="background-position: ' + -(i % gridSize * 100) + 'px ' + -(Math.floor(i / gridSize) * 177.75) + 'px" id="piece' + i + '"></div>';
}
document.getElementById('puzzle-container').innerHTML = tiles;
shufflePieces();
}
function shufflePieces() {
shuffledIndex = [...Array(gridSize * gridSize).keys()];
shuffledIndex.sort(() => Math.random() - 0.5);
var pieces = document.getElementsByClassName('puzzlepiece');
for (var i = 0; i < pieces.length; i++) {
pieces[i].style.order = shuffledIndex[i];
}
}
function dragStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
function dragOver(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var sourceId = event.dataTransfer.getData("text/plain");
var sourceElement = document.getElementById(sourceId);
var targetElement = event.target;
if (targetElement.className.includes('puzzlepiece')) {
var sourceIndex = Array.from(sourceElement.parentNode.children).indexOf(sourceElement);
var targetIndex = Array.from(targetElement.parentNode.children).indexOf(targetElement);
[shuffledIndex[sourceIndex], shuffledIndex[targetIndex]] = [shuffledIndex[targetIndex], shuffledIndex[sourceIndex]];
sourceElement.style.order = shuffledIndex[sourceIndex];
targetElement.style.order = shuffledIndex[targetIndex];
checkSolution();
}
}
function checkSolution() {
for (var i = 0; i < gridSize * gridSize; i++) {
if (shuffledIndex[i] != i) return;
}
alert('Happy Birthday! 🎉🥳');
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!