Domgame– Map Icons and Draw Scene

Once again no links in these posts until the last post.

Describe the process for clearing and mapping icons to the DOM. What are the three steps and the core functions? Describe how the four methods used for this process work – createElementfirstElementChildremoveChild, and appendChild.

First you have to select the class (.icons) and make a variable pertaining to the space of the icons.

const iconSpace = document.querySelector('.icons');

Then you have to select the firstElementChild which selects the first child of a parent-child.

//to clear icons on page:
function clearIcons() {
    while (iconSpace.firstElementChild) {
        iconSpace.removeChild(iconSpace.firstElementChild)
    }
}

Then after you select the first element child you then have to remove the icons so it can be replaced with a new icon by using removeChild which gets added with the first element child (takes the argument.)

After that, you will appendChild which is to replace the previous icon with the new icons for the next scene.

function mapIcons(level) {
    scene[level].icons.forEach(function (iconObj) {
        iconSpace.appendChild(build(iconObj))
    })
}

This is the function to drawScene:

function drawScene(level) {
    mapIcons(level);
    mapInstructions(level);
}

This is how to map icons :

function mapIcons(level) {
    scene[level].icons.forEach(function (iconObj) {
        iconSpace.appendChild(build(iconObj));
    })
}

When you are finished with all the different part you will then put everything you did in a simplified functions:

//function for the next scene
function nextScene(){
    clearIcons();
    clearInstructions();
    drawScene(level);
}

Leave a comment

Your email address will not be published. Required fields are marked *

css.php