Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 63ff059

Browse files
JavaScript Random Shape Clicker Game
1 parent be82cdb commit 63ff059

File tree

3 files changed

+81
-0
lines changed

3 files changed

+81
-0
lines changed

‎87. Shape Clicker Game/app.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const game = { timer: 0, start: null };
2+
3+
// Create Message Element
4+
const message = document.createElement("div");
5+
message.classList.add("message");
6+
message.textContent = "Press To Start";
7+
document.body.prepend(message);
8+
9+
// Create a Box
10+
const box = document.createElement("div");
11+
box.classList.add("box");
12+
13+
const output = document.querySelector(".output");
14+
output.append(box);
15+
16+
box.addEventListener("click", () => {
17+
box.textContent = "";
18+
box.style.display = "none";
19+
game.timer = setTimeout(addBox, randomNumbers(3000));
20+
if (!game.start) {
21+
message.textContent = "Watch for element and click it";
22+
} else {
23+
const current = new Date().getTime();
24+
const duration = (current - game.start) / 1000;
25+
message.textContent = `It took ${duration} seconds to click`;
26+
}
27+
});
28+
29+
function randomNumbers(max) {
30+
return Math.floor(Math.random() * max);
31+
}
32+
33+
function addBox() {
34+
game.start = new Date().getTime();
35+
const container = output.getBoundingClientRect();
36+
const dim = [randomNumbers(50) + 20, randomNumbers(50) + 20];
37+
box.style.display = "block";
38+
box.style.width = `${dim[0]}px`;
39+
box.style.height = `${dim[1]}px`;
40+
box.style.backgroundColor = "#" + Math.random().toString(16).substr(-6);
41+
box.style.left = randomNumbers(container.width - dim[0]) + "px";
42+
box.style.top = randomNumbers(container.height - dim[1]) + "px";
43+
box.style.borderRadius = randomNumbers(50) + "%";
44+
}

‎87. Shape Clicker Game/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=`" />
6+
<title>Shape Clicker Game</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="output"></div>
11+
12+
<script src="app.js"></script>
13+
</body>
14+
</html>

‎87. Shape Clicker Game/style.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
body {
2+
background: black;
3+
color: white;
4+
}
5+
6+
/* JavaScript */
7+
.message {
8+
text-align: center;
9+
padding: 10px;
10+
font-size: 2rem;
11+
}
12+
13+
.box {
14+
width: 100px;
15+
height: 100px;
16+
position: relative;
17+
top: 50px;
18+
left: 20%;
19+
background-color: cornsilk;
20+
border: 1px solid black;
21+
font-size: 1.5em;
22+
line-height: 100px;
23+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /