{"id":372952,"date":"2022-09-09T06:21:29","date_gmt":"2022-09-09T13:21:29","guid":{"rendered":"https:\/\/css-tricks.com\/?p=372952"},"modified":"2022-09-09T13:14:21","modified_gmt":"2022-09-09T20:14:21","slug":"how-i-made-a-pure-css-puzzle-game","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-i-made-a-pure-css-puzzle-game\/","title":{"rendered":"How I Made a Pure CSS Puzzle Game"},"content":{"rendered":"\n<p>I recently discovered the joy of creating CSS-only games. It\u2019s always fascinating how HTML and CSS are capable of handling the logic of an entire online game, so I had to try it! Such games usually rely on the ol\u2019 Checkbox Hack where we combine the checked\/unchecked state of a HTML input with the <code>:checked<\/code> pseudo-class in CSS. We can do a lot of magic with that one combination!<\/p>\n\n\n\n<p>In fact, I challenged myself to build an entire game without Checkbox. I wasn\u2019t sure if it would be possible, but it definitely is, and I\u2019m going to show you how.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"is-style-explanation\">In addition to the puzzle game we will study in this article, I have made <a href=\"https:\/\/github.com\/Afif13\/CSS-Games\" rel=\"noopener\">a collection of pure CSS games<\/a>, most of them without the Checkbox Hack. (They are also available <a href=\"https:\/\/codepen.io\/collection\/vBeQev\" rel=\"noopener\">on CodePen<\/a>.)<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"want-to-play-before-we-start\">Want to play before we start?<\/h3>\n\n\n<p>I personally prefer playing the game in full screen mode, but you can play it below or <a href=\"https:\/\/css-games.com\/puzzle\/\" rel=\"noopener\">open it up over here<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjLWpOJ\" src=\"\/\/codepen.io\/anon\/embed\/preview\/JjLWpOJ?height=750&amp;theme-id=1&amp;slug-hash=JjLWpOJ&amp;default-tab=result\" height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjLWpOJ\" title=\"CodePen Embed JjLWpOJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Cool right? I know, it\u2019s not the Best Puzzle Game You Ever Saw&#x2122; but it\u2019s also not bad at all for something that only uses CSS and a few lines of HTML. You can easily adjust the size of the grid, change the number of cells to control the difficulty level, and use whatever image you want!<\/p>\n\n\n\n<p>We\u2019re going to remake that demo together, then put a little extra sparkle in it at the end for some kicks.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-drag-and-drop-functionality\">The drag and drop functionality<\/h3>\n\n\n<p>While the structure of the puzzle is fairly straightforward with CSS Grid, the ability to drag and drop puzzle pieces is a bit trickier. I had to relying on a combination of transitions, hover effects, and sibling selectors to get it done.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBovmzJ\/12cfa04f7448b6195a151b1f7334be39\" src=\"\/\/codepen.io\/anon\/embed\/preview\/qBovmzJ\/12cfa04f7448b6195a151b1f7334be39?height=450&amp;theme-id=1&amp;slug-hash=qBovmzJ\/12cfa04f7448b6195a151b1f7334be39&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBovmzJ\/12cfa04f7448b6195a151b1f7334be39\" title=\"CodePen Embed qBovmzJ\/12cfa04f7448b6195a151b1f7334be39\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you hover over the empty box in that demo, the image moves inside of it and stays there even if you move the cursor out of the box. The trick is to add a big transition duration and delay \u2014 so big that the image takes lots of time to return to its initial position.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">img {\n  transform: translate(200%);\n  transition: 999s 999s; \/* very slow move on mouseout *\/\n}\n.box:hover img {\n  transform: translate(0);\n  transition: 0s; \/* instant move on hover *\/\n}<\/code><\/pre>\n\n\n\n<p>Specifying only the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-delay\/\"><code>transition-delay<\/code><\/a> is enough, but using big values on both the delay and the duration decreases the chance that a player ever sees the image move back. If you wait for <code>999s + 999s<\/code> \u2014 which is approximately 30 minutes \u2014 then you will see the image move. But you won\u2019t, right? I mean, no one\u2019s going to take that long between turns unless they walk away from the game. So, I consider this a good trick for switching between two states.<\/p>\n\n\n\n<p>Did you notice that hovering the image also triggers the changes? That\u2019s because the image is part of the box element, which is not good for us. We can fix this by adding <code>pointer-events: none<\/code> to the image but we won\u2019t be able to drag it later.<\/p>\n\n\n\n<p>That means we have to introduce another element inside the <code>.box<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abYMwOa\/052a633089aa1a268afb833dbb20318d\" src=\"\/\/codepen.io\/anon\/embed\/preview\/abYMwOa\/052a633089aa1a268afb833dbb20318d?height=450&amp;theme-id=1&amp;slug-hash=abYMwOa\/052a633089aa1a268afb833dbb20318d&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abYMwOa\/052a633089aa1a268afb833dbb20318d\" title=\"CodePen Embed abYMwOa\/052a633089aa1a268afb833dbb20318d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>That extra <code>div<\/code> (we\u2019re using a class of <code>.a<\/code>) will take the same area as the image (thanks to CSS Grid and <code>grid-area: 1 \/ 1<\/code>) and will be the element that triggers the hover effect. And that is where the sibling selector comes into play:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"9\"><code markup=\"tt\">.a {\n  grid-area: 1 \/ 1;\n}\nimg {\n  grid-area: 1 \/ 1;\n  transform: translate(200%);\n  transition: 999s 999s;\n}\n.a:hover + img {\n  transform: translate(0);\n  transition: 0s;\n}<\/code><\/pre>\n\n\n\n<p>Hovering on the <code>.a<\/code> element moves the image, and since it is taking up all space inside the box, it\u2019s like we are hovering over the box instead! Hovering the image is no longer a problem!<\/p>\n\n\n\n<p>Let\u2019s drag and drop our image inside the box and see the result:<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='237' src='https:\/\/videopress.com\/embed\/FIC4Glwe?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>Did you see that? You first grab the image and move it to the box, nothing fancy. But once you release the image you trigger the hover effect that moves the image, and then we simulate a drag and drop feature. If you release the mouse outside the box, nothing happens.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Hmm, your simulation isn\u2019t perfect because we can also hover the box and get the same effect.<\/p><\/blockquote>\n\n\n\n<p>True and we will rectify this. We need to disable the hover effect and allow it only if we release the image inside the box. We will play with the dimension of our <code>.a<\/code> element to make that happen.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYRPZmY\/a13c4a79bba27ee277cb2994d021f9dd\" src=\"\/\/codepen.io\/anon\/embed\/preview\/vYRPZmY\/a13c4a79bba27ee277cb2994d021f9dd?height=450&amp;theme-id=1&amp;slug-hash=vYRPZmY\/a13c4a79bba27ee277cb2994d021f9dd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYRPZmY\/a13c4a79bba27ee277cb2994d021f9dd\" title=\"CodePen Embed vYRPZmY\/a13c4a79bba27ee277cb2994d021f9dd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now, hovering the box does nothing. But if you start dragging the image, the <code>.a<\/code> element appears, and once released inside the box, we can trigger the hover effect and move the image.<\/p>\n\n\n\n<p>Let\u2019s dissect the code:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.a {\n  width: 0%;\n  transition: 0s .2s; \/* add a small delay to make sure we catch the hover effect *\/\n}\n.box:active .a { \/* on :active increase the width *\/\n  width: 100%;\n  transition: 0s; \/* instant change *\/\n}\nimg {\n  transform: translate(200%);\n  transition: 999s 999s;\n}\n.a:hover + img {\n  transform: translate(0);\n  transition: 0s;\n}<\/code><\/pre>\n\n\n\n<p>Clicking on the image fires the <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/a\/active\/\"><code>:active<\/code><\/a> pseudo-class that makes the <code>.a<\/code> element full-width (it is initially equal to <code>0<\/code>). The active state will remain <em>active<\/em> until we release the image. If we release the image inside the box, the <code>.a<\/code> element goes back to <code>width: 0<\/code>, but we will trigger the hover effect before it happens and the image will fall inside the box! If you release it outside the box, nothing happens.<\/p>\n\n\n\n<p>There is a little quirk: clicking the empty box also moves the image and breaks our feature. Currently, <code>:active<\/code> is linked to the <code>.box<\/code> element, so clicking on it or any of its children will activate it; and by doing this, we end up showing the <code>.a<\/code> element and triggering the hover effect.<\/p>\n\n\n\n<p>We can fix that by playing with <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/pointer-events\/\"><code>pointer-events<\/code><\/a>. It allows us to disable any interaction with the <code>.box<\/code> while maintaining the interactions with the child elements.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.box {\n  pointer-events: none;\n}\n.box * {\n  pointer-events: initial;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOzJwzY\/997ddd236d506cec87e0ed344a28cdc4\" src=\"\/\/codepen.io\/anon\/embed\/preview\/jOzJwzY\/997ddd236d506cec87e0ed344a28cdc4?height=450&amp;theme-id=1&amp;slug-hash=jOzJwzY\/997ddd236d506cec87e0ed344a28cdc4&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOzJwzY\/997ddd236d506cec87e0ed344a28cdc4\" title=\"CodePen Embed jOzJwzY\/997ddd236d506cec87e0ed344a28cdc4\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><em>Now<\/em> our drag and drop feature is perfect. Unless you can find how to hack it, the only way to move the image is to drag it and drop it inside the box.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"building-the-puzzle-grid\">Building the puzzle grid<\/h3>\n\n\n<p>Putting the puzzle together is going to feel easy peasy compared to what we just did for the drag and drop feature. We are going to rely on CSS grid and background tricks to create the puzzle.<\/p>\n\n\n\n<p>Here\u2019s our grid, written in Pug for convenience:<\/p>\n\n\n\n<pre rel=\"Pug\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">- let n = 4; \/* number of columns\/rows *\/\n- let image = \"https:\/\/picsum.photos\/id\/1015\/800\/800\";\n\ng(style=`--i:url(${image})`)\n  - for(let i = 0; i &lt; n*n; i++)\n    z\n      a\n      b(draggable=\"true\") <\/code><\/pre>\n\n\n\n<p>The code may look strange but it compiles into plain HTML:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;g style=\"--i: url(https:\/\/picsum.photos\/id\/1015\/800\/800)\">\n &lt;z>\n   &lt;a>&lt;\/a>\n   &lt;b draggable=\"true\">&lt;\/b>\n &lt;\/z>\n &lt;z>\n   &lt;a>&lt;\/a>\n   &lt;b draggable=\"true\">&lt;\/b>\n &lt;\/z>\n &lt;z>\n   &lt;a>&lt;\/a>\n   &lt;b draggable=\"true\">&lt;\/b>\n &lt;\/z>\n  &lt;!-- etc. -->\n&lt;\/g><\/code><\/pre>\n\n\n\n<p>I bet you\u2019re wondering what\u2019s up with those tags. None of these elements have any special meaning \u2014 I just find that the code is much easier to write using <code>&lt;z&gt;<\/code> than a bunch of <code>&lt;div class=\"z\"&gt;<\/code> or whatever.<\/p>\n\n\n\n<p>This is how I\u2019ve mapped them out:<\/p>\n\n\n\n<ul><li><code>&lt;g&gt;<\/code> is our grid container that contains <code>N*N<\/code> <code>&lt;z&gt;<\/code> elements.<\/li><li><code>&lt;z&gt;<\/code> represents our grid items. It plays the role of the <code>.box<\/code> element we saw in the previous section.<\/li><li><code>&lt;a&gt;<\/code> triggers the hover effect.<\/li><li><code>&lt;b&gt;<\/code> represents a portion of our image. We apply the <code>draggable<\/code> attribute on it because it cannot be dragged by default.<\/li><\/ul>\n\n\n\n<p>Alright, let\u2019s register our grid container on <code>&lt;g&gt;<\/code>. This is in Sass instead of CSS:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">$n : 4; \/* number of columns\/rows *\/\n\ng {\n  --s: 300px; \/* size of the puzzle *\/\n\n  display: grid;\n  max-width: var(--s);\n  border: 1px solid;\n  margin: auto;\n  grid-template-columns: repeat($n, 1fr);\n}<\/code><\/pre>\n\n\n\n<p>We\u2019re actually going to make our grid children \u2014 the <code>&lt;z&gt;<\/code> elements \u2014 grids as well and have both <code>&lt;a&gt;<\/code> and <code>&lt;b&gt;<\/code> within the same grid area:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">z {\n  aspect-ratio: 1;\n  display: grid;\n  outline: 1px dashed;\n}\na {\n  grid-area: 1\/1;\n}\nb {\n  grid-area: 1\/1;\n}<\/code><\/pre>\n\n\n\n<p>As you can see, nothing fancy \u2014 we created a grid with a specific size. The rest of the CSS we need is for the drag and drop feature, which requires us to randomly place the pieces around the board. I\u2019m going to turn to Sass for this, again for the convenience of being able to loop through and style all the puzzle pieces with a function:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">b {\n  background: var(--i) 0\/var(--s) var(--s);\n}\n\n@for $i from 1 to ($n * $n + 1) {\n  $r: (random(180));\n  $x: (($i - 1)%$n);\n  $y: floor(($i - 0.001) \/ $n);\n  z:nth-of-type(#{$i}) b{\n    background-position: ($x \/ ($n - 1)) * 100% ($y \/ ($n - 1)) * 100%;\n    transform: \n      translate((($n - 1) \/ 2 - $x) * 100%, (($n - 1)\/2 - $y) * 100%) \n      rotate($r * 1deg) \n      translate((random(100)*1% + ($n - 1) * 100%)) \n      rotate((random(20) - 10 - $r) * 1deg)\n   }\n}<\/code><\/pre>\n\n\n\n<p>You may have noticed that I\u2019m using the Sass <code>random()<\/code> function. That\u2019s how we get the randomized positions for the puzzle pieces. Remember that we will <em>disable<\/em> that position when hovering over the <code>&lt;a&gt;<\/code> element after dragging and dropping its corresponding <code>&lt;b&gt;<\/code> element inside the grid cell.<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">z a:hover ~ b {\n  transform: translate(0);\n  transition: 0s;\n}<\/code><\/pre>\n\n\n\n<p>In that same loop, I am also defining the background configuration for each piece of the puzzle. All of them will logically share the same image as the background, and its size should be equal to the size of the whole grid (defined with the <code>--s<\/code> variable). Using the same <code>background-image<\/code> and some math, we update the <code>background-position<\/code> to show only a piece of the image.<\/p>\n\n\n\n<p>That\u2019s it! Our CSS-only puzzle game is technically done!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjLWpOJ\" src=\"\/\/codepen.io\/anon\/embed\/preview\/JjLWpOJ?height=750&amp;theme-id=1&amp;slug-hash=JjLWpOJ&amp;default-tab=result\" height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjLWpOJ\" title=\"CodePen Embed JjLWpOJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But we can always do better, right? I showed you <a href=\"https:\/\/css-tricks.com\/css-grid-and-custom-shapes-part-1\/#aa-css-grid-of-puzzle-pieces\">how to make a grid of puzzle piece shapes<\/a> in another article. Let\u2019s take that same idea and apply it here, shall we?<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"puzzle-piece-shapes\">Puzzle piece shapes<\/h3>\n\n\n<p>Here\u2019s our new puzzle game. Same functionality but with more realistic shapes!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjLQzqZ\" src=\"\/\/codepen.io\/anon\/embed\/preview\/JjLQzqZ?height=800&amp;theme-id=1&amp;slug-hash=JjLQzqZ&amp;default-tab=result\" height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjLQzqZ\" title=\"CodePen Embed JjLQzqZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is an illustration of the shapes on the grid:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"474\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661177005808_image.png?resize=512%2C474&#038;ssl=1\" alt=\"\" class=\"wp-image-372956\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661177005808_image.png?w=512&amp;ssl=1 512w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661177005808_image.png?resize=300%2C278&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>If you look closely you\u2019ll notice that we have nine different puzzle-piece shapes: the <strong>four corners<\/strong>, the <strong>four edges<\/strong>, and <strong>one for everything else<\/strong>.<\/p>\n\n\n\n<p>The grid of puzzle pieces I made in the other article I referred to is a little more straightforward:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJvWKPm\" src=\"\/\/codepen.io\/anon\/embed\/preview\/OJvWKPm?height=650&amp;theme-id=1&amp;slug-hash=OJvWKPm&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJvWKPm\" title=\"CodePen Embed OJvWKPm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We can use the same technique that combines CSS masks and gradients to create the different shapes. In case you are unfamiliar with <code>mask<\/code> and gradients, I highly recommend checking <a href=\"https:\/\/css-tricks.com\/css-grid-and-custom-shapes-part-1\/#aa-css-grid-of-puzzle-pieces\">that simplified case<\/a> to better understand the technique before moving to the next part.<\/p>\n\n\n\n<p>First, we need to use specific selectors to target each group of elements that shares the same shape. We have nine groups, so we will use eight selectors, plus a default selector that selects all of them.<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">z  \/* 0 *\/\n\nz:first-child  \/* 1 *\/\n\nz:nth-child(-n + 4):not(:first-child) \/* 2 *\/\n\nz:nth-child(5) \/* 3 *\/\n\nz:nth-child(5n + 1):not(:first-child):not(:nth-last-child(5)) \/* 4 *\/\n\nz:nth-last-child(5)  \/* 5 *\/\n\nz:nth-child(5n):not(:nth-child(5)):not(:last-child) \/* 6 *\/\n\nz:last-child \/* 7 *\/\n\nz:nth-last-child(-n + 4):not(:last-child) \/* 8 *\/<\/code><\/pre>\n\n\n\n<p>Here is a figure that shows how that maps to our grid:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"516\" height=\"510\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661262663737_puzzleselectors.png?resize=516%2C510&#038;ssl=1\" alt=\"\" class=\"wp-image-372955\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661262663737_puzzleselectors.png?w=516&amp;ssl=1 516w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661262663737_puzzleselectors.png?resize=300%2C297&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Now let\u2019s tackle the shapes. Let\u2019s focus on learning just one or two of the shapes because they all use the same technique \u2014 and that way, you have some homework to keep learning!<\/p>\n\n\n\n<p>For the puzzle pieces in the center of the grid, <code>0<\/code>:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">mask: \n  radial-gradient(var(--r) at calc(50% - var(--r) \/ 2) 0, #0000 98%, #000) var(--r)  \n    0 \/ 100% var(--r) no-repeat,\n  radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% - var(--r) \/ 2), #0000 98%, #000) \n    var(--r) 50% \/ 100% calc(100% - 2 * var(--r)) no-repeat,\n  radial-gradient(var(--r) at var(--r) calc(50% - var(--r) \/ 2), #000 98%, #0000),\n  radial-gradient(var(--r) at calc(50% + var(--r) \/ 2) calc(100% - var(--r)), #000 98%, #0000);<\/code><\/pre>\n\n\n\n<p>The code may look complex, but let\u2019s focus on one gradient at a time to see what\u2019s happening:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOzREJJ\/5fb492364fdf7959ee7c847023046a14\" src=\"\/\/codepen.io\/anon\/embed\/preview\/jOzREJJ\/5fb492364fdf7959ee7c847023046a14?height=450&amp;theme-id=1&amp;slug-hash=jOzREJJ\/5fb492364fdf7959ee7c847023046a14&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOzREJJ\/5fb492364fdf7959ee7c847023046a14\" title=\"CodePen Embed jOzREJJ\/5fb492364fdf7959ee7c847023046a14\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Two gradients create two circles (marked green and purple in the demo), and two other gradients create the slots that other pieces connect to (the one marked blue fills up most of the shape while the one marked red fills the top portion). A CSS variable, <code>--r<\/code>, sets the radius of the circular shapes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"695\" height=\"548\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661372912423_image.png?resize=695%2C548&#038;ssl=1\" alt=\"\" class=\"wp-image-372957\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661372912423_image.png?w=695&amp;ssl=1 695w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661372912423_image.png?resize=300%2C237&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The shape of the puzzle pieces in the center (marked <code>0<\/code> in the illustration) is the hardest to make as it uses four gradients and has four curvatures. All the others pieces juggle fewer gradients.<\/p>\n\n\n\n<p>For example, the puzzle pieces along the top edge of the puzzle (marked <code>2<\/code> in the illustration) uses three gradients instead of four:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">mask: \n  radial-gradient(var(--r) at calc(100% - var(--r)) calc(50% + var(--r) \/ 2), #0000 98%, #000) var(--r) calc(-1 * var(--r)) no-repeat,\n  radial-gradient(var(--r) at var(--r) calc(50% - var(--r) \/ 2), #000 98%, #0000),\n  radial-gradient(var(--r) at calc(50% + var(--r) \/ 2) calc(100% - var(--r)), #000 98%, #0000);<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYMoNRz\/78b3cc58c4d64c91a396c875e98c73a7\" src=\"\/\/codepen.io\/anon\/embed\/preview\/eYMoNRz\/78b3cc58c4d64c91a396c875e98c73a7?height=450&amp;theme-id=1&amp;slug-hash=eYMoNRz\/78b3cc58c4d64c91a396c875e98c73a7&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYMoNRz\/78b3cc58c4d64c91a396c875e98c73a7\" title=\"CodePen Embed eYMoNRz\/78b3cc58c4d64c91a396c875e98c73a7\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We removed the first (top) gradient and adjusted the values of the second gradient so that it covers the space left behind. You won\u2019t notice a big difference in the code if you compare the two examples. It should be noted that we can find different background configurations to create the same shape. If you start playing with gradients you will for sure come up with something different than what I did. You may even write something that\u2019s more concise \u2014 if so, share it in the comments!<\/p>\n\n\n\n<p>In addition to creating the shapes, you will also find that I am increasing the width and\/or the height of the elements like below:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">height: calc(100% + var(--r));\nwidth: calc(100% + var(--r));<\/code><\/pre>\n\n\n\n<p>The pieces of the puzzle need to overflow their grid cell to connect.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"855\" height=\"433\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661373660234_image.png?resize=855%2C433&#038;ssl=1\" alt=\"\" class=\"wp-image-372958\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661373660234_image.png?w=855&amp;ssl=1 855w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661373660234_image.png?resize=300%2C152&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_8559D50905E282404F2940BDAE97EA3CEC10D9C6A84E57A9093CA82C345644FE_1661373660234_image.png?resize=768%2C389&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"final-demo\">Final demo<\/h3>\n\n\n<p>Here is the full demo again. If you compare it with the first version you will see the same code structure to create the grid and the drag-and-drop feature, plus the code to create the shapes.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjLQzqZ\" src=\"\/\/codepen.io\/anon\/embed\/preview\/JjLQzqZ?height=800&amp;theme-id=1&amp;slug-hash=JjLQzqZ&amp;default-tab=result\" height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjLQzqZ\" title=\"CodePen Embed JjLQzqZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/css-games.com\/puzzle-v2\/\" rel=\"noopener\">Play it online<\/a><\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"possible-enhancements\">Possible enhancements<\/h3>\n\n\n<p>The article ends here but we could keep enhancing our puzzle with even more features! How about a a timer? Or maybe some sort of congratulations when the player finishes the puzzle?<\/p>\n\n\n\n<p>I may consider all these features in a future version, so <a href=\"https:\/\/github.com\/Afif13\/CSS-Games\" rel=\"noopener\">keep an eye on my GitHub repo<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"wrapping-up\">Wrapping up<\/h3>\n\n\n<p>And <a href=\"https:\/\/css-tricks.com\/is-css-a-programming-language\/\">CSS isn\u2019t a programming language<\/a>, they say. Ha!<\/p>\n\n\n\n<p>I\u2019m not trying to spark some #HotDrama by that. I say it because we did some really tricky logic stuff and covered a lot of CSS properties and techniques along the way. We played with CSS Grid, transitions, masking, gradients, selectors, and background properties. Not to mention the few Sass tricks we used to make our code easy to adjust.<\/p>\n\n\n\n<p>The goal was not to build the game, but to explore CSS and discover new properties and tricks that you can use in other projects. Creating an online game in CSS is a challenge that pushes you to explore CSS features in great detail and learn how to use them. Plus, it\u2019s just a lot of fun that we get something to play with when all is said and done.<\/p>\n\n\n\n<p>Whether CSS is a programming language or not, doesn&#8217;t change the fact that we always learn by building and creating innovative stuff.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently discovered the joy of creating CSS-only games. It\u2019s always fascinating how HTML and CSS are capable of handling the logic of an entire online game, so I had to try it! Such games usually rely on the ol\u2019 Checkbox Hack where we combine the checked\/unchecked state of a HTML input with the :checked [&hellip;]<\/p>\n","protected":false},"author":281881,"featured_media":372978,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"How I Made a Pure CSS Puzzle Game, by @ChallengesCSS","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[743,725,686,1298,1407],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/puzzle-article.png?fit=1214%2C611&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/puzzle-article.png?fit=1024%2C515&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/372952"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/281881"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=372952"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/372952\/revisions"}],"predecessor-version":[{"id":373268,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/372952\/revisions\/373268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/372978"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=372952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=372952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=372952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}