diff --git a/Games/Schulteit_Hard !/README.md b/Games/Schulteit_Hard !/README.md new file mode 100644 index 0000000000..3a73b0d669 --- /dev/null +++ b/Games/Schulteit_Hard !/README.md @@ -0,0 +1,21 @@ +# **Schulteit Hard!** + +--- + +
+ +## **Description 📃** +- The trick though you're going to try to stay focused on the center dot that i just added to the grid + +## **How to play? 🕹ī¸** +-a 5x5 Schulte table would have 25 numbers arranged in a random order in a 5x5 grid. The goal of the exercise is to scan the table horizontally and vertically to find all the numbers in order as quickly as possible. The Schulte table is designed to improve focus, speed, and mental agility. + +
+ +## **Screenshots 📸** + +
+ +![PLAY](image.png) + +
diff --git a/Games/Schulteit_Hard !/css/main.css b/Games/Schulteit_Hard !/css/main.css new file mode 100644 index 0000000000..56808befdf --- /dev/null +++ b/Games/Schulteit_Hard !/css/main.css @@ -0,0 +1,38 @@ +body{ + background: rgb(0, 0, 0); + background: radial-gradient(circle, rgba(0, 0, 0, 0.866) 0%, rgba(0, 0, 0, 0.944) 100%); +} + +.grid{ + display: flex; + flex-wrap: wrap; + margin: auto; + background-color: aqua; + width: 300px; + height: 300px; +} + +.button{ + margin-bottom: 70px; +} + +footer { + color: #fff; + position: fixed; + bottom: 0px; + width: 100%; + height: 50px; + font-family: 'Noto Sans JP', sans-serif; +} + +footer a { + text-decoration: none; + color: inherit; + font-family: inherit; +} + +footer a:hover { + text-decoration: none; + color: #000; + font-family: inherit; +} diff --git a/Games/Schulteit_Hard !/image.png b/Games/Schulteit_Hard !/image.png new file mode 100644 index 0000000000..09645bf3b4 Binary files /dev/null and b/Games/Schulteit_Hard !/image.png differ diff --git a/Games/Schulteit_Hard !/images/brain.ico b/Games/Schulteit_Hard !/images/brain.ico new file mode 100644 index 0000000000..3786012bce Binary files /dev/null and b/Games/Schulteit_Hard !/images/brain.ico differ diff --git a/Games/Schulteit_Hard !/images/schulte-table.jpg b/Games/Schulteit_Hard !/images/schulte-table.jpg new file mode 100644 index 0000000000..edfec4b432 Binary files /dev/null and b/Games/Schulteit_Hard !/images/schulte-table.jpg differ diff --git a/Games/Schulteit_Hard !/index.html b/Games/Schulteit_Hard !/index.html new file mode 100644 index 0000000000..300b4ff5d2 --- /dev/null +++ b/Games/Schulteit_Hard !/index.html @@ -0,0 +1,52 @@ + + + + + SCHULTE TABLE + + + + + + + + + +
+

SCHULTE TABLE

+
+
+
+
Attemps: 0
+
+
+
Time: 0
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/Games/Schulteit_Hard !/js/script.js b/Games/Schulteit_Hard !/js/script.js new file mode 100644 index 0000000000..cd3644a54a --- /dev/null +++ b/Games/Schulteit_Hard !/js/script.js @@ -0,0 +1,93 @@ +var numbers = [1,2,3,4,5,6,7,8,9]; +var current = 0; +var attemp = 0; +var time = 0; +var dimension = 9; +numbers = numbers.sort(()=>Math.random()-0.5); + +function drawTable(length, prop){ + const grid = document.querySelector('.grid'); + grid.innerHTML = ""; + for (let i = 0; i < length; i++) { + let cell = document.createElement('div'); + cell.setAttribute('id', numbers[i]); + cell.style.backgroundColor = "#1abc9c"; + cell.style.width = prop +"px"; + cell.style.height = prop +"px"; + cell.style.border = "1px solid #16a085"; + cell.style.cursor = "pointer"; + cell.style.textAlign = "center"; + cell.style.display = "table-cell"; + cell.style.verticalAlign = "middle"; + cell.addEventListener('click', selected); + + let label = document.createElement("h1"); + label.innerHTML = numbers[i]; + label.style.margin = "0px"; + label.style.position = "relative"; + label.style.top = "50%"; + label.style.transform = "translateY(-50%)"; + + cell.appendChild(label); + grid.appendChild(cell); + } +} + +function selected(){ + const id = this.getAttribute('id'); + attemp++; + document.querySelector("#attemp").innerHTML = "Attemps: " +attemp; + if(parseInt(id) == current+1){ + current++; + if(current == dimension){ + document.querySelector('.alert').hidden = false; + document.querySelector('.alert').innerHTML = "CONGRATULATIONS!!! YOU WIN IN " +attemp +" ATTEMPS AND " +time +" SECONDS"; + setTimeout(()=>{ + document.querySelector('.alert').hidden = true; + location.reload(); + }, 5000); + } + flashColor(this, "#4cd137"); + }else{ + flashColor(this, "#e74c3c"); + } +} + +function flashColor(element, color){ + element.style.backgroundColor = color; + setTimeout(() => { + element.style.backgroundColor = "#1abc9c"; + }, 100); +} + +function selectItem(){ + let option = document.getElementById('mySelect').value; + dimension = option*option; + numbers = []; + for (let i = 0; i < dimension; i++) { + numbers[i] = i+1; + } + numbers = numbers.sort(()=>Math.random()-0.5); + + let prop = (dimension>36)?80:100; + document.querySelector('.grid').style.width = "" +(option*prop) +"px"; + document.querySelector('.grid').style.height = "" +(option*prop) +"px"; + drawTable(dimension, prop); + resetValues(); +} + +function resetValues(){ + time = 0; + attemp = 0; + current = 0; + document.querySelector("#attemp").innerHTML = "Attemps: 0"; + document.querySelector('#time').innerHTML = "Time: 0s"; +} + +setInterval(()=>{ + document.querySelector('#time').innerHTML = "Time: " +time +"s"; + time++; +}, 1000); + +drawTable(9, 100); +document.getElementById('year').innerHTML = new Date().getFullYear(); \ No newline at end of file