Cookie Consent by Free Privacy Policy Generator 📌 Earth rescue - A CSS only game


✅ Earth rescue - A CSS only game


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

The gift from the DEV shop 🙂🙃🙂🙃

Demo

Check out the game on GitHub Pages!

If it's laggy, hit the toggle animation button in the top left corner.

🦧 Where CodePen

Unfortunately, CodePen doesn't allow refreshing the iframe it's running in. I'm using it to re-start the game, when the player either won or lost the game.

If you want, you can peek into the source code in the GitHub Repository.

Journey

I started with the game's background and I wanted to create something spacey and I had no inspiration at all. Until I found Temani Afif's article about wavy shapes & patterns in CSS on css-tricks.com. Space has waves, so I thought and it was the most painful part of the project.

Waves... waves everywhere!

I have never been great in physics, math, geometry and anything number related and circles and accelleration of falling objects have been my bane in school. I spent a full day trying to understand how to generate waves in CSS, but my short attention span lead me to build a villager farm in minecraft instead, giving me enought momentum to create a somewhat spacey background with some depth.

Gotta stay organized

After I had created space, the code was as spaghetti as it can get. I decided to switch to SCSS and finally read into the BEM Pattern for CSS and after wasting another 4 hours, I decided that I could not decide wether the HUD is an element of the game and the button is an element of the HUD and the text is an element of the button and someone else also thought about this and called it the BEM grandchildren problem. I decided to go with a half-assed approach of BEM and that's what you will find in my code.

There's no earth

Space is nice, but it's not space day, it's earth day. So an earth had to be made. I had this abstracted earth-design of Kurzgesagt in my mind, so I tried to go for it. However I wanted the landmasses to resemble those our planet earth and not just some green-blue ball in space, so I implemented earth using a CSS grid which I have never used before (flex does the job in most cases, right?). Also, if there's a question mark at the end of a sentence within parenthesis, do you put a dot after the closing parenthesis?

I also have to mention Kevin Powell's great video about advanced usage of CSS grids.

There's an earth, but it's slooooow

I have used Firefox Developer Edition and because YouTube is always slow using this browser, I had tinkered with it in the past. My CSS animations were slow and laggy. I had moving clouds with opacity and stars with a blur-filter. I imagined it would be also laggy on older phones, and upon researching, I stumbled across Web Dev Simplified's video about Performant CSS Animations.

It helped changing animations from left: 100vw; to transform: translateX(100vw);, but eventually I added a toggle button to disable unneeded animations.

CHATEOAS

How did I toggle animations and other states of the game, you ask? CHeckboxes As The Engine Of Application State of course. The checkboxes are hidden and interactions are done with the label element. Since you can only ever change one element's state at once, the game is quite linear.

Too much text

In the beginning I only had buttons to click, but then I guessed I could make small icons for the ecological disasters and I found Bennett Feely's CSS clip-path maker. Altough I know Adobe Illustrator and also wrote some SVG by hand, I was lazy to figure out all the shapes and I didn't want to include any images or vector graphics at all in this project. So that website came in very handy.

A good friend

There you are, saving earth from outer space all by yourself. Wouldn't it be nice to have some companion? And who doesn't like robots? I had used quite some CSS grid in the project (earth, clouds, icons for ecological disasters), so I thought why not make a whole 16x16 pixel robot in CSS? I did the math and I had no intention of creating 256 HTML elements (yes, I could have used VS Code's emmet functionality, e.g. div*5), so I kind of reduced the size and used the grid-column and grid-row's span attribute. You can also stack grid elements following the default CSS z-index behaviour. Nice! I quickly made a design on Pixilart and then created the CSS code using the image as a visual guide.

Worth mentioning

If you're wondering how I added a "timer" to the game's goals - it's just an animation.

Let's say the event "deforestation" begins, because the player has clicked on "Start game":

  1. "Start game" is the label for the checkbox state_deforestation_happening
  2. When state_deforestation_happening is checked, the following elements get an animation:

    1. The "goal" - A container displaying some text what's happening. The trick: The container is a grid with two equal sized columns. The lower column contains the "game over" message, but is off screen. The animation shows the top half of the "goal" container for a while and then shows the full container, while using clip-path to hide the top part of the container.
    2. The "goal timer bar" - Basically just a div that grows from with: 0; to with: 100%;.
    3. The "deforestation"-icons. Labels for checkboxes. If all icons are clicked, the next event (e.g. oil spill) begins.
...

✅ Earth rescue - A CSS only game


📈 46.99 Punkte

✅ Submission for Frontend Challenge Earth-Day-Edition: Earth's Rotation: Rotating with CSS on Earth Day


📈 38.73 Punkte

✅ Introduction of CSS, What is CSS, Why we use CSS and How CSS describe the HTML elements


📈 33.74 Punkte

✅ iPhone 14 satellite rescue feature prompts challenging canyon rescue


📈 31.66 Punkte

✅ CGI RESCUE Cgi Rescue Trees cross site scripting [CVE-2009-1790]


📈 31.66 Punkte

✅ Submission for Frontend Challenge Earth-Day-Edition: Elements of Earth: CSS Card animation


📈 28.63 Punkte

✅ Submission for Frontend Challenge Earth-Day-Edition: different elements of Earth: CSS Card animation


📈 28.63 Punkte

✅ Created a simple Earth simulation-like with a message with CSS only.


📈 26.3 Punkte

✅ Earth Day Celebration "CSS only - NO JavaScript


📈 26.3 Punkte

✅ Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS


📈 25.31 Punkte

✅ A BRIEF REVIEW OF CSS CASCADING, CSS SELECTORS and CSS SPECIFICITY.


📈 25.31 Punkte

✅ Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build


📈 25.31 Punkte

✅ CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)


📈 25.31 Punkte

✅ css-shape.com: The Ultimate Collection of CSS-only Shapes ⚡️


📈 24.64 Punkte

✅ Transform Your CSS Game: Bookmark These 10 CSS Generators


📈 21.73 Punkte

✅ Build a Tic Tac Toe Game using HTML, CSS, JavaScript, Tailwind CSS and Canvas Confetti


📈 21.73 Punkte

✅ Build A CSS Word Search Game In ... CSS!


📈 21.73 Punkte

✅ Game title in html css only


📈 21.06 Punkte

✅ Bubble game CSS only


📈 21.06 Punkte

✅ A CSS-only game playable with keyboard! 🤯 (No, you are not dreaming)


📈 21.06 Punkte

✅ [Game of Purpose] Day 28 - ChatGPT to the rescue


📈 20.69 Punkte

✅ Satellite SOS 'is a game changer,' says LA Search and Rescue


📈 20.69 Punkte

✅ "Code for Earth: Uniting Tech & Nature on Earth Day"


📈 20.2 Punkte

✅ Large Near-Earth Astroid Will Fly Past Earth On April 19


📈 20.2 Punkte

✅ Submission For Front-end Challenge 2024 Earth Day Edition 🌎: "Earth's Future In Our Hands"


📈 20.2 Punkte

✅ Google Earth's Timelapses Offer a 32-Year Look At Earth's Changing Surface


📈 20.2 Punkte

✅ Google Earth Pro 7.3.6.9326 - Advanced business tools for Google Earth.


📈 20.2 Punkte

✅ Google Earth VR: Neuer Virtual Reality-Flugsimulator in der Welt von Google Earth


📈 20.2 Punkte

✅ Apple TV+ debuts “The Year Earth Changed” to herald Earth Day 2021


📈 20.2 Punkte

✅ Google Earth's Timelapses Offer a 32-Year Look At Earth's Changing Surface


📈 20.2 Punkte

✅ Earth View from Google Earth 3.0.3 Englisch


📈 20.2 Punkte

✅ Google Earth VR: Neuer Virtual Reality-Flugsimulator in der Welt von Google Earth


📈 20.2 Punkte

✅ Google Earth: Beeindruckende neue Aufnahmen – Google Earth zeigt jetzt Sterne und die Milchstraße


📈 20.2 Punkte

✅ Google Earth: Beeindruckende neue Aufnahmen – Google Earth zeigt jetzt Sterne und die Milchstraße


📈 20.2 Punkte

✅ Retrieve satellite earth observation images easily with QGIS JAXA Earth API Plugin


📈 20.2 Punkte











matomo

Datei nicht gefunden!