Publishing Site scottwestover.dev at 7bebf96 on Tue Sep 3 15:26:42 UT…

…C 2024

post/2024/08/solitaire-phaser-3-tutorial-2/index.html

@@ -101,5 +101,7 @@
 </span></span></code></pre></div><p>When your game refreshes in the browser, we should see the new tableau piles:</p><p><img src=./images/solitaire-phaser-3-tutorial-2-8.png alt="Tableau piles"></p><p>In the code above, we created a new private property called <code>#tableauContainers</code>, which will be an array of Phaser Container game objects. In Phaser, a container is a special type of game object that allows you to place other game objects inside it, and then you can move all of those game objects around by moving the container game object itself. What is unique about a container is that when you place game objects inside the container, the are position relative to the container position. For example, if we placed a container game object at position <code>50,50</code>, and then we created a new Image game object at position <code>0,0</code>, and placed this game object within the container, then the Image game object would appear at the container game objects position. There is more you can do with Container game objects, but for now, we are just using our Container game objects to align our cards in our piles.</p><p>Next, we created a new private method called <code>#createTableauPiles</code>. In this method, we create 7 Container game objects and line these up on our game board by using the index of our <code>for</code> loop. We then created a nested <code>for</code> loop to allow us to create the number of cards that we need in each pile, and so as we go through each iteration of our loop, we will create more cards for each card pile. Finally, we place each of our card Image game objects in each of the <code>tableauContainer</code> game objects that were created.</p><p>With all of the code changes that we have made so far, our game should now look like this:</p><p><img src=./images/solitaire-phaser-3-tutorial-2-9.png alt="Solitaire game layout"></p><h2 id=summary>Summary</h2><p>All right, with those last changes, that brings an end to this part of the tutorial. In this part of the tutorial, we started to create Phaser game objects and created the main layout for our Solitaire game.</p><p>You can find the completed source code for this article here on GitHub:
 <a href=https://github.com/devshareacademy/phaser-3-solitaire-tutorial/tree/game_layout target=_blank rel=noopener>Part 2 Source Code</a></p><p>If you run into any issues, please reach out via
 <a href=https://github.com/devshareacademy/phaser-3-solitaire-tutorial/discussions target=_blank rel=noopener>GitHub Discussions</a>
-, or leave a comment down below.</p><p>In part 3 of this series, we will start to add support for handling player input in our game.</p></div><footer class=post__footer><div class="post__tags tags clearfix"><svg class="tags__badge icon icon-tag" width="16" height="16" viewBox="0 0 32 32"><path d="M32 19c0 1-1 2-1 2L21 31s-1 1-2 1-2-1-2-1L2 16c-1-1-1.4-2-1.4-2S0 12.5.0 11V3C0 1.5.8.8.8.8S1.5.0 3 0h8c1.5.0 3 .6 3 .6S15 1 16 2l15 15s1 1 1 2zM7 10a3 3 0 100-6 3 3 0 000 6z"/></svg><ul class=tags__list><li class=tags__item><a class="tags__link btn" href=/tags/html5/ rel=tag>HTML5</a></li><li class=tags__item><a class="tags__link btn" href=/tags/game-development/ rel=tag>Game Development</a></li><li class=tags__item><a class="tags__link btn" href=/tags/typescript/ rel=tag>TypeScript</a></li><li class=tags__item><a class="tags__link btn" href=/tags/tutorial/ rel=tag>Tutorial</a></li><li class=tags__item><a class="tags__link btn" href=/tags/solitaire/ rel=tag>Solitaire</a></li><li class=tags__item><a class="tags__link btn" href=/tags/phaserjs/ rel=tag>PhaserJS</a></li><li class=tags__item><a class="tags__link btn" href=/tags/phaser3/ rel=tag>Phaser3</a></li></ul></div></footer></article></main><div class="authorbox clearfix"><figure class=authorbox__avatar><img alt="Scott Westover avatar" src=https://secure.gravatar.com/avatar/d5b6863a31baa2c531949202b1de9c82 class=avatar height=90 width=90></figure><div class=authorbox__header><span class=authorbox__name>About Scott Westover</span></div><div class=authorbox__description>Scott Westover is a Software Developer who loves coding, writing tutorials, participating in game jams, and learning about new technologies. When he is not coding, he is either spending time with his wife and two kids or is reading a great book. Scott is looking to form connections and share his knowledge.</div></div><nav class="pager flex"><div class="pager__item pager__item--prev"><a class=pager__link href=/post/2024/08/solitaire-phaser-3-tutorial-1/ rel=prev><span class=pager__subtitle>«&#8201;Previous</span><p class=pager__title>Solitaire HTML5 Game Tutorial With Phaser 3 Part 1: Project Setup</p></a></div><div class="pager__item pager__item--next"><a class=pager__link href=/post/2024/08/solitaire-phaser-3-tutorial-3/ rel=next><span class=pager__subtitle>Next&#8201;»</span><p class=pager__title>Solitaire HTML5 Game Tutorial With Phaser 3 Part 3: Player Input</p></a></div></nav><section class=comments><div id=gitment-comments></div></section><script src=https://utteranc.es/client.js repo=scottwestover/scottwestover.dev issue-term=pathname theme=github-light crossorigin=anonymous async></script></div></div><footer class=footer><div class="container footer__container flex"><div class=footer__copyright>&copy; 2024 Scott Westover.
+, or leave a comment down below.</p><p>In
+<a href=/post/2024/08/solitaire-phaser-3-tutorial-3/>part 3</a>
+of this series, we will start to add support for handling player input in our game.</p></div><footer class=post__footer><div class="post__tags tags clearfix"><svg class="tags__badge icon icon-tag" width="16" height="16" viewBox="0 0 32 32"><path d="M32 19c0 1-1 2-1 2L21 31s-1 1-2 1-2-1-2-1L2 16c-1-1-1.4-2-1.4-2S0 12.5.0 11V3C0 1.5.8.8.8.8S1.5.0 3 0h8c1.5.0 3 .6 3 .6S15 1 16 2l15 15s1 1 1 2zM7 10a3 3 0 100-6 3 3 0 000 6z"/></svg><ul class=tags__list><li class=tags__item><a class="tags__link btn" href=/tags/html5/ rel=tag>HTML5</a></li><li class=tags__item><a class="tags__link btn" href=/tags/game-development/ rel=tag>Game Development</a></li><li class=tags__item><a class="tags__link btn" href=/tags/typescript/ rel=tag>TypeScript</a></li><li class=tags__item><a class="tags__link btn" href=/tags/tutorial/ rel=tag>Tutorial</a></li><li class=tags__item><a class="tags__link btn" href=/tags/solitaire/ rel=tag>Solitaire</a></li><li class=tags__item><a class="tags__link btn" href=/tags/phaserjs/ rel=tag>PhaserJS</a></li><li class=tags__item><a class="tags__link btn" href=/tags/phaser3/ rel=tag>Phaser3</a></li></ul></div></footer></article></main><div class="authorbox clearfix"><figure class=authorbox__avatar><img alt="Scott Westover avatar" src=https://secure.gravatar.com/avatar/d5b6863a31baa2c531949202b1de9c82 class=avatar height=90 width=90></figure><div class=authorbox__header><span class=authorbox__name>About Scott Westover</span></div><div class=authorbox__description>Scott Westover is a Software Developer who loves coding, writing tutorials, participating in game jams, and learning about new technologies. When he is not coding, he is either spending time with his wife and two kids or is reading a great book. Scott is looking to form connections and share his knowledge.</div></div><nav class="pager flex"><div class="pager__item pager__item--prev"><a class=pager__link href=/post/2024/08/solitaire-phaser-3-tutorial-1/ rel=prev><span class=pager__subtitle>«&#8201;Previous</span><p class=pager__title>Solitaire HTML5 Game Tutorial With Phaser 3 Part 1: Project Setup</p></a></div><div class="pager__item pager__item--next"><a class=pager__link href=/post/2024/08/solitaire-phaser-3-tutorial-3/ rel=next><span class=pager__subtitle>Next&#8201;»</span><p class=pager__title>Solitaire HTML5 Game Tutorial With Phaser 3 Part 3: Player Input</p></a></div></nav><section class=comments><div id=gitment-comments></div></section><script src=https://utteranc.es/client.js repo=scottwestover/scottwestover.dev issue-term=pathname theme=github-light crossorigin=anonymous async></script></div></div><footer class=footer><div class="container footer__container flex"><div class=footer__copyright>&copy; 2024 Scott Westover.
 <span class=footer__copyright-credits>Generated with <a href=https://gohugo.io/ rel="nofollow noopener" target=_blank>Hugo</a> and <a href=https://github.com/Vimux/Mainroad/ rel="nofollow noopener" target=_blank>Mainroad</a> theme.</span></div></div></footer></div><script async defer src=/js/menu.js></script></body></html>

post/2024/08/solitaire-phaser-3-tutorial-3/index.html

@@ -177,5 +177,7 @@
 </span></span></code></pre></div><p>In the code above, we are doing two things:</p><ul><li>First we are updating the bottom card game object in our discard pile to match the top card of our discard pile, and we are doing this by updating the <code>frame</code> of the image and by making the card visible based on the other card. The reason we are doing this is, as we add a new card to the discard pile, we will want this card displayed on top of all of the other cards, and so to create this effect we will have the bottom card mirror the top card.</li><li>Next, we are updating the top card to be visible and and we are updating the frame of the image game object. For the time being, we are just setting the card to the card back frame, but once we start adding in the actual cards, this will be updated to match the frame of the card that was just drawn.</li></ul><p>In the browser, if you click on the draw card pile, you should see the top card become visible in the discard pile, and if you try moving the card we will see that there are no cards below that card. Next, if you draw one more card and then move the top card on the discard pile, you will see now there is another card below that card.</p><p><img src=./images/solitaire-phaser-3-tutorial-3-11.gif alt="Discard pile cards"></p><h2 id=summary>Summary</h2><p>All right, with those last changes for drawing cards, that brings an end to this part of the tutorial. In this part of the tutorial, we continued working on our Solitaire game and we focused on making the game interactive and adding support for player input.</p><p>You can find the completed source code for this article here on GitHub:
 <a href=https://github.com/devshareacademy/phaser-3-solitaire-tutorial/tree/player_input target=_blank rel=noopener>Part 3 Source Code</a></p><p>If you run into any issues, please reach out via
 <a href=https://github.com/devshareacademy/phaser-3-solitaire-tutorial/discussions target=_blank rel=noopener>GitHub Discussions</a>
-, or leave a comment down below.</p><p>In part 4 of this series, we will start to add logic to allow us to move cards between the various card piles in our game.</p></div><footer class=post__footer><div class="post__tags tags clearfix"><svg class="tags__badge icon icon-tag" width="16" height="16" viewBox="0 0 32 32"><path d="M32 19c0 1-1 2-1 2L21 31s-1 1-2 1-2-1-2-1L2 16c-1-1-1.4-2-1.4-2S0 12.5.0 11V3C0 1.5.8.8.8.8S1.5.0 3 0h8c1.5.0 3 .6 3 .6S15 1 16 2l15 15s1 1 1 2zM7 10a3 3 0 100-6 3 3 0 000 6z"/></svg><ul class=tags__list><li class=tags__item><a class="tags__link btn" href=/tags/html5/ rel=tag>HTML5</a></li><li class=tags__item><a class="tags__link btn" href=/tags/game-development/ rel=tag>Game Development</a></li><li class=tags__item><a class="tags__link btn" href=/tags/typescript/ rel=tag>TypeScript</a></li><li class=tags__item><a class="tags__link btn" href=/tags/tutorial/ rel=tag>Tutorial</a></li><li class=tags__item><a class="tags__link btn" href=/tags/solitaire/ rel=tag>Solitaire</a></li><li class=tags__item><a class="tags__link btn" href=/tags/phaserjs/ rel=tag>PhaserJS</a></li><li class=tags__item><a class="tags__link btn" href=/tags/phaser3/ rel=tag>Phaser3</a></li></ul></div></footer></article></main><div class="authorbox clearfix"><figure class=authorbox__avatar><img alt="Scott Westover avatar" src=https://secure.gravatar.com/avatar/d5b6863a31baa2c531949202b1de9c82 class=avatar height=90 width=90></figure><div class=authorbox__header><span class=authorbox__name>About Scott Westover</span></div><div class=authorbox__description>Scott Westover is a Software Developer who loves coding, writing tutorials, participating in game jams, and learning about new technologies. When he is not coding, he is either spending time with his wife and two kids or is reading a great book. Scott is looking to form connections and share his knowledge.</div></div><nav class="pager flex"><div class="pager__item pager__item--prev"><a class=pager__link href=/post/2024/08/solitaire-phaser-3-tutorial-2/ rel=prev><span class=pager__subtitle>«&#8201;Previous</span><p class=pager__title>Solitaire HTML5 Game Tutorial With Phaser 3 Part 2: Game Layout</p></a></div><div class="pager__item pager__item--next"><a class=pager__link href=/post/2024/08/solitaire-phaser-3-tutorial-4/ rel=next><span class=pager__subtitle>Next&#8201;»</span><p class=pager__title>Solitaire HTML5 Game Tutorial With Phaser 3 Part 4: Moving Cards</p></a></div></nav><section class=comments><div id=gitment-comments></div></section><script src=https://utteranc.es/client.js repo=scottwestover/scottwestover.dev issue-term=pathname theme=github-light crossorigin=anonymous async></script></div></div><footer class=footer><div class="container footer__container flex"><div class=footer__copyright>&copy; 2024 Scott Westover.
+, or leave a comment down below.</p><p>In
+<a href=/post/2024/08/solitaire-phaser-3-tutorial-4/>part 4</a>
+of this series, we will start to add logic to allow us to move cards between the various card piles in our game.</p></div><footer class=post__footer><div class="post__tags tags clearfix"><svg class="tags__badge icon icon-tag" width="16" height="16" viewBox="0 0 32 32"><path d="M32 19c0 1-1 2-1 2L21 31s-1 1-2 1-2-1-2-1L2 16c-1-1-1.4-2-1.4-2S0 12.5.0 11V3C0 1.5.8.8.8.8S1.5.0 3 0h8c1.5.0 3 .6 3 .6S15 1 16 2l15 15s1 1 1 2zM7 10a3 3 0 100-6 3 3 0 000 6z"/></svg><ul class=tags__list><li class=tags__item><a class="tags__link btn" href=/tags/html5/ rel=tag>HTML5</a></li><li class=tags__item><a class="tags__link btn" href=/tags/game-development/ rel=tag>Game Development</a></li><li class=tags__item><a class="tags__link btn" href=/tags/typescript/ rel=tag>TypeScript</a></li><li class=tags__item><a class="tags__link btn" href=/tags/tutorial/ rel=tag>Tutorial</a></li><li class=tags__item><a class="tags__link btn" href=/tags/solitaire/ rel=tag>Solitaire</a></li><li class=tags__item><a class="tags__link btn" href=/tags/phaserjs/ rel=tag>PhaserJS</a></li><li class=tags__item><a class="tags__link btn" href=/tags/phaser3/ rel=tag>Phaser3</a></li></ul></div></footer></article></main><div class="authorbox clearfix"><figure class=authorbox__avatar><img alt="Scott Westover avatar" src=https://secure.gravatar.com/avatar/d5b6863a31baa2c531949202b1de9c82 class=avatar height=90 width=90></figure><div class=authorbox__header><span class=authorbox__name>About Scott Westover</span></div><div class=authorbox__description>Scott Westover is a Software Developer who loves coding, writing tutorials, participating in game jams, and learning about new technologies. When he is not coding, he is either spending time with his wife and two kids or is reading a great book. Scott is looking to form connections and share his knowledge.</div></div><nav class="pager flex"><div class="pager__item pager__item--prev"><a class=pager__link href=/post/2024/08/solitaire-phaser-3-tutorial-2/ rel=prev><span class=pager__subtitle>«&#8201;Previous</span><p class=pager__title>Solitaire HTML5 Game Tutorial With Phaser 3 Part 2: Game Layout</p></a></div><div class="pager__item pager__item--next"><a class=pager__link href=/post/2024/08/solitaire-phaser-3-tutorial-4/ rel=next><span class=pager__subtitle>Next&#8201;»</span><p class=pager__title>Solitaire HTML5 Game Tutorial With Phaser 3 Part 4: Moving Cards</p></a></div></nav><section class=comments><div id=gitment-comments></div></section><script src=https://utteranc.es/client.js repo=scottwestover/scottwestover.dev issue-term=pathname theme=github-light crossorigin=anonymous async></script></div></div><footer class=footer><div class="container footer__container flex"><div class=footer__copyright>&copy; 2024 Scott Westover.
 <span class=footer__copyright-credits>Generated with <a href=https://gohugo.io/ rel="nofollow noopener" target=_blank>Hugo</a> and <a href=https://github.com/Vimux/Mainroad/ rel="nofollow noopener" target=_blank>Mainroad</a> theme.</span></div></div></footer></div><script async defer src=/js/menu.js></script></body></html>