![]() ![]() One of the ways we can do this is to use CSS classes to color the div blocks where the snake and food are to be shown. The next step is to show the snake and food in the game area. This approach even lets us get rid of in the first place. We can then simply assign its final value to the main array. To overcome this problem, we can create a temporary array that holds all the elements until the for-loop is complete. But that doesn’t solve the problem completely.Įvery time we push a new element to the array inside a for-loop, a rerender is triggered, which impacts the performance. To fix this, we can add a limiter using a boolean variable. If we use on a property, then changing it in the renderedCallback() will create an infinite loop of rendering cycles. This ID is made up of the X and Y coordinates of the block in the form of X:Y. ![]() Each block is given an ID which we can use throughout the game to find that block. We can then iterate over these objects in the template using the for:each directive to render the blocks. One approach is to create a div element for each block using JavaScript and adding it to the DOM, but this would involve manipulating the DOM using JavaScript which is not efficient.Ī better way to do it is to create an array of objects, where each object represents a block. Once we’ve identified the number of blocks needed to cover the area, the next step is to actually create the blocks. To get the available area we can use the clientWidth and clientHeight properties of the HTMLElement. To calculate the number of blocks needed to cover the area, we divide the available area by the block size. Since we aren’t going to use the HTML5 Canvas, the trick is to divide the available space into blocks of equal size, where each block is a div element. Creating the game areaĪt the heart of the game is the area on which the snake moves. Finally, we’ll deploy the game to GitHub Pages and Heroku. We’ll then add the logic to move the snake based on keyboard controls and make the snake longer every time it eats the food. We’ll start by creating the game area, to which we’ll add the snake and the food. We also won’t use the HTML5 Canvas because the only way to modify the contents of a canvas is using the Canvas API which is unrelated to Lightning Web Components and doesn’t leverage its benefits. The guiding principle when building this game is the fact that “ Using JavaScript to manipulate the DOM isn’t recommended because the Lightning Web Components engine does it more efficiently”. You can also install it on your desktop and play offline. You can check out the source code here or play the game on Heroku or GitHub pages. The below image shows how the completed game looks. We built this game during a Trailhead Live session. We’ll also explore how we can optimize the performance of our components and deploy them to any platform of our choice. In this blog post we’ll explore how we can build the classic Snake game using Lightning Web Components (LWC). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |