Skip to content

Commit 995f1d2

Browse files
supermario-ai-8815supermario-ai-8815
authored
Add files via upload
1 parent fd2dfc6 commit 995f1d2

File tree

4 files changed

+271
-0
lines changed

4 files changed

+271
-0
lines changed

‎app.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
const startBtn = document.querySelector('#start')
2+
const screens = document.querySelectorAll('.screen')
3+
const timeList = document.querySelector('#time-list')
4+
const timeEl = document.querySelector('#time')
5+
const board = document.querySelector('#board')
6+
const colors = [
7+
'#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
8+
'#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9',
9+
'#F8C471', '#82E0AA', '#F1948A', '#AED6F1', '#E59866',
10+
'#A569BD', '#5499C7', '#58D68D', '#EB984E', '#DC7633',
11+
'#5DADE2', '#73C6B6', '#EDBB99', '#C39BD3', '#F9E79F'
12+
];
13+
14+
let time = 0
15+
let score = 0
16+
17+
startBtn.addEventListener('click', (event) => {
18+
event.preventDefault()
19+
screens[0].classList.add('up')
20+
})
21+
22+
timeList.addEventListener('click', event => {
23+
if (event.target.classList.contains('time-btn')) {
24+
time = parseInt(event.target.getAttribute('data-time'))
25+
screens[1].classList.add('up')
26+
startGame()
27+
}
28+
})
29+
30+
board.addEventListener('click', event => {
31+
if (event.target.classList.contains ('circle')) {
32+
score++
33+
event.target.remove()
34+
createRandomCircle()
35+
}
36+
})
37+
38+
39+
function startGame() {
40+
setInterval(decreaseTime, 1000)
41+
createRandomCircle()
42+
setTime (time)
43+
}
44+
45+
function decreaseTime () {
46+
if (time === 0) {
47+
finishGame()
48+
} else {
49+
let current = --time
50+
if (current < 10) {
51+
current = `0${current}`
52+
}
53+
setTime (current)
54+
}
55+
}
56+
57+
function setTime(value) {
58+
timeEl.innerHTML = `00:${value}`
59+
}
60+
61+
function finishGame() {
62+
timeEl.parentNode.classList.add('hide')
63+
board.innerHTML = `<h1>Cчет: <span class="primary">${score}</span></h1>`
64+
}
65+
66+
function createRandomCircle() {
67+
const color = getRandomColor()
68+
69+
const circle = document.createElement('div')
70+
const size = getRandomNumber(10, 60)
71+
circle.style.background = color
72+
73+
const {width, height} = board.getBoundingClientRect()
74+
const x = getRandomNumber(0, width - size)
75+
const y = getRandomNumber(0, height - size)
76+
circle.classList.add('circle')
77+
circle.style.width = `${size}px`
78+
circle.style.height = `${size}px`
79+
circle.style.top = `${y}px`
80+
circle.style.left = `${x}px`
81+
board.append(circle)
82+
}
83+
84+
function getRandomNumber (min, max) {
85+
return Math.round(Math.random() * (max - min) + min)
86+
}
87+
88+
function winTheGame () {
89+
function kill() {
90+
const circle = document.querySelector('.circle')
91+
if (circle) {
92+
circle.click()
93+
}
94+
}
95+
96+
setInterval(kill, 75)
97+
}
98+
99+
function getRandomColor () {
100+
return colors[Math.floor(Math.random() * colors.length)]
101+
}

‎index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="styles.css" />
7+
<title>Aim Training</title>
8+
</head>
9+
<body>
10+
<div class="screen">
11+
<h1>Aim Training</h1>
12+
<a href="#" class="start" id="start">Начать игру</a>
13+
</div>
14+
15+
<div class="screen">
16+
<h1>Выберите время</h1>
17+
<ul class="time-list" id="time-list">
18+
<li>
19+
<button class="time-btn" data-time="10">
20+
10 сек
21+
</button>
22+
</li>
23+
<li>
24+
<button class="time-btn" data-time="20">
25+
20 сек
26+
</button>
27+
</li>
28+
<li>
29+
<button class="time-btn" data-time="30">
30+
30 сек
31+
</button>
32+
</li>
33+
<li>
34+
<button class="time-btn" data-time="45">
35+
45 сек
36+
</button>
37+
</li>
38+
</ul>
39+
</div>
40+
41+
<div class="screen">
42+
<h3>Осталось <span id="time">00:00</span></h3>
43+
<div class="board" id="board"></div>
44+
</div>
45+
<script src="app.js"></script>
46+
</body>
47+
</html>

‎package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "marathon-urok-5",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.html",
6+
"scripts": {
7+
"start": "parcel index.html --open",
8+
"build": "parcel build index.html"
9+
},
10+
"dependencies": {
11+
"parcel-bundler": "^1.6.1"
12+
},
13+
"devDependencies": {
14+
"@babel/core": "7.2.0",
15+
"typescript": "4.4.4"
16+
},
17+
"resolutions": {
18+
"@babel/preset-env": "7.13.8"
19+
},
20+
"keywords": []
21+
}

‎styles.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@import url("https://fonts.googleapis.com/css?family=Khula&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
color: #fff;
9+
font-family: "Khula", sans-serif;
10+
height: 100vh;
11+
overflow: hidden;
12+
margin: 0;
13+
text-align: center;
14+
}
15+
16+
a {
17+
color: #fff;
18+
text-decoration: none;
19+
}
20+
21+
a:hover {
22+
color: #16d9e3;
23+
}
24+
25+
.start {
26+
font-size: 1.5rem;
27+
}
28+
29+
h1 {
30+
line-height: 1.4;
31+
font-size: 4rem;
32+
}
33+
34+
.screen {
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
justify-content: center;
39+
height: 100vh;
40+
width: 100vw;
41+
transition: margin 0.5s ease-out;
42+
background: linear-gradient(90deg, #29323c 0%, #485563 100%);
43+
}
44+
45+
.screen.up {
46+
margin-top: -100vh;
47+
}
48+
49+
.time-list {
50+
display: flex;
51+
flex-wrap: wrap;
52+
justify-content: center;
53+
list-style: none;
54+
padding: 0;
55+
}
56+
57+
.time-list li {
58+
margin: 10px;
59+
}
60+
61+
.time-btn {
62+
background-color: transparent;
63+
border: 2px solid #c0c0c0;
64+
color: #fff;
65+
cursor: pointer;
66+
font-family: inherit;
67+
padding: 0.5rem 1rem;
68+
font-size: 1.5rem;
69+
}
70+
71+
.time-btn:hover {
72+
border: 2px solid #16d9e3;
73+
color: #16d9e3;
74+
}
75+
76+
.hide {
77+
opacity: 0;
78+
}
79+
80+
.primary {
81+
color: #16d9e3;
82+
}
83+
84+
.board {
85+
display: flex;
86+
justify-content: center;
87+
align-items: center;
88+
position: relative;
89+
width: 500px;
90+
height: 500px;
91+
background: linear-gradient(118.38deg, #29323c -4.6%, #485563 200.44%);
92+
box-shadow: -8px -8px 20px #2a333d, 10px 7px 20px #475462;
93+
border-radius: 30px;
94+
overflow: hidden;
95+
}
96+
97+
.circle {
98+
background: linear-gradient(90deg, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
99+
position: absolute;
100+
border-radius: 50%;
101+
cursor: pointer;
102+
}

0 commit comments

Comments
 (0)