{"id":5900,"date":"2020-11-23T16:58:00","date_gmt":"2020-11-23T16:58:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5900"},"modified":"2020-11-22T17:08:04","modified_gmt":"2020-11-22T17:08:04","slug":"8-pure-css-games-you-can-play-in-your-browser","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/8-pure-css-games-you-can-play-in-your-browser\/","title":{"rendered":"8 Pure CSS Games You Can Play in Your Browser"},"content":{"rendered":"\n<p>We may take CSS for granted, but it\u2019s amazing to think about just how powerful it has become. What started out as a simple way to style various design elements has evolved into so much more. We now use the language to handle tasks such as layouts and animation with ease \u2013 and without a second thought.<\/p>\n\n\n\n<p>But it doesn\u2019t stop there. CSS is also being utilized to build fully-interactive UIs. Things that used to require JavaScript now can be done with code that is natively supported in all modern web browsers.<\/p>\n\n\n\n<p>Among the best examples of this trend are the bevy of pure CSS games that are popping up. They\u2019re fun to play and give us a hint as to what can be achieved with a little creativity.<\/p>\n\n\n\n<p>Here\u2019s a look at some of the best pure CSS games on CodePen. They range from the stupefyingly simple all the way to \u201cwow, CSS can do that?\u201d \u2013 enjoy!<\/p>\n\n\n\n<h2>01. Rock, Paper, Scissors<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_goKRwN\" src=\"\/\/codepen.io\/anon\/embed\/goKRwN?height=250&amp;theme-id=1&amp;slug-hash=goKRwN&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed goKRwN\" title=\"CodePen Embed goKRwN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>A session of rock, paper, scissors is always a great way to beat boredom. If you don\u2019t have a partner to play along, you can give this virtual version a go. Click on your weapon of choice and then on the \u201cFight!\u201d button to see how you did. The game uses HTML radio buttons and some\u00a0random\u00a0CSS to power the match.<\/p>\n\n\n\n<h2>02. Minesweeper for Git Commits<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExPVEZP\" src=\"\/\/codepen.io\/anon\/embed\/ExPVEZP?height=250&amp;theme-id=1&amp;slug-hash=ExPVEZP&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExPVEZP\" title=\"CodePen Embed ExPVEZP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This game combines the classic premise of\u00a0Minesweeper\u00a0with the look of a GitHub contribution graph. See how many squares you can paint before hitting one of those pesky mines. Again, CSS is used to generate \u201crandom\u201d locations for each mine.<\/p>\n\n\n\n<h2>03. Save the World from Demons<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gaKjxP\" src=\"\/\/codepen.io\/anon\/embed\/gaKjxP?height=250&amp;theme-id=1&amp;slug-hash=gaKjxP&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gaKjxP\" title=\"CodePen Embed gaKjxP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here\u2019s a simple shooter game that asks you to take out some demonic minions (no, not\u00a0those\u00a0minions). Place your cursor over a demon and click to send them packing. A quick look under the hood reveals that HTML checkboxes and animated GIFs are making the whole thing work.<\/p>\n\n\n\n<h2>04. You Want Cake? You\u2019d Better Earn It.<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWrEmQG\" src=\"\/\/codepen.io\/anon\/embed\/XWrEmQG?height=250&amp;theme-id=1&amp;slug-hash=XWrEmQG&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWrEmQG\" title=\"CodePen Embed XWrEmQG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Sure, everybody wants some cake. But this game may drive you mad in its pursuit, as it takes some dexterity with your mouse. Hover over a tiny box and avoid the little crumbs and sprinkles. If you make it through, you shall be rewarded. Move your cursor too far, though, and you\u2019ll have to start all over again.<\/p>\n\n\n\n<h2>05. Guess the Movie<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaKxdVG\" src=\"\/\/codepen.io\/anon\/embed\/BaKxdVG?height=250&amp;theme-id=1&amp;slug-hash=BaKxdVG&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaKxdVG\" title=\"CodePen Embed BaKxdVG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This little trivia\/hangman-style game makes clever use of the CSS\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:valid\" target=\"_blank\"><code>:valid<\/code><\/a>\u00a0and\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:invalid\" target=\"_blank\"><code>:invalid<\/code><\/a>\u00a0pseudo-classes to guide you towards a correct answer. First, you\u2019re shown a set of emoji that represents a movie. From there, you\u2019re expected to type in the movie\u2019s name. But each form input only has a single valid letter. CSS will tell you if you\u2019ve entered the right one (or you could just look at the source code).<\/p>\n\n\n\n<h2>06. I Ain\u2019t Afraid of No Ghosts<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wYzWxz\" src=\"\/\/codepen.io\/anon\/embed\/wYzWxz?height=250&amp;theme-id=1&amp;slug-hash=wYzWxz&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wYzWxz\" title=\"CodePen Embed wYzWxz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here\u2019s another shooter game \u2013 but with a twist. This time around we\u2019re hunting down ghosts in a whack-a-mole type of setup. The difference here is that you only have 15 seconds to work with. It\u2019s a good demonstration of timing\u00a0animations\u00a0with CSS. How many can you blast?<\/p>\n\n\n\n<h2>07. Stack \u2018em High<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WMNdzr\" src=\"\/\/codepen.io\/anon\/embed\/WMNdzr?height=250&amp;theme-id=1&amp;slug-hash=WMNdzr&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WMNdzr\" title=\"CodePen Embed WMNdzr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Reminiscent of Tetris, this game challenges you to stack groups of moving blocks on top of each other. It may sound easy enough, but requires precise timing to get right. Now, if I could just find my old Game Boy\u2026<\/p>\n\n\n\n<h2>08. You Sunk My Battleship<\/h2>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pZPvwa\" src=\"\/\/codepen.io\/anon\/embed\/pZPvwa?height=250&amp;theme-id=1&amp;slug-hash=pZPvwa&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pZPvwa\" title=\"CodePen Embed pZPvwa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Grab a friend (or your alter ego) and play a spirited game of Battleship \u2013 powered only by CSS. While it\u2019s not quite as secretive as the physical version, it does provide a nice foray into conditional logic. Take a look through the code to see how it works.<\/p>\n\n\n\n<h2>Playing Around With CSS<\/h2>\n\n\n\n<p>CSS provides us with more than just a way to make our websites look attractive. It can bring movement and interactivity as well.<\/p>\n\n\n\n<p>And, though the games in this collection may not be practical for everyday use, they do demonstrate just how powerful the language has become. Studying these examples can provide you with an idea of how to leverage CSS to build more interactive experiences.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We may take CSS for granted, but it\u2019s amazing to think about just how powerful it has become. What started out as a simple way to style various design elements has evolved into so much more. We now use the language to handle tasks such as layouts and animation with ease \u2013 and without a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5901,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,128],"tags":[170,25,56,94,146,129,116],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/11\/Pure-CSS-Based-Browser-Games.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1xa","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5900"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5900"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5900\/revisions"}],"predecessor-version":[{"id":5902,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5900\/revisions\/5902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5901"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}