├── README.md
├── prettierrc.json
├── index.html
├── .gitignore
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # project-insect-catch-game-d50
--------------------------------------------------------------------------------
/prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "tabWidth": 2,
4 | "useTabs": false,
5 | "semi": true,
6 | "singleQuote": true,
7 | "trailingComma": "all",
8 | "bracketSpacing": true,
9 | "jsxBracketSameLine": false,
10 | "arrowParens": "avoid",
11 | "proseWrap": "always"
12 | }
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Catch The Insect
8 |
9 |
10 |
11 |
Catch The Insect
12 |
13 |
14 |
15 |
16 |
What is your "favorite" insect?
17 |
18 | -
19 |
23 |
24 | -
25 |
32 |
33 | -
34 |
41 |
42 | -
43 |
50 |
51 |
52 |
55 |
Time: 00:00
56 | Score: 0
57 |
58 | Are you annnoyed yet?
59 | You are playing an impossible game!!
60 |
61 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | # public
90 |
91 | # vuepress build output
92 | .vuepress/dist
93 |
94 | # Serverless directories
95 | .serverless/
96 |
97 | # FuseBox cache
98 | .fusebox/
99 |
100 | # DynamoDB Local files
101 | .dynamodb/
102 |
103 | # TernJS port file
104 | .tern-port
105 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const screens = document.querySelectorAll(".screen");
2 | const choose_insect_btns = document.querySelectorAll(".choose-insect-btn");
3 | const start_btn = document.getElementById("start-btn");
4 | const game_container = document.getElementById("game-container");
5 | const timeEl = document.getElementById("time");
6 | const scoreEl = document.getElementById("score");
7 | const message = document.getElementById("message");
8 | let seconds = 0;
9 | let score = 0;
10 | let selected_insect = {};
11 |
12 | start_btn.addEventListener("click", () => screens[0].classList.add("up"));
13 |
14 | choose_insect_btns.forEach((btn) => {
15 | btn.addEventListener("click", () => {
16 | const img = btn.querySelector("img");
17 | const src = img.getAttribute("src");
18 | const alt = img.getAttribute("alt");
19 | selected_insect = { src, alt };
20 | screens[1].classList.add("up");
21 | setTimeout(createInsect, 1000);
22 | startGame();
23 | });
24 | });
25 |
26 | function startGame() {
27 | setInterval(increaseTime, 1000);
28 | }
29 |
30 | function increaseTime() {
31 | let m = Math.floor(seconds / 60);
32 | let s = seconds % 60;
33 | m = m < 10 ? `0${m}` : m;
34 | s = s < 10 ? `0${s}` : s;
35 | timeEl.innerHTML = `Time: ${m}:${s}`;
36 | seconds++;
37 | }
38 |
39 | function createInsect() {
40 | const insect = document.createElement("div");
41 | insect.classList.add("insect");
42 | const { x, y } = getRandomLocation();
43 | insect.style.top = `${y}px`;
44 | insect.style.left = `${x}px`;
45 | insect.innerHTML = `
`;
48 |
49 | insect.addEventListener("click", catchInsect);
50 |
51 | game_container.appendChild(insect);
52 | }
53 |
54 | function getRandomLocation() {
55 | const width = window.innerWidth;
56 | const height = window.innerHeight;
57 | const x = Math.random() * (width - 200) + 100;
58 | const y = Math.random() * (height - 200) + 100;
59 | return { x, y };
60 | }
61 |
62 | function catchInsect() {
63 | increaseScore();
64 | this.classList.add("caught");
65 | setTimeout(() => this.remove(), 2000);
66 | addInsects();
67 | }
68 |
69 | function addInsects() {
70 | setTimeout(createInsect, 1000);
71 | setTimeout(createInsect, 1500);
72 | }
73 |
74 | function increaseScore() {
75 | score++;
76 | if (score > 19) {
77 | message.classList.add("visible");
78 | }
79 | scoreEl.innerHTML = `Score: ${score}`;
80 | }
81 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #516dff;
9 | color: #fff;
10 | font-family: 'Press Start 2P', sans-serif;
11 | height: 100vh;
12 | overflow: hidden;
13 | margin: 0;
14 | text-align: center;
15 | }
16 |
17 | a {
18 | color: #fff;
19 | }
20 |
21 | h1 {
22 | line-height: 1.4;
23 | }
24 |
25 | .btn {
26 | border: 0;
27 | background-color: #fff;
28 | color: #516dff;
29 | padding: 15px 20px;
30 | font-family: inherit;
31 | cursor: pointer;
32 | }
33 |
34 | .btn:hover {
35 | opacity: 0.9;
36 | }
37 |
38 | .btn:focus {
39 | outline: 0;
40 | }
41 |
42 | .screen {
43 | display: flex;
44 | flex-direction: column;
45 | align-items: center;
46 | justify-content: center;
47 | height: 100vh;
48 | width: 100vw;
49 | transition: margin 0.5s ease-out;
50 | }
51 |
52 | .screen.up {
53 | margin-top: -100vh;
54 | }
55 |
56 | .insects-list {
57 | display: flex;
58 | flex-wrap: wrap;
59 | justify-content: center;
60 | list-style-type: none;
61 | padding: 0;
62 | }
63 |
64 | .insects-list li {
65 | margin: 10px;
66 | }
67 |
68 | .choose-insect-btn {
69 | background-color: transparent;
70 | border: 2px solid #fff;
71 | color: #fff;
72 | cursor: pointer;
73 | font-family: inherit;
74 | width: 150px;
75 | height: 150px;
76 | }
77 |
78 | .choose-insect-btn:hover {
79 | background-color: #fff;
80 | color: #516dff;
81 | }
82 |
83 | .choose-insect-btn:active {
84 | background-color: rgba(255, 255, 255, 0.7);
85 | }
86 |
87 | .choose-insect-btn img {
88 | width: 100px;
89 | height: 100px;
90 | object-fit: contain;
91 | }
92 |
93 | .game-container {
94 | position: relative;
95 | }
96 |
97 | .time,
98 | .score {
99 | position: absolute;
100 | top: 20px;
101 | }
102 |
103 | .time {
104 | left: 20px;
105 | }
106 |
107 | .score {
108 | right: 20px;
109 | }
110 |
111 | .message {
112 | line-height: 1.7;
113 | background-color: rgba(0, 0, 0, 0.5);
114 | width: 100%;
115 | padding: 20px;
116 | z-index: 100;
117 | text-align: center;
118 | opacity: 0;
119 | position: absolute;
120 | top: 0;
121 | left: 50%;
122 | transform: translate(-50%, -150%);
123 | transition: transform 0.4s ease-in;
124 | }
125 |
126 | .message.visible {
127 | transform: translate(-50%, 150%);
128 | opacity: 1;
129 | }
130 |
131 | .insect {
132 | cursor: pointer;
133 | display: flex;
134 | align-items: center;
135 | justify-content: center;
136 | width: 100px;
137 | height: 100px;
138 | position: absolute;
139 | transform: translate(-50%, -50%) scale(1);
140 | transition: transform 0.3s ease-in-out;
141 | }
142 |
143 | .insect.caught {
144 | transform: translate(-50%, -50%) scale(0);
145 | }
146 |
147 | .insect img {
148 | width: 100px;
149 | height: 100px;
150 | }
--------------------------------------------------------------------------------