From 3550419f8115139dffa69489bac8309e749f7fa4 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sun, 13 Oct 2019 17:10:17 +0300 Subject: [PATCH] f --- index.html | 34 ++++++++++++++ index.js | 100 +++++++++++++++++++++++++++++++++++++++ styles.css | 136 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 270 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..489c522 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + + + JS Game + + + + +
+
+

Время игры: 5.0

+

Ваш результат:

+
+
+ + +
+
+
+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..706b108 --- /dev/null +++ b/index.js @@ -0,0 +1,100 @@ +const startBtn = document.querySelector('#start'), + game = document.querySelector('#game'), + timeText = document.querySelector('#time'), + result = document.querySelector('#result'), + timeHeader = document.querySelector('#time-header'), + resultHeader = document.querySelector('#result-header'), + gameTime = document.querySelector('#game-time'); + +let score = 0; +let isGameStarted = false; + +startBtn.addEventListener('click', startGame); +game.addEventListener('click', handleBoxClick); +gameTime.addEventListener('input', setGameTime); + +function show(el) { + el.classList.remove('hide'); +} + +function hide(el) { + el.classList.add('hide'); +} + +function startGame() { + score = 0; + setGameTime(); + gameTime.setAttribute('disabled', 'true'); + isGameStarted = true; + hide(startBtn); + game.style.backgroundColor = '#fff'; + + const interval = setInterval(() => { + let time = parseFloat(timeText.textContent); + if (time <= 0) { + clearInterval(interval); + endGame(); + } else { + timeText.textContent = (time - 0.1).toFixed(1); + } + }, 100); + + renderBox(); +} + +function setGameScore() { + result.textContent = score.toString(); +} + +function setGameTime() { + const time = +gameTime.value; + timeText.textContent = time.toFixed(1); + show(timeHeader); + hide(resultHeader); +} + +function endGame() { + isGameStarted = false; + setGameScore(); + gameTime.removeAttribute('disabled'); + show(startBtn); + game.innerHTML = ''; + game.style.backgroundColor = '#ccc'; + hide(timeHeader); + show(resultHeader); +} + +function handleBoxClick(e) { + if (!isGameStarted) { + return; + } + if (e.target.dataset.box) { + score++; + renderBox(); + } +} + +function renderBox() { + game.innerHTML = ''; + const box = document.createElement('div'), + boxSize = getRandom(30, 100), + gameSize = game.getBoundingClientRect(), + maxTop = gameSize.height - boxSize, + maxLeft = gameSize.width - boxSize; + + + + box.style.height = box.style.width = boxSize + 'px'; + box.style.position = 'absolute'; + box.style.backgroundColor = `rgb(${getRandom(0, 255)}, ${getRandom(0, 255)}, ${getRandom(0, 255)})`; + box.style.top = getRandom(0, maxTop) + 'px'; + box.style.left = getRandom(0, maxLeft) + 'px'; + box.style.cursor = 'pointer'; + box.setAttribute('data-box', 'true'); + + game.insertAdjacentElement('afterbegin', box); +} + +function getRandom(min, max) { + return Math.floor(Math.random() * (max - min) + min); +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8d26383 --- /dev/null +++ b/styles.css @@ -0,0 +1,136 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + outline: none; +} + +body { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + overflow: hidden; + background: linear-gradient(#CB356B, #BD3F32); +} + +.app { + background: #fff; + padding: 20px; + width: 600px; + margin: 0 auto; + box-shadow: 0 1px 30px 0 rgba(0,0,0,0.14), 0 0px 0px 0 rgba(0,0,0,.12), 0 0px 0px 0px rgba(0,0,0,.3); + border-radius: 10px; +} + +.app__header { + padding: 20px; + text-align: center; +} + +.app__content { + display: flex; + position: relative; + align-items: center; + justify-content: center; +} + +.app__footer { + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.input { + display: flex; + flex-direction: column; + margin-bottom: 10px; +} + +.input label { + display: inline-block; + max-width: 100%; + margin-bottom: 3px; + color: #acacac; + font-family: GothamPro,sans-serif; + font-size: .8rem; + font-weight: normal; + line-height: 1.2rem; +} + +.input input { + display: block; + width: 100%; + max-height: 2.8rem; + padding: .8rem 1rem; + font-size: inherit; + font-family: inherit; + font-weight: inherit; + line-height: 1.4; + color: #000; + background: #fff none; + border: 1px solid #999; + border-radius: 5px; +} + +.game { + position: relative; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #ccc; + background: #ccc; + min-height: 300px; + min-width: 300px; + max-width: 300px; + max-height: 300px; +} + +.hide { + display: none!important; +} + +.btn { + position: absolute; + z-index: 1; + display: inline-block; + padding: 1rem 2.3rem; + margin-bottom: 0; + font-weight: normal; + font-family: GothamPro, sans-serif; + font-size: 1rem; + line-height: 1.3rem; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + user-select: none; + background: #fad64e; + color: #3f3f3f; + border: none; + border-radius: 2.8rem; + transition: transform .2s ease-in-out,box-shadow .2s ease-in-out,-webkit-transform .2s ease-in-out,-webkit-box-shadow .2s ease-in-out; + will-change: transform; +} + +.btn:disabled { + background: #ccc!important; + border: 1px solid #ccc; + color: #000; + cursor: not-allowed; +} + +.btn:active { + transition: transform .1s ease-in-out,box-shadow .1s ease-in-out!important; + transform: none!important; + box-shadow: none!important; +} + +.btn:hover { + box-shadow: 0 6px 16px 0 rgba(0,0,0,.2); + transform: translateY(-1px); +} \ No newline at end of file