Everyone can make a game: here's how

Подписаться 3,6 тыс.

50% 1

Let's make a festive video game from scratch! No matter what you know about games or programming, this walkthrough should be great place to get started. In 1 file, 10 steps, 1 language, and completely for free, we'll build a randomized, easily customizable game that's compatible everywhere.
Along the way we'll cover both basic and advanced topics in JavaScript, SVGs, CSS, and coding in general, from dynamically resizing the game to fit a 1080p aspect ratio, to festive web browser styling, to trigonometry, recursive functions, and more.
Enjoy, and happy holidays! We'll be back to less nerdy videos next week. Let me know in the comments if you want more tutorials and code-related stuff like this in the future.
Follow me on Threads for updates in between the videos:
- threads.net/@insanj
FINISHED PROJECT:
- Look at the code on Github github.com/insanj/snow
- Play the game online (also via Github) insanj.github.io/snow/
THINGS USED:
- Visual Studio Code code.visualstudio.com/
- Wallpaper from BasicAppleGuy basicappleguy.com/
- Rocket (for Emojis) matthewpalmer.net/rocket/
FUN VIDEO I REFERENCED:
- “Wat” www.destroyallsoftware.com/ta...
SOURCES:
- SVG en.wikipedia.org/wiki/SVG
- Aspect Ratios www.hp.com/us-en/shop/tech-ta...
- SVG Namespaces developer.mozilla.org/en-US/d...
- CSS developer.mozilla.org/en-US/d...
- Radius definition www.google.com/search?q=defin...
- Color Names www.w3schools.com/tags/ref_co...
- Window Alert developer.mozilla.org/en-US/d...
- Tickrate en.wikipedia.org/wiki/Netcode...
- Basic Equation of a Circle
www.mathopenref.com/coordbasi...
- JSON www.w3schools.com/js/js_json_...
ATTRIBUTION:
- Snow Effects • [Free Download] Fallin...
- Confetti Effects • Video effect source - ...
- Confetti SFX • Confetti - Sound Effect
CHAPTERS:
0:00 - Intro
2:24 - Step One
9:53 - Step Two
15:39 - Step Three
17:14 - Step Four
22:12 - Step Five
25:02 - Step Six
36:56 - Step Seven
38:49 - Step Eight
43:20 - Step Nine
48:10 - Step Ten (Part One)
53:22 - Step Ten (Part Two)
1:00:07 - Conclusion

Игры

Опубликовано:

4 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 2

@SEGACD32XMODEL1 6 месяцев назад

How do you stop people from just changing the url?

@insanj 6 месяцев назад

Good question! That's actually a pretty tricky problem to solve with completely client-side web development. For example: if we stop using the URL to save the level information, but instead include it as a variable in the code, the user can still right-click and use the Inspect Element/Developer Console feature to modify the level. Similarly, if we save the level in cookies or local storage, that's also available to the user in the "Storage" or "Application" section of the Developer Console. Thankfully, both of those require a bit more technical know-how than editing the URL, so they could be great solutions. Ultimately, two surefire ways to prevent the user from messing with the level information would be: 1. Turn the website into an app - this is actually easier than it sounds and is usually a couple steps of setup using popular tools Electron, NW.js, or Tauri. Tons of modern apps are actually just websites under the surface now. 2. Use a server to store information - this would require a bit more setup but would allow us to keep the game as a website. Since the level information wouldn't be stored in the web browser, there's no way for the user to tamper with it. Unfortunately, that means they'd also have to be connected to the internet.