Skip to content

Commit 9828dc7

Browse files
coderKrysiocoderKrysio
committed
made some changes
0 parents  commit 9828dc7

14 files changed

+657
-0
lines changed

‎audio/bgm.mp3

2.73 MB
Binary file not shown.

‎audio/drop.mp3

5.93 KB
Binary file not shown.

‎audio/gameover.mp3

22.4 KB
Binary file not shown.

‎images/backgroundColorFall.png

20.2 KB
Loading

‎images/icon.png

1.55 KB
Loading

‎images/left-arrow-ui.png

55 KB
Loading

‎images/left-arrow.png

3.1 KB
Loading

‎images/long_metal_spike.png

4.67 KB
Loading

‎images/platform_single.png

6.66 KB
Loading

‎images/right-arrow-ui.png

54.7 KB
Loading

‎images/right-arrow.png

2.54 KB
Loading

‎index.html

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!--All images and audio are not my property. All credits to its official owner-->
2+
<!--Sources of image: Flaticon, Opengameart
3+
Souces of audio: Opengameart-->
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<title>Falling Game</title>
11+
<!--Website icon-->
12+
<link rel="shortcut icon" type="image/png" href="icon.png">
13+
14+
<!--Tailwind css and style sheet-->
15+
<link rel="stylesheet" href="style.css">
16+
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"/>
17+
18+
<!--Google Fonts-->
19+
<link rel="preconnect" href="https://fonts.googleapis.com">
20+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
21+
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
22+
<link href="https://fonts.googleapis.com/css2?family=Genos:wght@500&display=swap" rel="stylesheet">
23+
<link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
24+
<link href="https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap" rel="stylesheet">
25+
<link href="https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap" rel="stylesheet">
26+
</head>
27+
<body>
28+
<div id="holder">
29+
<!-- adding a UI panel to display the score and the start button -->
30+
<div class="absolute inset-0 flex justify-center items-center z-10" id="modalEl">
31+
<div class="max-w-md w-full p-6 text-center" style="background-color: brown;">
32+
33+
<h1 class="text-4xl font-bold select-none" id="title">F a l l i n g&nbsp;&nbsp;B a l l</h1>
34+
35+
<div class="py-1 text-lg select-none" id="instruction">
36+
<p>Run away from the spooky-spikes <br> How to Play?</p>
37+
38+
<div class="flex items-center justify-center">
39+
<img src="left-arrow.png" alt="left Arrow Key" width="15">
40+
41+
<p>&nbsp;: Press left-arrow key to move left</p>
42+
</div>
43+
44+
<div class="flex items-center justify-center">
45+
<img src="right-arrow.png" alt="Right Arrow Key" width="15">
46+
47+
<p>&nbsp;: Press right-arrow key to move right</p>
48+
</div>
49+
50+
<br>
51+
<p>Click on 'Use Touchpad' to use the onscreen controls</p>
52+
</div>
53+
54+
<p class="text-4xl font-bold select-none" id="gameovertxt">G a m e&nbsp;&nbsp;O v e r</p>
55+
56+
<h1 class="text-4xl font-bold select-none" id="bigScoreEl">0</h1>
57+
<p class="text-m text-gray-600 mb-4" id="textScoreEl">Your Score</p>
58+
59+
<h1 class="text-4xl font-bold leading-none" id="bigHighScoreEl" style="font-family: 'Bungee Inline', cursive; color: khaki;"></h1>
60+
<p class="text-m text-gray-600 mb-4" style="font-family: 'Genos', sans-serif; color: cornsilk;">High Score</p>
61+
62+
<p class="text-3xl text-gray-600 mb-4" id="newHighScoreText">!! New High Score !!</p>
63+
64+
<div>
65+
<button class="w-full py-3 rounded-full text-m select-none focus:outline-none" id="startGameBtn" style="font-family: 'Aldrich', sans-serif; background-color: gold; color: brown;">S t a r t</button>
66+
</div>
67+
68+
<div>
69+
<button class="w-full rounded-full text-m select-none py-2 mt-2 focus:outline-none" id="instBtn">I n s t r u c t i o n s</button>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<!--Game board-->
75+
<div id="gameboard">
76+
<div class="grid grid-cols-2 grid-rows-1">
77+
<div class="text-m select-none" id="scoreDisplay">
78+
<span>Score: </span>
79+
<span id="scoreEl">0</span>
80+
</div>
81+
82+
<div class="text-right text-m select-none" id="highscoreDisplay">
83+
<span>Best: </span>
84+
<span id="highscoreEl"></span>
85+
</div>
86+
</div>
87+
88+
<div class="w-400 h-511" id="board">
89+
<div id="spikes"></div>
90+
<div id="game">
91+
<div id="character"></div>
92+
</div>
93+
<div id="platform"></div>
94+
</div>
95+
96+
<div class="flex items-center justify-center">
97+
<button class="text-center text-lg m-auto select-none focus:outline-none" id="usetouchpad">+ Use Touchpad</button>
98+
</div>
99+
100+
<div class="w-200 h-20 grid grid-cols-2 grid-rows-1 gap-x-32 content-center" id="touchpad" style="visibility: hidden;">
101+
<button class="m-auto mr-0 w-20 select-none focus:outline-none" id="left">
102+
<img src="left-arrow-ui.png" alt="left-arrow">
103+
</button>
104+
105+
<button class="m-auto ml-0 w-20 select-none focus:outline-none" id="right">
106+
<img src="right-arrow-ui.png" alt="right-arrow">
107+
</button>
108+
</div>
109+
</div>
110+
</div>
111+
112+
<script src="script.js"></script>
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)