diff --git a/Games/Number_Sorting_Game/README.md b/Games/Number_Sorting_Game/README.md new file mode 100644 index 0000000000..21fdd0ec7f --- /dev/null +++ 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 new file mode 100644 index 0000000000..23d952f1aa --- /dev/null +++ b/Games/Number_Sorting_Game/index.html @@ -0,0 +1,18 @@ + + + + + + Number Sorting Game + + + +
+

Number Sorting Game

+
+ +
+
+ + + diff --git a/Games/Number_Sorting_Game/scripts.js b/Games/Number_Sorting_Game/scripts.js new file mode 100644 index 0000000000..450fa179c5 --- /dev/null +++ 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 new file mode 100644 index 0000000000..3121f111e8 --- /dev/null +++ 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 index 39b3ce72fb..f6574124cc 100644 --- a/README.md +++ b/README.md @@ -1709,7 +1709,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 new file mode 100644 index 0000000000..a667c2e753 Binary files /dev/null and b/assets/images/Number_Sorting_Game.png differ