Merge pull request #5123 from AmruthaPariprolu/add/number-sorting-game

Added number sorting game
kunjgit · Aug 9, 2024 · ec44c32 · ec44c32
2 parents 0a18ed7 + 359f4c8
commit ec44c32
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 0 deletions.
diff --git a/Games/Number_Sorting_Game/README.md b/Games/Number_Sorting_Game/README.md
@@ -0,0 +1,25 @@
+# Number Sorting Game
+
+## Overview
+
+The Number Sorting Game is a web-based interactive game where players must manually sort a list of numbers by dragging and dropping them into the correct order. The game provides visual feedback when the numbers are correctly sorted.
+
+## Features
+
+- Drag-and-drop functionality for sorting numbers
+- Shuffle button to randomize the numbers
+- Visual feedback with color changes and animations
+- Responsive design suitable for different screen sizes
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## Getting Started
+
+### Prerequisites
+
+To run this project locally, you need a modern web browser (e.g., Chrome, Firefox, Safari).
+
diff --git a/Games/Number_Sorting_Game/index.html b/Games/Number_Sorting_Game/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Number Sorting Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Number Sorting Game</h1>
+        <div id="numbers" class="numbers"></div>
+        <button id="shuffle-btn">Shuffle Numbers</button>
+        <div id="result" class="result"></div>
+    </div>
+    <script src="scripts.js"></script>
+</body>
+</html>
diff --git a/Games/Number_Sorting_Game/scripts.js b/Games/Number_Sorting_Game/scripts.js
@@ -0,0 +1,87 @@
+const numbersDiv = document.getElementById('numbers');
+const shuffleBtn = document.getElementById('shuffle-btn');
+const resultDiv = document.getElementById('result');
+
+let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];
+
+function displayNumbers() {
+    numbersDiv.innerHTML = '';
+    numbers.forEach((num, index) => {
+        const numDiv = document.createElement('div');
+        numDiv.className = 'number';
+        numDiv.draggable = true;
+        numDiv.textContent = num;
+        numDiv.dataset.index = index;
+        numbersDiv.appendChild(numDiv);
+    });
+    addDragAndDropHandlers();
+}
+
+function shuffleNumbers() {
+    for (let i = numbers.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [numbers[i], numbers[j]] = [numbers[j], numbers[i]];
+    }
+    displayNumbers();
+    resetResult();
+}
+
+function addDragAndDropHandlers() {
+    const numberElements = document.querySelectorAll('.number');
+    numberElements.forEach((number) => {
+        number.addEventListener('dragstart', handleDragStart);
+        number.addEventListener('dragover', handleDragOver);
+        number.addEventListener('drop', handleDrop);
+    });
+}
+
+let draggedElement = null;
+
+function handleDragStart(event) {
+    draggedElement = event.target;
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', draggedElement.dataset.index);
+}
+
+function handleDragOver(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+}
+
+function handleDrop(event) {
+    event.preventDefault();
+    const fromIndex = draggedElement.dataset.index;
+    const toIndex = event.target.dataset.index;
+    if (fromIndex !== toIndex) {
+        [numbers[fromIndex], numbers[toIndex]] = [numbers[toIndex], numbers[fromIndex]];
+        displayNumbers();
+    }
+    checkSorted();
+}
+
+function checkSorted() {
+    if (numbers.slice().sort((a, b) => a - b).join('') === numbers.join('')) {
+        resultDiv.textContent = 'Correct! The numbers are sorted.';
+        document.querySelectorAll('.number').forEach((number) => {
+            number.classList.add('sorted');
+        });
+        resultDiv.style.opacity = 1;
+        document.body.classList.add('sorted');
+    } else {
+        resetResult();
+    }
+}
+
+function resetResult() {
+    resultDiv.textContent = '';
+    document.querySelectorAll('.number').forEach((number) => {
+        number.classList.remove('sorted');
+    });
+    resultDiv.style.opacity = 0;
+    document.body.classList.remove('sorted');
+}
+
+shuffleBtn.addEventListener('click', shuffleNumbers);
+
+// Initial display
+displayNumbers();
diff --git a/Games/Number_Sorting_Game/styles.css b/Games/Number_Sorting_Game/styles.css
@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+body {
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #f0f0f0, #d3d3d3);
+    margin: 0;
+    transition: background 0.5s ease-in-out;
+}
+
+body.sorted {
+    background: linear-gradient(135deg, #e0ffe0, #c0ffc0);
+}
+
+.container {
+    text-align: center;
+    background: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+}
+
+.container:hover {
+    transform: scale(1.05);
+}
+
+.numbers {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+    font-size: 24px;
+    letter-spacing: 5px;
+    gap: 10px;
+}
+
+.number {
+    margin: 0 5px;
+    padding: 15px;
+    background-color: #ff7675;
+    color: white;
+    border-radius: 5px;
+    cursor: move;
+    user-select: none;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.number:hover {
+    background-color: #d63031;
+    transform: scale(1.1);
+}
+
+.sorted {
+    background-color: #55efc4;
+    box-shadow: 0 0 15px #55efc4;
+}
+
+button {
+    padding: 10px 20px;
+    margin: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    background-color: #74b9ff;
+    color: white;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+button:hover {
+    background-color: #0984e3;
+    transform: scale(1.1);
+}
+
+.result {
+    margin-top: 20px;
+    font-size: 18px;
+    color: #55efc4;
+    transition: opacity 0.3s ease;
+}
diff --git a/README.md b/README.md
@@ -1692,7 +1692,16 @@ This repository also provides one such platforms where contributers come over an
 |[Find_The_Missing_Letter](https://github.com/kunjgit/GameZone/tree/main/Games/Find_The_Missing_Letter)|
 | [Hole_And_Mole_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hole_And_Mole_Game)|
 |[Animal_Name_Guessing](https://github.com/kunjgit/GameZone/tree/main/Games/Animal_Name_Guessing)|
+
+
+
 |[Cross_Road_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_Road_Game)|
+
+|[Number_Sorting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Sorting_Game)|
+
+
+
+
 |[Tower_Building_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Building_Game)|
 |[Cross_Road_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_Road_Game)|
 

diff --git a/assets/images/Number_Sorting_Game.png b/assets/images/Number_Sorting_Game.png