-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
319 lines (312 loc) · 12.9 KB
/
index.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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<style>
/* Enhancements for Typography */
body, html {
font-family: 'Nunito', sans-serif;
line-height: 1.6;
color: #333;
background: #f4f4f4;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 1rem;
font-family: 'Roboto', sans-serif;
}
p {
margin-bottom: 1rem;
}
/* Improved Color Scheme */
:root {
--primary-color: #0056b3;
--secondary-color: #6c757d;
--success-color: #28a745;
--info-color: #17a2b8;
--warning-color: #ffc107;
--danger-color: #dc3545;
--light-color: #f8f9fa;
--dark-color: #343a40;
}
/* Responsive Design */
@media (max-width: 768px) {
.row {
flex-direction: column;
}
.col, .col-md-6 {
flex-basis: 100%;
}
}
/* Interactive Elements */
.btn {
background: var(--primary-color);
color: #696969;
border: lightblue;
padding: 0.75rem 1.5rem;
border-radius: 0.3rem;
cursor: pointer;
transition: 0.3s ease;
}
.btn:hover, .btn:focus {
background: darken(var(--primary-color), 20%);
}
/* Enhancements for Forms */
.input {
border-radius: 0.3rem;
border: 1px solid #ccc;
padding: 0.75rem;
}
.parallax {
/* The image used */
background-image: url("https://github.com/Unlim8ted-Studio-Productions/Square-Pixels/blob/main/src/Recources/program%20recources/Screenshot%202023-09-21%20181742.png?raw=true");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: repeat;
background-size: cover;
}
.parallax-container {
overflow: hidden;
position: relative;
height: auto; /* Adjust based on your preference */
margin: auto; /* Space out images */
padding: 500;
}
.parallax-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform 0.2s ease-out; /* Smooth transition for scaling */
}
/* Visual Enhancements */
.card {
background: #ffffff;
border: 1px solid #ddd;
border-radius: 0.3rem;
padding: 1rem;
margin-bottom: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Utility Classes */
.text-center {
text-align: center;
}
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
/* Additional Enhancements */
.container {
max-width: 1140px;
margin: auto;
padding: 0 15px;
}
/* Make badge more distinct */
.badge {
font-weight: bold;
background: var(--dark-color);
}
/* Ensure images in content are responsive */
img {
max-width: 100%;
height: auto;
}
</style>
<div class="parallax"></div>
<h1 id="square-pixel">Square Pixel</h1>
<script>
// JavaScript to scale the background image on scroll
var scrollPosition = window.pageYOffset;
var backgroundScale = 50 + scrollPosition / 10; // Adjust scaling factor here
document.querySelector('.parallax').style.backgroundSize = backgroundScale + "%";
window.addEventListener('scroll', function() {
var scrollPosition = window.pageYOffset;
var backgroundScale = 50 + scrollPosition / 10; // Adjust scaling factor here
document.querySelector('.parallax').style.backgroundSize = backgroundScale + "%";
});
</script>
<p>Welcome to Square Pixel!</p>
<p><button class='.btn'href="https://github.com/GusInfiniteLinesOfCode/Square-Pixels/graphs/contributors"><img
src="https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge"
alt="Contributors"></button>
<button class='.btn' href="https://github.com/GusInfiniteLinesOfCode/Square-Pixels/network/members"><img
src="https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge"
alt="Forks"></button>
<button class='.btn' href="https://github.com/GusInfiniteLinesOfCode/Square-Pixels/stargazers"><img
src="https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge"
alt="Stargazers"></button>
<button class='.btn' href="https://github.com/GusInfiniteLinesOfCode/Square-Pixels/issues"><img
src="https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge"
alt="Issues"></button>
<button class='.btn' href="https://github.com/GusInfiniteLinesOfCode/Square-Pixela/blob/main/LICENSE.md"><img
src="https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge"
alt="MIT License"></button>
<button class='.btn' href="(javascript:%28function%28%29%7Balert%28%22Nothing%20Here%20Yet%22%29%7D%29%28%29%3B)"><img
src="https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555"
alt="LinkedIn"></button>
</p>
<p>totally working stats bar definitly not broken for some reason</p>
<h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#how-to-play">How to Play</a></li>
<li><a href="#contribution">Contribution</a></li>
<li><a href="#license">License</a></li>
</ul>
<h2 id="introduction">Introduction</h2>
<p>Welcome to our pixelated sandbox adventure! Inspired by the beloved classic Terraria, this 2D game offers an exciting
blend of exploration, crafting, and action-packed adventures. Immerse yourself in a captivating pixel world with
endless possibilities!
</p>
<h2 id="features">Features</h2>
<ul>
<li><strong>Expansive World:</strong> Embark on a journey through a dynamically generated 2D world teeming with
diverse biomes, mysterious dungeons, and valuable treasures.
</li>
<li><strong>Craft and Construct:</strong> Gather resources, master the art of crafting, and construct your dream
structures.
</li>
<li><strong>Monstrous Challenges:</strong> Confront a variety of menacing creatures and formidable bosses as you
progress through your adventure.
</li>
<li><strong>Multiplayer Magic:</strong> Invite friends to join you in the sandbox, either locally or online, for
cooperative fun.
</li>
<li><strong>Modder's Paradise:</strong> Enhance and expand your gaming experience with robust modding support.
</li>
<li><strong>Day and Night:</strong> Experience the ebb and flow of day and night, influencing your gameplay and
encounters.
</li>
</ul>
<h2 id="getting-started">Getting Started</h2>
<p>To begin your adventure, follow these steps:</p>
<ol>
<li>
<p>Clone the game repository to your local machine:</p>
<pre><code class="lang-bash">git <span class="hljs-keyword">clone</span> <span class="hljs-title">https</span>://github.com/Gus<span class="hljs-literal">Inf</span>initeLinesOfCode/Square-Pixels.git
</code></pre>
</li>
<li>
<p>Install any necessary dependencies.</p>
<pre><code class="lang-bash">pip <span class="hljs-keyword">install</span> pygame pillow pymovie pyperclip playfab captcha astor
</code></pre>
</li>
<li>
<p>Launch the game executable or script.</p>
</li>
</ol>
<p>For detailed installation instructions, consult the Installation Guide.</p>
<p> You can also download the latest executable version from the releases page. For help with the built version of the
code you can contact our support team at [email protected].
</p>
<h2 id="how-to-play">How to Play</h2>
<p><strong>Controls:</strong></p>
<ul>
<li>Move your character using the <strong>WASD</strong> keys or arrow keys.</li>
<li>Open your inventory with the <strong>E</strong> key.</li>
<li>Close your inventory with any button.</li>
<li>Right-click in your inventory to create an item.</li>
<li>Left-click to place an item in an inventory slot.</li>
<li>Left-click on blocks to destroy them.</li>
</ul>
<p><strong>Objective:</strong></p>
<ol>
<li>
<p>Launch the game and create a new character.</p>
</li>
<li>
<p>Begin your adventure by exploring the world, gathering resources, and crafting items.</p>
</li>
<li>
<p>Construct buildings and structures to fortify your position and store your loot.</p>
</li>
<li>
<p>Defend yourself against monsters and powerful bosses that emerge during your journey.</p>
</li>
<li>
<p>Survive and thrive in this dynamic world, mastering the art of survival and adventure.</p>
</li>
</ol>
<p>For comprehensive gameplay instructions and advanced tips, please refer to the User Manual.</p>
<h2 id="contribution">Contribution</h2>
<p>We welcome contributions to our project! If you wish to contribute, please adhere to the guidelines provided in our
Contribution Guide. We greatly appreciate bug reports, feature requests, and pull requests.
</p>
<h2 id="todo">ToDo</h2>
<ul>
<li>[ ] Fix collision handling</li>
<li>[ ] add pause screen</li>
<li>[x] add darkness wherever the player has not yet explored and a map</li>
<li>[ ] Finish settings</li>
<li>[ ] Add more world options</li>
<li>[ ] add saving/loading game</li>
<li>[ ] add the code to load new chunks</li>
<li>[ ] Add pre-built characters</li>
<li>[ ] Add item drop and implement with inventory</li>
<li>[ ] Add crafting and item placing</li>
<li>[ ] Add tools</li>
<li>[ ] Add the ability to drop items</li>
<li>[ ] Implement multiplayer</li>
<li>[ ] Implement friending</li>
</ul>
<h2 id="game-screenshots">game screenshots</h2>
<div class="parallax-container">
<img src="https://github.com/GusInfiniteLinesOfCode/Square-Pixels/blob/main/Screenshot%202023-09-22%20165106.png" class="parallax-image" alt="Picture of lighting at night.">
</div>
<div class="parallax-container">
<img src="https://github.com/GusInfiniteLinesOfCode/Terraria_styled_game/assets/101442959/7458632a-b966-46ca-a98c-60db0b508d55" class="parallax-image" alt="Landscape generation">
</div>
<div class="parallax-container">
<img src="https://github.com/Unlim8ted-Studio-Productions/Square-Pixels/assets/138305056/2fc9957c-76ef-4ab4-b819-1cd0614d2bcc" class="parallax-image" alt="Inventory">
</div>
<div class="parallax-container">
<img src="https://github.com/GusInfiniteLinesOfCode/Terraria_styled_game/assets/101442959/60913d36-27a7-488d-8ccb-946445185283" class="parallax-image" alt="Procedural Generation">
</div>
<div class="parallax-container">
<img src="https://private-user-images.githubusercontent.com/138305056/309907767-2efa985e-19bc-4d97-abc8-2336d5e878dd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDk1ODgyODksIm5iZiI6MTcwOTU4Nzk4OSwicGF0aCI6Ii8xMzgzMDUwNTYvMzA5OTA3NzY3LTJlZmE5ODVlLTE5YmMtNGQ5Ny1hYmM4LTIzMzZkNWU4NzhkZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMzA0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDMwNFQyMTMzMDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03Y2ViMGNiMDkxZjNhNzhiYWQ2YzY1OTlhMGJlODQ0Yzk2Mjk2ZDA1NTk2MWY3OThhYjBhZjJmMjBkYmJjN2JiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.UgR33q8ZUc9fjyUKGXqSWo-essxD0DRyMmax7KibdDg" class="parallax-image" alt="Character Creator">
</div>
<script>
a.export();
function a(){alert('Before you go, make sure to star this repository.');};</script>
<script>
if (confirm('Make sure to star this repository.')){alert('thanks');}else{alert('dont worry...')}
window.addEventListener('beforeunload', function(event) {
event.preventDefault();
a();
event.returnValue = 'Before you go, make sure to star this repository.';
return event.returnValue;
});
</script>
<script>
document.addEventListener('scroll', function() {
document.querySelectorAll('.parallax-container').forEach(container => {
const image = container.querySelector('.parallax-image');
const scrollPosition = window.pageYOffset;
const containerRect = container.getBoundingClientRect();
// Calculate the percentage of the container in view
const inViewPercentage = Math.max(0, Math.min(1, (window.innerHeight - containerRect.top) / window.innerHeight));
// Scale the image based on inViewPercentage
// Adjust the scale factor as needed
const scale = -1 + (0.5 * inViewPercentage); // Starting scale is 1, scales up to 1.5
const paddingValue = (5 * inViewPercentage); // Adjust as needed
image.style.padding = `${paddingValue}px`;
image.style.transform = `scale(${-scale})`;
// Optional: Adjust opacity based on inViewPercentage for a fade effect
// image.style.opacity = inViewPercentage;
});
});
</script>
<h2 id="license">License</h2>
<p>This project is distributed under a MODIFIED CREATIVE COMMONS ATTRIBUTION-NONCOMMERCIAL 3.0 LICENSE. Refer to the
LICENSE file for specifics.
</p>
<p>Embark on a thrilling adventure in the realm of our pixelated sandbox game! Should you encounter any problems or have
ideas for improvement, kindly share your feedback with us. Enjoy your gaming journey!
</p>