mirror of
https://github.com/sergeyyarkov/js-game.git
synced 2026-10-11 02:09:15 +03:00
f
This commit is contained in:
commit
3550419f81
34
index.html
Normal file
34
index.html
Normal file
@ -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>
|
||||
100
index.js
Normal file
100
index.js
Normal file
@ -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);
|
||||
}
|
||||
136
styles.css
Normal file
136
styles.css
Normal file
@ -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);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user