Create Photo Puzzle game using html, css & js with source code

In today’s blog we will make a photo puzzle game using HTML, CSS and JS.

01. HTML Code :-

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - love Puzzle</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<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>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

02. CSS Code :-

:root {
  --color:rgb(0, 0, 0);
  --border-radius:10px;
}

body {
  background:#000000;
  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 solid lightgray;
  overflow:hidden;
}
#puzz {
  left:0;
  top:0;
  border:0;
}

#puz i {
  float:left;
  width:100px;
  height:100px;
  outline:1px solid 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;
}

03. JavaScript Code :-

var images = ['https://images.pexels.com/photos/388517/pexels-photo-388517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'];

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);
    }
  }
}

OutPut :-

photo puzzle codejuster

Download Ebooks – Click Me

Download Notes – Click Me

Related Posts

Leave a Comment Cancel Reply