Pixel Match Game

` element for each cell in the grid. * `const targetPixel = targetPattern.find(pixel => pixel.x === x && pixel.y === y)` searches the `targetPattern` array for a `Pixel` object with the current `x` and `y` coordinates. If a matching `Pixel` object is found, it is assigned to the `targetPixel` variable; otherwise, `targetPixel` will be `undefined`. * `if (targetPixel) {` [`cell.style`](http://cell.style)`.backgroundColor = targetPixel.color; }` checks if `targetPixel` is not `undefined`. If it's not, the `backgroundColor` style of the cell element is set to the color property of the `targetPixel` object. * `targetPatternElement.appendChild(cell)` appends the cell element as a child of the `targetPatternElement`, effectively rendering it on the game screen. The nested loops create a grid of `

` elements, where each element represents a pixel in the target pattern. The background color of each `

` element is set to red `(#FF0000)` if there is a corresponding `Pixel` object in the `targetPattern` array with the same coordinates; otherwise, the background color remains the default color white `(#FFFFFF)`. #### Check the pattern The `checkPattern` function compares the player's pattern with the target pattern and updates the score if a match is found: ```typescript function checkPattern(): void { const isMatch = targetPattern.every(targetPixel => { const playerPixel = pixels.find(pixel => pixel.x === targetPixel.x && pixel.y === targetPixel.y ); return playerPixel?.color === targetPixel.color; }); if (isMatch) { score++; targetPattern = generateTargetPattern(); displayTargetPattern(); updateScore(); resetGrid(); // Reset the grid after a correct guess } } ``` Let's break the function down further: ```typescript function checkPattern(): void { ``` We declare a function called `checkPattern` that doesn't return any value (indicated by the `void` return type). The purpose of this function is to check if the player's pattern matches the target pattern and update the game state accordingly. ```typescript const isMatch = targetPattern.every(targetPixel => { const playerPixel = pixels.find(pixel => pixel.x === targetPixel.x && pixel.y === targetPixel.y ); return playerPixel?.color === targetPixel.color; }); ``` The code above declares a constant variable `isMatch` and assigns it the result of the `every` method called on the `targetPattern` array. The `every` method is a built-in JavaScript array method that tests whether all elements in the array pass a certain condition. In this case, the condition is defined by the arrow function `targetPixel => { ... }`. For each `targetPixel` in the `targetPattern` array: - `const playerPixel = pixels.find(pixel => pixel.x === targetPixel.x && pixel.y === targetPixel.y)` searches the `pixels` array (which contains the player's current pattern) for a `Pixel` object with the same `x` and `y` coordinates as the `targetPixel`. If a matching `Pixel` object is found, it is assigned to the `playerPixel` variable; otherwise, `playerPixel` will be `undefined`. - `return playerPixel?.color === targetPixel.color` checks if the color property of the `playerPixel` (if it exists, hence the optional chaining `?`.) is equal to the color property of the `targetPixel`. This expression returns `true` if the colors match, and `false` otherwise. The `every` method will return `true` if the expression `playerPixel?.color === targetPixel.color` is `true` for all `targetPixel` objects in the `targetPattern` array. In other words, `isMatch` will be `true` if the player's pattern (represented by the `pixels` array) matches the target pattern exactly. ```typescript if (isMatch) { score++; targetPattern = generateTargetPattern(); displayTargetPattern(); updateScore(); resetGrid(); // Reset the grid after a correct guess } ``` This `if` statement is executed if `isMatch` is `true`, meaning the player's pattern matches the target pattern: * `score++` increments the player's score by `1`. * `targetPattern = generateTargetPattern()` generates a new target pattern by calling the `generateTargetPattern` function and assigns the result to the `targetPattern` variable. * `displayTargetPattern()` renders the new target pattern on the game screen by calling the `displayTargetPattern` function. * `updateScore()` updates the score display on the game screen by calling the `updateScore` function. * `resetGrid()` resets the game grid to its initial state by calling the `resetGrid` function. This is done to clear the player's previous pattern and prepare for the next round. #### Reset the grid The `resetGrid` function resets the pixel colors to white and updates the canvas: ```typescript function resetGrid(): void { pixels.forEach(pixel => pixel.color = '#FFFFFF'); updateCanvas(); } ``` Let's break this function down further: ```typescript function resetGrid(): void { ``` We declare a function called `resetGrid` that doesn't return any value (indicated by the `void` return type). The purpose of this function is to reset the game grid to its initial state. ```typescript pixels.forEach(pixel => pixel.color = '#FFFFFF'); ``` This code above uses the `forEach` method to iterate over the `pixels` array, which contains the state of all pixels in the game grid. For each `pixel` in the `pixels` array, the expression `pixel.color = '#FFFFFF'` is executed. This line sets the color property of the pixel object to the hexadecimal value `'#FFFFFF'`, which represents the color white. By setting the color of all pixels in the `pixels` array to white, we effectively reset the visual state of the game grid, clearing any previously colored pixels. ```typescript updateCanvas(); } ``` This code above calls the `updateCanvas` function, which is responsible for updating the visual representation of the game grid on the screen based on the state stored in the `pixels` array. While the previous line `(pixels.forEach(pixel => pixel.color = '#FFFFFF'))` updates the `pixels` array by setting all pixels to white, the `updateCanvas` function is responsible for reflecting these changes in the actual user interface (UI) by rendering the updated pixel colors on the game grid to the user. #### Update the Canvas The `updateCanvas` function updates the grid on player click to the colour red. ```typescript function updateCanvas(): void { pixels.forEach(pixel => { const pixelButton = document.querySelector(`#canvas button[data-x="${pixel.x}"][data-y="${pixel.y}"]`) as HTMLButtonElement; if (pixelButton) { pixelButton.style.backgroundColor = pixel.color; } }); } ``` Let's break this function down further: ```typescript function updateCanvas(): void { ``` We declare a function called `updateCanvas` that doesn't return any value (indicated by the `void` return type). The purpose of this function is to update the visual representation of the game grid on the screen based on the current state of the `pixels` array. ```typescript pixels.forEach(pixel => { const pixelButton = document.querySelector(`#canvas button[data-x="${pixel.x}"][data-y="${pixel.y}"]`) as HTMLButtonElement; ``` This code above uses the `forEach` method to iterate over the `pixels` array, which contains the state of all pixels in the game grid. For each `pixel` in the `pixels` array, the following code is executed: * `const pixelButton = document.querySelector(#canvas button[data-x="${pixel.x}"][data-y="${pixel.y}"]) as HTMLButtonElement`; selects an HTML button element from the document that represents the current pixel. The `document.querySelector` function uses a `CSS` selector to find the button element with the following criteria: * It is a descendant of an element with the ID `'canvas'`. * It is a `