Drag & Drop Logo Game with HTML, CSS, and JavaScript
By Cristian Quiñones, Published on January 22nd 2025 | 9 mins, 1672 words
Join me as we create a complete Drag & Drop Logo Game where users match popular brand logos with their names. Now in order to bring this game into life we will be using some front end tools like HTML,CSS and Javascript, so without any further ado let's start coding
Step 1: HTML Structure
Our HTML file sets up the layout of the game.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<title>Drag & Drop Logo Game</title>
</head>
<body>
<section class="score">
<span class="correct">0</span>/<span class="total">0</span>
<button id="play-again-btn">Play Again</button>
</section>
<section class="draggable-items">
</section>
<section class="matching-pairs">
</section>
<script src="script.js"></script>
</body>
</html>Step 2: Styling the Html Structure with CSS
With CSS we can add styling and ensures the layout looks great. It also defines styles for the draggable logos, matching pairs, and hover effects.
Here’s the basic CSS structure:
style.css
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #eee;
color: #111;
}
.score {
font-family: monospace;
text-align: center;
font-size: 2rem;
font-weight: bold;
letter-spacing: 0.25rem;
margin: 1rem;
position: relative;
transition: opacity 0.2s;
}
#play-again-btn {
position: absolute;
top: -0.5rem;
left: 50%;
margin-left: -50px;
font-size: 1rem;
font-weight: bold;
color: #fff;
background-color: #111;
border: 5px double #fff;
border-radius: 14px;
padding: 8px 10px;
outline: none;
letter-spacing: .05em;
cursor: pointer;
display: none;
opacity: 0;
transition: opacity 0.5s, transform 0.5s, background-color 0.2s;
}
#play-again-btn:hover {
background-color: #333;
}
#play-again-btn:active {
background-color: #555;
}
#play-again-btn.play-again-btn-entrance {
opacity: 1;
transform: translateX(6rem);
}
.draggable-items {
display: flex;
justify-content: center;
margin: 1rem 1rem 1.5rem 1rem;
transition: opacity 0.5s;
}
.draggable {
height: 5rem;
width: 5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
font-weight: bold;
margin: 0rem 0.5rem;
cursor: move;
transition: opacity 0.2s;
}
.draggable:hover {
opacity: 0.5;
}
.matching-pairs {
transition: opacity 0.5s;
}
.matching-pair {
height: 6rem;
width: 22rem;
margin: 1rem auto;
display: flex;
justify-content: space-between;
}
.matching-pair span {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
user-select: none;
}
.label {
width: 15rem;
font-size: 2rem;
}
.droppable {
width: 6rem;
font-size: 4rem;
background-color: #fff;
border: 3px dashed #111;
transition: 0.2s;
}
.droppable-hover {
background-color: #bee3f0;
transform: scale(1.1);
}
.dropped {
border-style: solid;
}
.dragged {
user-select: none;
opacity: 0.1;
cursor: default;
}
.draggable.dragged:hover {
opacity: 0.1;
}
@media (max-width: 600px) {
html { font-size: 14px; }
#play-again-btn { top: -0.4rem; }
#play-again-btn.play-again-btn-entrance { transform: translateX(7rem); }
}Step 3: Adding Functionality with JavaScript
JavaScript is where the game’s functionality comes together. We define the brand logos and their associated names. The logic enables users to drag the logos and drop them next to the correct brand names. When a correct match is made, the score increases.
script.js
const brands = [
{
iconName: "adobe",
brandName: "Adobe",
color: "#ff0000"
},
{
iconName: "airbnb",
brandName: "Airbnb",
color: "#fd5c63"
},
{
iconName: "amazon",
brandName: "Amazon",
color: "#333333"
},
{
iconName: "android",
brandName: "Android",
color: "#a4c639"
},
{
iconName: "angellist",
brandName: "AngelList",
color: "#000000"
},
{
iconName: "angular",
brandName: "Angular",
color: "#b52e31"
},
{
iconName: "app-store-ios",
brandName: "App Store",
color: "#5fc9f8"
},
{
iconName: "apple",
brandName: "Apple",
color: "#aaaaaa"
},
{
iconName: "bitcoin",
brandName: "Bitcoin",
color: "#d4af37"
},
{
iconName: "blackberry",
brandName: "BlackBerry",
color: "#000000"
},
{
iconName: "blogger",
brandName: "Blogger",
color: "#f57d00"
},
{
iconName: "bluetooth",
brandName: "Bluetooth",
color: "#3b5998"
},
{
iconName: "bootstrap",
brandName: "Bootstrap",
color: "#553c7b"
},
{
iconName: "chrome",
brandName: "Google Chrome",
color: "#333333"
},
{
iconName: "codepen",
brandName: "CodePen",
color: "#111111"
},
{
iconName: "cpanel",
brandName: "cPanel",
color: "#ff6c2c"
},
{
iconName: "css3-alt",
brandName: "CSS3",
color: "#264de4"
},
{
iconName: "dev",
brandName: "Dev",
color: "#111111"
},
{
iconName: "dhl",
brandName: "DHL",
color: "#ba0c2f"
},
{
iconName: "digital-ocean",
brandName: "DigitalOcean",
color: "#008bcf"
},
{
iconName: "discord",
brandName: "Discord",
color: "#7289da"
},
{
iconName: "docker",
brandName: "Docker",
color: "#0db7ed"
},
{
iconName: "dribbble",
brandName: "Dribbble",
color: "#ea4c89"
},
{
iconName: "dropbox",
brandName: "Dropbox",
color: "#007ee5"
},
{
iconName: "drupal",
brandName: "Drupal",
color: "#0077c0"
},
{
iconName: "ebay",
brandName: "eBay",
color: "#333333"
},
{
iconName: "edge",
brandName: "Microsoft Edge",
color: "#0078d7"
},
{
iconName: "ember",
brandName: "Ember.js",
color: "#f23819"
},
{
iconName: "ethereum",
brandName: "Ethereum",
color: "#666666"
},
{
iconName: "etsy",
brandName: "Etsy",
color: "#d5641c"
},
{
iconName: "evernote",
brandName: "Evernote",
color: "#2dbe60"
},
{
iconName: "facebook-square",
brandName: "Facebook",
color: "#3b5998"
},
{
iconName: "fedex",
brandName: "FedEx",
color: "#4d148c"
},
{
iconName: "firefox",
brandName: "Firefox",
color: "#e66000"
},
{
iconName: "font-awesome",
brandName: "Font Awesome",
color: "#228ae6"
},
{
iconName: "free-code-camp",
brandName: "freeCodeCamp",
color: "#006400"
},
{
iconName: "git-alt",
brandName: "Git",
color: "#f1502f"
},
{
iconName: "github",
brandName: "GitHub",
color: "#333333"
},
{
iconName: "google",
brandName: "Google",
color: "#333333"
},
{
iconName: "google-play",
brandName: "Google Play",
color: "#3bccff"
},
{
iconName: "grunt",
brandName: "Grunt",
color: "#fba919"
},
{
iconName: "gulp",
brandName: "gulp.js",
color: "#db4446"
},
{
iconName: "html5",
brandName: "HTML5",
color: "#e34f26"
},
{
iconName: "imdb",
brandName: "IMDb",
color: "#dba506"
},
{
iconName: "instagram",
brandName: "Instagram",
color: "#e1306c"
},
{
iconName: "internet-explorer",
brandName: "Internet Explorer",
color: "#1ebbee"
},
{
iconName: "itunes",
brandName: "iTunes",
color: "#ea4cc0"
},
{
iconName: "java",
brandName: "Java",
color: "#5382a1"
},
{
iconName: "js-square",
brandName: "JavaScript",
color: "#333333"
},
{
iconName: "jsfiddle",
brandName: "JSFiddle",
color: "#333333"
},
{
iconName: "kickstarter",
brandName: "Kickstarter",
color: "#2bde73"
},
{
iconName: "laravel",
brandName: "Laravel",
color: "#f55247"
},
{
iconName: "less",
brandName: "Less",
color: "#00316e"
},
{
iconName: "linkedin",
brandName: "LinkedIn",
color: "#0077b5"
},
{
iconName: "linux",
brandName: "Linux",
color: "#000000"
},
{
iconName: "mailchimp",
brandName: "Mailchimp",
color: "#239ab9"
},
{
iconName: "medium",
brandName: "Medium",
color: "#00ab6c"
},
{
iconName: "meetup",
brandName: "Meetup",
color: "#e0393e"
},
{
iconName: "microsoft",
brandName: "Microsoft",
color: "#111111"
},
{
iconName: "napster",
brandName: "Napster",
color: "#111111"
},
{
iconName: "node",
brandName: "Node.js",
color: "#68a063"
},
{
iconName: "npm",
brandName: "npm",
color: "#cc3534"
},
{
iconName: "opera",
brandName: "Opera",
color: "#cc0f16"
},
{
iconName: "patreon",
brandName: "Patreon",
color: "#f96854"
},
{
iconName: "paypal",
brandName: "PayPal",
color: "#003087"
},
{
iconName: "php",
brandName: "PHP",
color: "#8892be"
},
{
iconName: "pinterest",
brandName: "Pinterest",
color: "#bd081c"
},
{
iconName: "playstation",
brandName: "PlayStation",
color: "#003087"
},
{
iconName: "product-hunt",
brandName: "Product Hunt",
color: "#da552f"
},
{
iconName: "python",
brandName: "Python",
color: "#4584b6"
},
{
iconName: "quora",
brandName: "Quora",
color: "#a82400"
},
{
iconName: "react",
brandName: "React",
color: "#00d8ff"
},
{
iconName: "reddit",
brandName: "reddit",
color: "#ff4500"
},
{
iconName: "safari",
brandName: "Safari",
color: "#0fb5ee"
},
{
iconName: "sass",
brandName: "Sass",
color: "#cd6799"
},
{
iconName: "skype",
brandName: "Skype",
color: "#00aff0"
},
{
iconName: "slack",
brandName: "Slack",
color: "#3eb991"
},
{
iconName: "snapchat-square",
brandName: "Snapchat",
color: "#fffc00"
},
{
iconName: "soundcloud",
brandName: "SoundCloud",
color: "#ff8800"
},
{
iconName: "spotify",
brandName: "Spotify",
color: "#1db954"
},
{
iconName: "squarespace",
brandName: "Squarespace",
color: "#222222"
},
{
iconName: "stack-overflow",
brandName: "Stack Overflow",
color: "#f48024"
},
{
iconName: "stripe",
brandName: "Stripe",
color: "#00afe1"
},
{
iconName: "trello",
brandName: "Trello",
color: "#0079bf"
},
{
iconName: "tripadvisor",
brandName: "TripAdvisor",
color: "#00af87"
},
{
iconName: "twitch",
brandName: "Twitch",
color: "#6441a5"
},
{
iconName: "twitter",
brandName: "Twitter",
color: "#1da1f2"
},
{
iconName: "uber",
brandName: "Uber",
color: "#09091a"
},
{
iconName: "viber",
brandName: "Viber",
color: "#59267c"
},
{
iconName: "vimeo",
brandName: "Vimeo",
color: "#1ab7ea"
},
{
iconName: "vk",
brandName: "VKontakte",
color: "#45668e"
},
{
iconName: "vuejs",
brandName: "Vue.js",
color: "#42b883"
},
{
iconName: "whatsapp",
brandName: "WhatsApp",
color: "#075e54"
},
{
iconName: "wikipedia-w",
brandName: "Wikipedia",
color: "#000000"
},
{
iconName: "windows",
brandName: "Microsoft Windows",
color: "#0078d7"
},
{
iconName: "wix",
brandName: "Wix.com",
color: "#333333"
},
{
iconName: "wordpress",
brandName: "WordPress",
color: "#21759b"
},
{
iconName: "xbox",
brandName: "Xbox",
color: "#52b043"
},
{
iconName: "yahoo",
brandName: "Yahoo!",
color: "#410093"
},
{
iconName: "youtube",
brandName: "YouTube",
color: "#ff0000"
}
];
let correct = 0;
let total = 0;
const totalDraggableItems = 5;
const totalMatchingPairs = 5; // Should be <= totalDraggableItems
const scoreSection = document.querySelector(".score");
const correctSpan = scoreSection.querySelector(".correct");
const totalSpan = scoreSection.querySelector(".total");
const playAgainBtn = scoreSection.querySelector("#play-again-btn");
const draggableItems = document.querySelector(".draggable-items");
const matchingPairs = document.querySelector(".matching-pairs");
let draggableElements;
let droppableElements;
initiateGame();
function initiateGame() {
const randomDraggableBrands = generateRandomItemsArray(totalDraggableItems, brands);
const randomDroppableBrands = totalMatchingPairs<totalDraggableItems ? generateRandomItemsArray(totalMatchingPairs, randomDraggableBrands) : randomDraggableBrands;
const alphabeticallySortedRandomDroppableBrands = [...randomDroppableBrands].sort((a,b) => a.brandName.toLowerCase().localeCompare(b.brandName.toLowerCase()));
// Create "draggable-items" and append to DOM
for(let i=0; i<randomDraggableBrands.length; i++) {
draggableItems.insertAdjacentHTML("beforeend", `
<i class="fab fa-${randomDraggableBrands[i].iconName} draggable" draggable="true" style="color: ${randomDraggableBrands[i].color};" id="${randomDraggableBrands[i].iconName}"></i>
`);
}
// Create "matching-pairs" and append to DOM
for(let i=0; i<alphabeticallySortedRandomDroppableBrands.length; i++) {
matchingPairs.insertAdjacentHTML("beforeend", `
<div class="matching-pair">
<span class="label">${alphabeticallySortedRandomDroppableBrands[i].brandName}</span>
<span class="droppable" data-brand="${alphabeticallySortedRandomDroppableBrands[i].iconName}"></span>
</div>
`);
}
draggableElements = document.querySelectorAll(".draggable");
droppableElements = document.querySelectorAll(".droppable");
draggableElements.forEach(elem => {
elem.addEventListener("dragstart", dragStart);
// elem.addEventListener("drag", drag);
// elem.addEventListener("dragend", dragEnd);
});
droppableElements.forEach(elem => {
elem.addEventListener("dragenter", dragEnter);
elem.addEventListener("dragover", dragOver);
elem.addEventListener("dragleave", dragLeave);
elem.addEventListener("drop", drop);
});
}
// Drag and Drop Functions
//Events fired on the drag target
function dragStart(event) {
event.dataTransfer.setData("text", event.target.id); // or "text/plain"
}
//Events fired on the drop target
function dragEnter(event) {
if(event.target.classList && event.target.classList.contains("droppable") && !event.target.classList.contains("dropped")) {
event.target.classList.add("droppable-hover");
}
}
function dragOver(event) {
if(event.target.classList && event.target.classList.contains("droppable") && !event.target.classList.contains("dropped")) {
event.preventDefault();
}
}
function dragLeave(event) {
if(event.target.classList && event.target.classList.contains("droppable") && !event.target.classList.contains("dropped")) {
event.target.classList.remove("droppable-hover");
}
}
function drop(event) {
event.preventDefault();
event.target.classList.remove("droppable-hover");
const draggableElementBrand = event.dataTransfer.getData("text");
const droppableElementBrand = event.target.getAttribute("data-brand");
const isCorrectMatching = draggableElementBrand===droppableElementBrand;
total++;
if(isCorrectMatching) {
const draggableElement = document.getElementById(draggableElementBrand);
event.target.classList.add("dropped");
draggableElement.classList.add("dragged");
draggableElement.setAttribute("draggable", "false");
event.target.innerHTML = `<i class="fab fa-${draggableElementBrand}" style="color: ${draggableElement.style.color};"></i>`;
correct++;
}
scoreSection.style.opacity = 0;
setTimeout(() => {
correctSpan.textContent = correct;
totalSpan.textContent = total;
scoreSection.style.opacity = 1;
}, 200);
if(correct===Math.min(totalMatchingPairs, totalDraggableItems)) { // Game Over!!
playAgainBtn.style.display = "block";
setTimeout(() => {
playAgainBtn.classList.add("play-again-btn-entrance");
}, 200);
}
}
// Other Event Listeners
playAgainBtn.addEventListener("click", playAgainBtnClick);
function playAgainBtnClick() {
playAgainBtn.classList.remove("play-again-btn-entrance");
correct = 0;
total = 0;
draggableItems.style.opacity = 0;
matchingPairs.style.opacity = 0;
setTimeout(() => {
scoreSection.style.opacity = 0;
}, 100);
setTimeout(() => {
playAgainBtn.style.display = "none";
while (draggableItems.firstChild) draggableItems.removeChild(draggableItems.firstChild);
while (matchingPairs.firstChild) matchingPairs.removeChild(matchingPairs.firstChild);
initiateGame();
correctSpan.textContent = correct;
totalSpan.textContent = total;
draggableItems.style.opacity = 1;
matchingPairs.style.opacity = 1;
scoreSection.style.opacity = 1;
}, 500);
}
// Auxiliary functions
function generateRandomItemsArray(n, originalArray) {
let res = [];
let clonedArray = [...originalArray];
if(n>clonedArray.length) n=clonedArray.length;
for(let i=1; i<=n; i++) {
const randomIndex = Math.floor(Math.random()*clonedArray.length);
res.push(clonedArray[randomIndex]);
clonedArray.splice(randomIndex, 1);
}
return res;
}