-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
447 lines (431 loc) · 23 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
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>3DS Web stuff - home</title>
<!-- DO NOT DELETE -->
<meta name="google-site-verification" content="CEp8re5xPxShHGl3Z04NXVKOKE-OgXujmu6jYVBIXqE" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="styles/global.css">
<link rel="stylesheet" href="styles/home.css">
<meta content="3DS Web Stuff" property="og:title" />
<meta content="A collection of games and other stuff designed specifically for the Nintendo 3DS browser" property="og:description" />
<meta name="description" content="A collection of games and other stuff designed specifically for the Nintendo 3DS browser">
<script src="scripts/global.js" type="text/javascript"></script>
<script src="scripts/lib/anim.js" type="text/javascript"></script>
<script src="scripts/home.js" type="text/javascript"></script>
</head>
<body>
<div id="screens">
<div id="top-screen">
<div id="title-zone">
<h1>3DS Web stuff</h1>
<p>by Wolfyxon</p>
</div>
<p>
A little collection of games and other stuff designed for the Nintendo 3DS online browser.
</p>
<h4>Gamepad controls</h4>
<table id="controls">
<tr>
<td></td><td>Previous tab</td> <td></td><td>Next tab</td>
</tr>
<tr>
<td></td><td>Scroll up</td> <td></td><td>Scroll down</td>
</tr>
</table>
<span id="pet" class="animated"></span>
</div>
<div id="bottom-screen">
<div id="tab-btns">
<span data-id="0">Games</span>
<span data-id="1">Other</span>
<span data-id="2">News</span>
<span data-id="3">About</span>
</div>
<div id="tabs">
<div id="tab-games">
<div class="app-list">
<a href="games/pigeon">
<img class="app-icon" src="games/pigeon/icon.png" alt="Pigeon icon">
<div class="app-text">
<p class="app-name">Pigeon</p>
<p class="app-description">Fly between pipes</p>
</div>
</a>
<a href="games/jumpy">
<img class="app-icon" src="games/jumpy/icon.png" alt="Jumpy icon">
<div class="app-text">
<p class="app-name">Jumpy</p>
<p class="app-description">Jump and avoid spikes</p>
</div>
</a>
<a href="games/snake">
<img class="app-icon" src="games/snake/icon.png" alt="Snake icon">
<div class="app-text">
<p class="app-name">Snake</p>
<p class="app-description">Eat apples to grow</p>
<!-- <span class="tag tag-dsi"></span> -->
</div>
</a>
<a href="games/minesweeper">
<img class="app-icon" src="games/minesweeper/img/bomb.png" alt="Minesweeper icon">
<div class="app-text">
<p class="app-name">MineSweeper</p>
<p class="app-description">Uncover tiles and watch for the mines</p>
<span class="tag tag-dsi"></span>
</div>
</a>
<a href="games/breakout">
<img class="app-icon" src="games/breakout/icon.png" alt="Breakout icon">
<div class="app-text">
<p class="app-name">Breakout</p>
<p class="app-description">Destroy blocks and keep the ball up</p>
<span class="tag tag-early-access"></span>
</div>
</a>
<a href="games/jetfighter">
<img class="app-icon" src="games/jetfighter/img/jet.png" alt="JetFighter icon">
<div class="app-text">
<p class="app-name">JetFighter</p>
<p class="app-description">Take down the evil helicopters!</p>
<span class="tag tag-early-access"></span>
</div>
</a>
<a href="games/pong">
<img class="app-icon" src="games/pong/icon.png" alt="Pong icon">
<div class="app-text">
<p class="app-name">Pong!</p>
<p class="app-description">Play ping-pong with an AI.</p>
</div>
</a>
<a href="games/ttt">
<img class="app-icon" src="games/ttt/icon.png" alt="Tic-Tac-Toe icon">
<div class="app-text">
<p class="app-name">Tic-Tac-Toe</p>
<p class="app-description">Place X and O to make a pattern.</p>
<span class="tag tag-dsi"></span>
</div>
</a>
<a href="games/sudoku">
<img class="app-icon" src="games/sudoku/icon.png" alt="Sudoku icon">
<div class="app-text">
<p class="app-name">Sudoku</p>
<p class="app-description">Don't repeat numbers!</p>
<span class="tag tag-dsi"></span>
</div>
</a>
<a href="games/connect4">
<img class="app-icon" src="games/connect4/icon.png" alt="Connect 4 icon">
<div class="app-text">
<p class="app-name">Connect 4</p>
<p class="app-description">Connect 4 points</p>
<span class="tag tag-dsi"></span>
</div>
</a>
<a href="games/hangman">
<img class="app-icon" src="games/hangman/icon.png" alt="Hangman icon">
<div class="app-text">
<p class="app-name">Hangman</p>
<p class="app-description">Guess the word</p>
<span class="tag tag-dsi"></span>
</div>
</a>
<a href="games/picross">
<img class="app-icon" src="" alt="Picross icon">
<div class="app-text">
<p class="app-name">Picross</p>
<p class="app-description">Fill the cells</p>
<span class="tag tag-early-access"></span>
</div>
</a>
<a href="games/simon">
<img class="app-icon" src="" alt="Simon icon">
<div class="app-text">
<p class="app-name">Simon</p>
<p class="app-description">Remember the lights</p>
<span class="tag tag-dsi"></span>
</div>
</a>
</div>
</div>
<div id="tab-other">
<div class="app-list">
<a href="other/calculator">
<img class="app-icon" src="other/calculator/icon.png" alt="Calculator icon">
<div class="app-text">
<p class="app-name">Calculator</p>
<p class="app-description">Just a calculator</p>
<span class="tag tag-dsi"></span>
</div>
</a>
<a href="other/brush">
<img class="app-icon" src="other/brush/icon.png" alt="Brush icon">
<div class="app-text">
<p class="app-name">Brush</p>
<p class="app-description">A drawing app</p>
<span class="tag tag-early-access"></span>
</div>
</a>
<a href="other/hack">
<img class="app-icon" src="other/hack/icon.png" alt="Hack icon">
<div class="app-text">
<p class="app-name">Hack</p>
<p class="app-description">Totally real hacking interface</p>
</div>
</a>
<a href="other/timer">
<img class="app-icon" src="img/test.png" alt="Timer icon">
<div class="app-text">
<p class="app-name">Timer</p>
<p class="app-description">Measure time</p>
</div>
</a>
<a href="other/coder/">
<img class="app-icon" src="other/coder/icon.png" alt="Coder">
<div class="app-text">
<p class="app-name">Coder</p>
<p class="app-description">Turn text into encoded images</p>
<span class="tag tag-dsi"></span>
</div>
</a>
<a href="other/unitConverter">
<img class="app-icon" src="img/test.png" alt="Unit converter icon">
<div class="app-text">
<p class="app-name">Unit converter</p>
<p class="app-description">Convert between units</p>
</div>
</a>
<a href="other/rand">
<img class="app-icon" src="img/test.png" alt="Rand icon">
<div class="app-text">
<p class="app-name">Random number generator</p>
<p class="app-description">Generate random numbers in a range</p>
<span class="tag tag-dsi"></span>
</div>
</a>
<a href="other/debug">
<img class="app-icon" src="img/test.png" alt="Debug icon">
<div class="app-text">
<p class="app-name">Debug</p>
<p class="app-description">Some testing</p>
</div>
</a>
<a href="other/font">
<img class="app-icon" src="img/test.png" alt="Font test icon">
<div class="app-text">
<p class="app-name">Font test</p>
<p class="app-description">3DS font test</p>
<span class="tag tag-dsi"></span>
</div>
</a>
<a href="other/elmGameTest">
<img class="app-icon" src="img/test.png" alt="Element game test icon">
<div class="app-text">
<p class="app-name">elementGame.js</p>
<p class="app-description">elementGame.js library test</p>
</div>
</a>
</div>
</div>
<div id="tab-news">
<article>
<h3>19.08.2024</h3>
<p>
<a href="games/breakout/">Breakout</a> is finally playable on Old 3DS thanks to magiczocker10!
</p>
</article>
<article>
<h3>22.06.2024</h3>
<p>
The contact form has been disabled due to it being used by bots.
</p>
<p>
I expected that it's going to be used by bots at one point, since it used a public Discord webhook which is not a very safe solution,
but I thought it would be cool to send messages directly from your 3DS.
</p>
<p>
It might return at some point, but I need to maybe use a custom server in the middle which would redirect the webhook to Discord, but I
need to find a free solution for that.
</p>
</article>
<article>
<h3>05.06.2024</h3>
<p>
The site has gotten some changes lately.
</p>
<p>
<a href="games/ttt">Tic-Tac-Toe</a> has a new nicer look, and now you can flag cells in <a href="games/minesweeper">Minesweeper</a>.
</p>
<p>
Welcome a new contributor! <a href="other/qr">QR code generator</a> can now generate not just QR codes, thanks to basic-experimental.
</p>
</article>
<article>
<h3>11.05.2024</h3>
<p>
Say hello to DSi!
</p>
<p>
Some basic games can now be played on the DSi, thanks to magiczocker10. Games playable on the DSi are marked with the <span class="tag tag-dsi"></span> tag.
</p>
</article>
<article>
<h3>20.04.2024</h3>
<p>
The site is currently going through a lot of technical changes and optimization thanks to magiczocker10.
</p>
<p>
Soon more games will be possible thanks to a new rendering library that uses a tree structure and uses DOM elements instead of drawing on a canvas.
</p>
<p>
This library should also provide much better performance with bigger games.
</p>
<p class="note">Nerdy stuff lol</p>
</article>
<article>
<h3>11.04.2024</h3>
<p><a href="games/connect4">Connect 4</a> and <a href="games/hangman">Hangman</a> are here thanks to magiczocker10!</p>
</article>
<article>
<h3>08.04.2024</h3>
<p>Today is the last day of 3DS and Wii U online play...</p>
<p>We hope you all had a great time.</p>
</article>
<article>
<h3>07.04.2024</h3>
<p>Today <a href="games/sudoku">Sudoku</a> was added with some other changes by magiczocker10.</p>
</article>
<article>
<h3>01.04.2024</h3>
<p>Happy Easter and April Fools!</p>
<p><a href="games/breakout">Breakout</a> is finally public.</p>
<p>Also a <a href="other/hack">totally real hacking interface</a> was added.</p>
</article>
<article>
<h3>14.03.2024</h3>
<p><a href="games/minesweeper">MineSweeper</a> has been added.</p>
<p>Thanks to magiczocker10 for making it and optimizing other parts of the site!</p>
</article>
<article>
<h3>18.02.2024</h3>
<p>Restyled some site elements to make it more lively.</p>
<p>More games are coming very soon!</p>
</article>
<article>
<h3>10.02.2024</h3>
<p>Some performance issues were fixed on Old 3DS systems and minor bugfixes were made.</p>
<p>Added a scrolling background to JetFighter.</p>
</article>
<article>
<h3>06.02.2024</h3>
<p>Tuesday patch! Games will now run at the same speed on all devices no matter the performance. Pigeon and Pong are now slightly more difficult.</p>
<p>Other minor bugfixes were made.</p>
<p>I also received some nice game ideas, and bug reports. In near future I'll develop a minimal game engine that will allow me to develop more advanced games. I noted these ideas down.</p>
</article>
<article>
<h3>03.02.2024</h3>
<p>I'm currently working on optimizing games and improving support for Old 3DS/2DS</p>
<p>Thanks Heolity for testing!</p>
</article>
<article>
<h3>27.01.2024</h3>
<p>Say hi to pets. They'll be chillin' in the left corner of the top screen :D</p>
<img src="img/pets/chicken/chicken1.png" style="width: 16%">
</article>
<article>
<h3>21.01.2024</h3>
<p><a href="other/calculator">Calculator</a> and <a href="other/rand">Random Number Generator</a> were added.</p>
<p>As you can see the color scheme was changed to make the site look prettier.</p>
<p>I'm currently working on a weather forecast app. Cheers!</p>
</article>
<article>
<h3>15.01.2024</h3>
<p><a href="games/pong">Pong</a> is there!</p>
</article>
<article>
<h3>01.01.2024</h3>
<p>Happy new year!</p>
<p>I decided to publish an early version of <a href="games/jetfighter">JetFighter</a>. Enjoy! </p>
</article>
<article>
<h3>21.12.2023</h3>
<p>Something cool is on the way!</p>
<img src="games/jetfighter/img/jet.png">
</article>
<article>
<h3>17.12.2023</h3>
<p>
In today's patch, tap controls were added to Jumpy and Pigeon. You can now just tap the screen to jump. It also allows mobile users to
test the games on their phones.
</p>
<p>
In Pigeon, fixed pipes spawning despite the pigeon being dead or the game not started. I accidentally broke it when testing sprite
scaling.
</p>
<p>
Some minor fixes and additional features were added to the website itself.
</p>
</article>
<article>
<h3>13.12.2023</h3>
<a href="games/ttt">Tic-Tac-Toe</a> released along with some minor fixes in the Pigeon game.
</article>
<article>
<h3>12.12.2023</h3>
<img src="games/pigeon/img/wingUp.png">
<p>New game based on Flappy Bird is out!</p>
<a href="games/pigeon">Pigeon</a>!
<p>In near future I might add random events to it like things you have to quickly dodge to make it more interesting, but I think it's already good for now.</p>
<p>It relies on the newly written Game.js library, so I was able to properly test, adapt and fix a lot of bugs while seeing it in action.</p>
</article>
<article>
<h3>05.12.2023</h3>
<p>First game is there! <a href="games/jumpy">Jumpy!</a> </p>
<div style="width: 17px; overflow: hidden">
<img src="games/jumpy/img/jumpy.png" style="width: 72px; height: 26px" alt="jumpy">
</div>
<p>For now the website is going through a lot of technical changes, and I am working on libraries that will allow games to be easily made.</p>
<p>More games and stuff soon!</p>
</article>
<article>
<h3>03.12.2023</h3>
<p>First functional version of the site is complete</p>
</article>
</div>
<div id="tab-about">
<p>
This website is a small collection of browser games made in JavaScript.
</p>
<p>
Please note that this website uses outdated web standards in order to support the Nintendo 3DS browser, also due to how old the browser is some things may not be possible.
</p>
<p>
If you'd like to suggest a game or create your own with JavaScript, feel free to suggest or open pull requests on the GitHub page.
</p>
<p>
This project is not affiliated with Nintendo, and it's only community driven.
</p>
<h3>Links & contact</h3>
<!--<a href="contact.html" class="only-3ds"><button>Contact form ></button></a>-->
<p class="note">Should be opened on another device</p>
<p class="note only-3ds">Click to reveal the URL</p>
<div class="social-link">
<img src="img/logos/github.png">
<a href="https://github.com/Wolfyxon/3ds-web-stuff" class="non-3ds-link">Source code</a>
</div>
<div class="social-link">
<img src="img/logos/discord.png">
<a href="https://discord.com/invite/RztUGCK" class="non-3ds-link">Discord server</a>
</div>
<div class="social-link">
<img src="img/logos/gmail.png">
<a href="mailto:[email protected]" class="non-3ds-link">[email protected]</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>