Radu Mariescu-Istodor | CSS Style and Logo design for JavaScript puzzle game @Radu | Uploaded 3 years ago | Updated 1 hour ago
In this video we learn how to style our JavaScript game menu using CSS. The CSS Style is relatively simple, but it does the job. We also learn how to design a logo for our puzzle game. The logo is designed using PowerPoint, but any other graphics software can work...
This tutorial is part 5 of a series that teaches how to code a complex puzzle game that uses the camera:
Part 1. Accessing camera with HTML and vanilla JavaScript (Desktop and Mobile)
Part 2. Image manipulation in vanilla JavaScript (Cutting images into Pieces)
Part 3. Drag and drop in vanilla JavaScript and HTML canvas (Desktop and Mobile)
Part 4. Gameplay elements (Menu, Timer, Check complete)
Part 5. Styles and visuals (CSS and vectorial drawing)
Part 6. Working with sound (Recording and synthesis)
Part 7. MySql (PhpMyAdmin, Table structure)
Part 8. Php (Handling HTTP Requests, Interacting with the database)
Part 9. Advanced image manipulation in vanilla JavaScript (Shaping Puzzle Pieces)
Part 10. Advanced drag and drop in vanilla JavaScript (Handling Complex Shapes)
Full Playlist:
youtube.com/playlist?list=PLB0Tybl0UNfadlXE6BSpPk6O1Rbfm9ITo
Play the game here:
radufromfinland.com/projects/puzzlecam
Me playing the game on INSANE difficulty:
youtu.be/BTwZJURK13A
Game introduction (1000 subscriber special):
youtu.be/FOlJPxJVPMA
In this video we learn how to style our JavaScript game menu using CSS. The CSS Style is relatively simple, but it does the job. We also learn how to design a logo for our puzzle game. The logo is designed using PowerPoint, but any other graphics software can work...
This tutorial is part 5 of a series that teaches how to code a complex puzzle game that uses the camera:
Part 1. Accessing camera with HTML and vanilla JavaScript (Desktop and Mobile)
Part 2. Image manipulation in vanilla JavaScript (Cutting images into Pieces)
Part 3. Drag and drop in vanilla JavaScript and HTML canvas (Desktop and Mobile)
Part 4. Gameplay elements (Menu, Timer, Check complete)
Part 5. Styles and visuals (CSS and vectorial drawing)
Part 6. Working with sound (Recording and synthesis)
Part 7. MySql (PhpMyAdmin, Table structure)
Part 8. Php (Handling HTTP Requests, Interacting with the database)
Part 9. Advanced image manipulation in vanilla JavaScript (Shaping Puzzle Pieces)
Part 10. Advanced drag and drop in vanilla JavaScript (Handling Complex Shapes)
Full Playlist:
youtube.com/playlist?list=PLB0Tybl0UNfadlXE6BSpPk6O1Rbfm9ITo
Play the game here:
radufromfinland.com/projects/puzzlecam
Me playing the game on INSANE difficulty:
youtu.be/BTwZJURK13A
Game introduction (1000 subscriber special):
youtu.be/FOlJPxJVPMA
![A Virtual World - JavaScript Course: Lesson 5 / 11 [Procedural Generation with JavaScript]](https://i.ytimg.com/vi/BBFNvmUKxJ0/hqdefault.jpg "A Virtual World - JavaScript Course: Lesson 5 / 11 [Procedural Generation with JavaScript]
Welcome to the course where we build a self-driving car simulation in a virtual world. In this video were diving into the art of adding decorative elements to the virtual world—specifically, buildings and trees. In this video we start by defining the bases of these structures.
Now, you might wonder why not use the same graph editing tools weve explored before? Well, if youre planning to create expansive worlds and desire precise alignment, it can get quite tedious. So, were going to leverage the functionalities we already have and implement a clever algorithm for procedurally generating buildings alongside the roads. And for that extra touch of realism, well randomly place trees where they naturally fit.
Admittedly, this solution may limit your ability to design buildings exactly as you envision them, but the trade-off is worth it. With this approach, world generation becomes incredibly fast and straightforward. In fact, youll be able to build vast cities in no time! 🏢🌳
Heres a sneak peek of the algorithm: We start by creating thicker envelopes, then use the same process as before to extract the outer segments. We keep the segments long enough to support at least one building and, for the exceptionally long ones, divide them into multiple supports. Finally, we generate polygons around these structures using envelopes and apply some fine-tuning to achieve the desired results.
Have Fun! :-)
⭐PLAYLIST⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZtY5IQl1aNwcoOPJNtnPEO
⭐FINAL APP⭐
https://radufromfinland.com/projects/virtualworld
💻CODE💻
https://github.com/gniziemazity/virtual-world
4. Roads = follow along
5. Buildings And Trees= code after this lesson
💻COPY CODE FROM HERE💻
https://radufromfinland.com/projects/virtualworld/CODES/lesson_5.js
⭐ALL PREREQUISITES⭐
https://www.youtube.com/playlist?list=PLB0Tybl0UNfZ3nnHVg8SJ4uK3R4QD6R0H
⭐My Video on Distance to Segment⭐
https://youtu.be/jvqomjmMsPI
☕Buy me a Coffee?☕
https://www.buymeacoffee.com/radum
⚡️Join this Channel⚡️
https://youtube.com/@radu/join
⭐Timestamps⭐
00:00 Introduction
01:17 Top-level code
03:03 Generating Buildings
19:58 Generating Trees
26:55 Avoid illegal locations
39:18 Fine-tuning")
