--- title: Desert Racer 🏜️: World's First CSS-only Swipe-Aware Game! description: A CSS-only game showcasing swipe awareness and collision detection using CSS tricks and scroll properties. The author challenges the notion that swipe... canonical: https://daily.dev/posts/desert-racer-world-s-first-css-only-swipe-aware-game--mnama1gdk twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Desert Racer 🏜️: World's First CSS-only Swipe-Aware Game! | daily.dev og:description: A CSS-only game showcasing swipe awareness and collision detection using CSS tricks and scroll properties. The author challenges the notion that swipe... og:url: https://daily.dev/posts/desert-racer-world-s-first-css-only-swipe-aware-game--mnama1gdk og:image: https://api.daily.dev/og/posts/MNaMA1gdk.png og:image:alt: Desert Racer 🏜️: World's First CSS-only Swipe-Aware Game! og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Desert Racer 🏜️: World's First CSS-only Swipe-Aware Game! **[DEV](https://daily.dev/sources/devto)** · 11 min read · 197 upvotes · 5 comments ## Summary A CSS-only game showcasing swipe awareness and collision detection using CSS tricks and scroll properties. The author challenges the notion that swipe awareness is impossible without JavaScript and provides an interactive and inspiring experience. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@ethandotlog** · 5 upvotes > 0_0 > > Crazy this is all CSS - Dev vs Ai and the dev went 10 steps further. I didn't know CSS was capable of this! **@omarmustafa** · 1 upvotes > that's crazy how this is just css. **@thr4sher** · 0 upvotes > Amazing! **@kiselitza** · 0 upvotes > Yo, this looks dope :'D **@ghost** · 0 upvotes > Thanks for the feature! ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#game-development](https://daily.dev/tags/game-development), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/desert-racer-world-s-first-css-only-swipe-aware-game--mnama1gdk) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Desert Racer 🏜️: World's First CSS-only Swipe-Aware Game!","url":"https://daily.dev/posts/desert-racer-world-s-first-css-only-swipe-aware-game--mnama1gdk","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/desert-racer-world-s-first-css-only-swipe-aware-game--mnama1gdk"},"datePublished":"2024-03-29T17:19:30.648Z","dateModified":"2024-05-09T08:22:04.995Z","description":"A CSS-only game showcasing swipe awareness and collision detection using CSS tricks and scroll properties. The author challenges the notion that swipe...","image":"https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs4b0d1ag3iinsn957wsx.gif","thumbnailUrl":"https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs4b0d1ag3iinsn957wsx.gif","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"DEV","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/devto","url":"https://daily.dev/sources/devto"},"commentCount":5,"discussionUrl":"https://daily.dev/posts/desert-racer-world-s-first-css-only-swipe-aware-game--mnama1gdk","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":197},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"keywords":"webdev,css,html,game-development,frontend","timeRequired":"PT11M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"Desert Racer 🏜️: World's First CSS-only Swipe-Aware Game!"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/desert-racer-world-s-first-css-only-swipe-aware-game--mnama1gdk","comment":[{"@type":"Comment","text":"0_0\nCrazy this is all CSS - Dev vs Ai and the dev went 10 steps further. I didn’t know CSS was capable of this!","datePublished":"2024-03-29T17:47:03.514Z","url":"https://daily.dev/posts/MNaMA1gdk#c-D2TVUk2AM","author":{"@type":"Person","name":"EthanDotLog","url":"https://daily.dev/ethandotlog","image":"https://media.daily.dev/image/upload/s--FG6JyJLk--/f_auto/v1712549537/avatars/avatar_lqkFGHBkJFiKB5jZGhi7d"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"that’s crazy how this is just css.","datePublished":"2024-04-06T17:17:46.134Z","url":"https://daily.dev/posts/MNaMA1gdk#c-YqNl6LqPD","author":{"@type":"Person","name":"Omar Mustafa","url":"https://daily.dev/omarmustafa","image":"https://avatars.githubusercontent.com/u/126339620?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Amazing!","datePublished":"2024-03-30T08:50:46.336Z","url":"https://daily.dev/posts/MNaMA1gdk#c-GD7gHSZEL","author":{"@type":"Person","name":"Enrico Monzeglio","url":"https://daily.dev/thr4sher","image":"https://lh3.googleusercontent.com/a/ACg8ocKbIkCMxXbTQmI2l-YIyQgSBHxVYaPcavVG8__58QST-_Q=s96-c"}},{"@type":"Comment","text":"Yo, this looks dope :'D","datePublished":"2024-03-30T10:13:19.851Z","url":"https://daily.dev/posts/MNaMA1gdk#c-e6N8t5obC","author":{"@type":"Person","name":"Aldin Kiselica","url":"https://daily.dev/kiselitza","image":"https://media.daily.dev/image/upload/s--7MmdUNnH--/f_auto/v1711021771/avatars/avatar_wmyiR105exUAMUi0AIxh6"}},{"@type":"Comment","text":"Thanks for the feature!","datePublished":"2024-03-31T08:02:03.630Z","url":"https://daily.dev/posts/MNaMA1gdk#c-dioGnNLWs","author":{"@type":"Person","name":"Deleted user","url":"https://daily.dev/ghost","image":"https://media.daily.dev/image/upload/s--hNIUzLiO--/f_auto/v1705327420/public/ghost_vlftth"}}]} ```