Table of Contents
Best Love Puzzle Using HTML,CSS and JavaScript.
This is a love puzzle which you can also play in the game or you can use it because it is super or amazing or if you are having any problem with it then you can message me on Instagram.
I have given the complete file of this code together whose button is at the bottom and have also explained it step by step. If you want notes then you can join Telegram.
Love Puzzle HTML Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><link rel="preload" as="image" imagesrcset="https://developergtm.in/wp-content/uploads/2024/03/v_JCSSIsMDs-HD.jpg" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergtm.in/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.1" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id='puz_box'>
<div id='puz'>
<i class='first' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
<i class='secon' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
<i class='third' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
<i class='fourt' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
<i class='fifth' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
<i class='sixth' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
<i class='seven' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
<i class='eight' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
<i class='ninth' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
</div>
<div id='puzz'>
<i class='third' draggable='true' ondragstart='drag(event)'></i>
<i class='first' draggable='true' ondragstart='drag(event)'></i>
<i class='secon' draggable='true' ondragstart='drag(event)'></i>
<i class='fourt' draggable='true' ondragstart='drag(event)'></i>
<i class='fifth' draggable='true' ondragstart='drag(event)'></i>
<i class='sixth' draggable='true' ondragstart='drag(event)'></i>
<i class='seven' draggable='true' ondragstart='drag(event)'></i>
<i class='eight' draggable='true' ondragstart='drag(event)'></i>
<i class='ninth' draggable='true' ondragstart='drag(event)'></i>
</div>
</div>
<div id='clicks'>0</div>
<script src="main.js"></script>
</body>
</html>
Love Puzzle CSS Code
:root {
--color: lightgray;
--border-radius: 10px;
}
body {
background: #efefef;
padding: 0;
margin: 0;
box-sizing: border-box;
}
#puz,
#puzz {
position: absolute;
border-radius: var(--border-radius) 0 var(--border-radius) 0;
user-select: none;
}
#puz {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px dashed lightgray;
overflow: hidden;
}
#puzz {
left: 0;
top: 0;
border: 0;
}
#puz i {
float: left;
width: 100px;
height: 100px;
outline: 1px dashed lightgray;
}
#puzz i {
position: absolute;
width: 100px;
height: 100px;
background: var(--color);
background-image: var(--image);
background-size: 300px 300px;
cursor: move;
box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}
.first {
border-top-left-radius: var(--border-radius);
background-position: left top !important;
}
.secon {
background-position: center top !important;
}
.third {
/* border-top-right-radius:var(--border-radius); */
background-position: right top !important;
}
.fourt {
background-position: left center !important;
}
.fifth {
background-position: center center !important;
}
.sixth {
background-position: right center !important;
}
.seven {
/* border-bottom-left-radius:var(--border-radius); */
background-position: left bottom !important;
}
.eight {
background-position: center bottom !important;
}
.ninth {
border-bottom-right-radius: var(--border-radius);
background-position: right bottom !important;
}
.clicked {
box-shadow: 0 0 0 4px gray !important;
}
.dropped {
background: var(--color);
background-image: var(--image);
background-size: 300px 300px;
}
.done {
opacity: 0;
pointer-events: none;
}
.allDone {
animation: allDone 1s linear forwards;
border: 3px solid lightgray !important;
}
.allDone i {
outline: 0 !important;
}
@keyframes allDone {
50% {
transform: translate(-50%, -50%) scale(1.2);
}
}
#clicks {
font-size: 8px;
font-family: monospace;
position: absolute;
bottom: 5px;
right: 5px;
}
Love Puzzle JavaScript Code
var images = ['https://images.unsplash.com/photo-1610624764045-5255643109c6?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'];
var currentIndex = 0;
var totalClicks = 0;
function randomizeImage() {
let root = document.documentElement;
root.style.setProperty('--image', 'url(' + images[currentIndex] + ')');
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
var puzzleItems = document.querySelectorAll('#puzz i');
for (var i = 0; i < puzzleItems.length; i++) {
puzzleItems[i].style.left = Math.random() * (window.innerWidth - 100) + 'px';
puzzleItems[i].style.top = Math.random() * (window.innerHeight - 100) + 'px';
}
}
randomizeImage();
function reloadPuzzle() {
var doneItems = document.querySelectorAll('.done');
doneItems.forEach(function (element) {
element.classList.toggle('done');
});
var droppedItems = document.querySelectorAll('.dropped');
droppedItems.forEach(function (element) {
element.classList.toggle('dropped');
});
var allDoneElement = document.querySelector('.allDone');
allDoneElement.style = '';
allDoneElement.classList.toggle('allDone');
}
// mobile functionality
var puzzleItemsMobile = document.querySelectorAll('#puzz i');
puzzleItemsMobile.forEach(function (element) {
element.addEventListener('mousedown', function () {
totalClicks++;
document.querySelector('#clicks').innerHTML = totalClicks;
});
element.addEventListener('click', function () {
if (document.querySelector('.clicked')) {
document.querySelector('.clicked').classList.toggle('clicked');
element.classList.toggle('clicked');
} else {
element.classList.toggle('clicked');
}
});
});
var puzzleItemsDesktop = document.querySelectorAll('#puz i');
puzzleItemsDesktop.forEach(function (element) {
element.addEventListener('click', function () {
if (document.querySelector('.clicked')) {
var clickedElement = document.querySelector('.clicked');
if (clickedElement.classList.contains(element.classList)) {
element.classList.add('dropped');
clickedElement.classList.add('done');
clickedElement.classList.toggle('clicked');
if (document.querySelectorAll('.dropped').length == 9) {
document.querySelector('#puz').classList.add('allDone');
document.querySelector('#puz').style.border = 'none';
document.querySelector('#puz').style.animation = 'allDone 1s linear forwards';
setTimeout(function () {
reloadPuzzle();
randomizeImage();
}, 1500);
}
}
}
});
});
// desktop drag and drop
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.className);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if (ev.target.className == data) {
ev.target.classList.add('dropped');
document.querySelector('.' + data + "[draggable='true']").classList.add('done');
if (document.querySelectorAll('.dropped').length == 9) {
document.querySelector('#puz').classList.add('allDone');
document.querySelector('#puz').style.border = 'none';
document.querySelector('#puz').style.animation = 'allDone 1s linear forwards';
setTimeout(function () {
reloadPuzzle();
randomizeImage();
}, 1500);
}
}
}
This is my codepen, from this you can also see live projects and also you can join me on codepen, there you will get to see different types of projects.
See the Pen Untitled by Developergtm (@developergtm) on CodePen.