-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAimMaster.html
208 lines (193 loc) · 7.25 KB
/
AimMaster.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AimMaster</title>
<style>
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#dashboard {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 20px;
z-index: 2;
}
#game-area-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#game-area {
position: relative;
width: 500px;
height: 500px;
background-color: #ffffff;
border: 2px solid #000;
}
.box {
position: absolute;
background-color: #3498db;
cursor: pointer;
}
#score {
font-size: 24px;
font-weight: bold;
}
#countdown {
font-size: 24px;
font-weight: bold;
margin-top: 10px;
display: none;
}
#preview-box {
width: 50px;
height: 50px;
background-color: #3498db;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="dashboard">
<div>
<label for="time-input">Enter time (seconds): </label>
<input type="number" id="time-input" min="1" />
</div>
<div>
<label for="color-input">Choose box color: </label>
<input type="color" id="color-input" value="#3498db" />
</div>
<div>
<label for="shape-input">Choose shape (0 for circle, 100 for square): </label>
<input type="range" id="shape-input" min="0" max="100" value="100" />
</div>
<div>
<label for="size-input">Choose size: </label>
<input type="range" id="size-input" min="20" max="100" value="50" />
</div>
<div>
<label for="width-input">Game area width: </label>
<input type="range" id="width-input" min="200" max="1200" value="500" />
</div>
<div>
<label for="height-input">Game area height: </label>
<input type="range" id="height-input" min="200" max="1200" value="500" />
</div>
<button id="start-button">Start</button>
<div id="score">Score: 0</div>
<div id="preview-box"></div>
</div>
<div id="game-area-container">
<div id="game-area"></div>
</div>
<div id="countdown" style="position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;">Time left: 0</div>
<script>
const gameArea = document.getElementById('game-area');
const scoreDisplay = document.getElementById('score');
const timeInput = document.getElementById('time-input');
const colorInput = document.getElementById('color-input');
const shapeInput = document.getElementById('shape-input');
const sizeInput = document.getElementById('size-input');
const widthInput = document.getElementById('width-input');
const heightInput = document.getElementById('height-input');
const startButton = document.getElementById('start-button');
const countdownDisplay = document.getElementById('countdown');
const previewBox = document.getElementById('preview-box');
const dashboard = document.getElementById('dashboard');
let score = 0;
let countdown;
function updatePreviewBox() {
previewBox.style.backgroundColor = colorInput.value;
previewBox.style.width = `${sizeInput.value}px`;
previewBox.style.height = `${sizeInput.value}px`;
previewBox.style.borderRadius = `${shapeInput.value}%`;
}
function updateGameAreaSize() {
gameArea.style.width = `${widthInput.value}px`;
gameArea.style.height = `${heightInput.value}px`;
}
function spawnBox() {
// Create a new box
const box = document.createElement('div');
box.classList.add('box');
box.style.backgroundColor = colorInput.value;
// Set random position within game area
const boxSize = parseInt(sizeInput.value);
const maxX = gameArea.clientWidth - boxSize;
const maxY = gameArea.clientHeight - boxSize;
const x = Math.floor(Math.random() * maxX);
const y = Math.floor(Math.random() * maxY);
box.style.left = `${x}px`;
box.style.top = `${y}px`;
box.style.width = `${boxSize}px`;
box.style.height = `${boxSize}px`;
box.style.borderRadius = `${shapeInput.value}%`;
// Add event listener to remove the box on click
box.addEventListener('click', () => {
score++;
scoreDisplay.textContent = `Score: ${score}`;
gameArea.removeChild(box);
spawnBox();
});
// Add box to the game area
gameArea.appendChild(box);
}
function startGame() {
// Hide dashboard during the game
dashboard.style.display = 'none';
// Reset score and countdown
score = 0;
scoreDisplay.textContent = `Score: ${score}`;
const time = parseInt(timeInput.value);
if (isNaN(time) || time <= 0) {
alert('Please enter a valid time in seconds.');
dashboard.style.display = 'flex';
return;
}
countdownDisplay.style.display = 'block';
countdownDisplay.textContent = `Time left: ${time}`;
let timeLeft = time;
// Start countdown
countdown = setInterval(() => {
timeLeft--;
countdownDisplay.textContent = `Time left: ${timeLeft}`;
if (timeLeft <= 0) {
clearInterval(countdown);
gameArea.innerHTML = '';
alert(`Game over! Your final score is: ${score}`);
// Show dashboard after the game ends
dashboard.style.display = 'flex';
countdownDisplay.style.display = 'block';
}
}, 1000);
// Start spawning boxes
gameArea.innerHTML = '';
spawnBox();
}
colorInput.addEventListener('input', updatePreviewBox);
shapeInput.addEventListener('input', updatePreviewBox);
sizeInput.addEventListener('input', updatePreviewBox);
widthInput.addEventListener('input', updateGameAreaSize);
heightInput.addEventListener('input', updateGameAreaSize);
startButton.addEventListener('click', startGame);
// Initialize preview box and game area size
updatePreviewBox();
updateGameAreaSize();
</script>
</body>
</html>