f

index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="styles.css">
+  <title>JS Game</title>
+</head>
+<body>
+
+
+  <div class="app">
+    <div class="app__header">
+      <h1 id="time-header">Время игры: <span id="time">5.0</span></h1>
+      <h1 id="result-header" class="hide">Ваш результат: <span id="result"></span></h1>
+    </div>
+    <div class="app__content">
+      <button class="btn" id="start">Начать</button>
+
+      <div class="game" id="game"></div>
+    </div>
+    <div class="app__footer">
+      <div class="input">
+        <label for="game-time">Время игры, (сек)</label>
+        <input type="number" id="game-time" min="5" step="1" value="5">
+      </div>
+    </div>
+  </div>
+  
+
+  <script src="index.js"></script>
+</body>
+</html>

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);
+}

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);
+}