diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3e2a876 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "css.validate": true, + "editor.quickSuggestions": { + "other": true, + "comments": false, + "strings": true + } +} diff --git a/3-typing-game/typing-game-solution/index.html b/3-typing-game/typing-game-solution/index.html new file mode 100644 index 0000000..99d83d4 --- /dev/null +++ b/3-typing-game/typing-game-solution/index.html @@ -0,0 +1,14 @@ + + + + + + Paining game + + + +
+ + + + \ No newline at end of file diff --git a/3-typing-game/typing-game-solution/script.js b/3-typing-game/typing-game-solution/script.js new file mode 100644 index 0000000..8dae0a4 --- /dev/null +++ b/3-typing-game/typing-game-solution/script.js @@ -0,0 +1,76 @@ +const arr = [] +let r = 8, c = 8; +const container = document.getElementById('container'); + +for(var i = 0 ; i < 16 ; i++){ + const row = document.createElement('div'); + const rowArr = [] + for(var j = 0 ; j < 16 ; j++){ + const pixel = document.createElement('div'); + pixel.style.display = 'inline-block'; + pixel.style.width = '20px'; + pixel.style.height = '20px'; + pixel.style.margin = '1px'; + pixel.style.background = 'white'; + pixel.style.border = '1px solid black'; + row.appendChild(pixel); + rowArr.push(pixel); + } + arr.push(rowArr); + container.appendChild(row); +} + +focusOn(r,c); + +function changeColor(i, j){ + const pixel = arr[i][j]; + pixel.style.background = pixel.style.background === 'white' ? 'black' : 'white'; +} + +function focusOn(i, j){ + const pixel = arr[i][j]; + pixel.style.border = '1px dashed blue'; +} + +function unFocus(i, j){ + const pixel = arr[i][j]; + pixel.style.border = '1px solid black'; +} + +function reset(){ + arr.forEach(row => { + row.forEach(pixel => { + pixel.style.background = 'white'; + }) + }) + resetElement = document.getElementById('reset'); + resetElement.blur(); +} + +document.addEventListener('keydown', (e) => { + const key = e.key; + if (key === 'a' && c > 0){ + unFocus(r,c); + c--; + focusOn(r,c); + } + else if (key === 'd' && c < 15){ + unFocus(r,c); + c++; + focusOn(r,c); + } + else if (key === 's' && r < 15){ + unFocus(r,c); + r++; + focusOn(r,c); + } + else if (key === 'w' && r > 0){ + unFocus(r,c); + r--; + focusOn(r,c); + } + else if (key === 'Enter'){ + changeColor(r,c); + } +}); + diff --git a/3-typing-game/typing-game-solution/style.css b/3-typing-game/typing-game-solution/style.css new file mode 100644 index 0000000..7eae813 --- /dev/null +++ b/3-typing-game/typing-game-solution/style.css @@ -0,0 +1,9 @@ +.container{ + justify-items: center; + padding-top: 220px; +} + +#reset{ + margin-top: 30px; + margin-left: 48.55%; +} \ No newline at end of file