Web Tutorial: Word Search Game (Part 4/4)

Nice work, guys. Stuff is working. All we really need to do to complete the job is to clean up the layout, add content, and populate the rest of the grid. Let's get to it.

Populating the grid

Right now, only the letters from the hidden words are shown, which makes the game easy to test but also makes it almost impossible to lose. So let's tweak the script to add in random letters. This will be part of the populateGrid() method. Add in a nested For loop to get to every element in the squares array.

populateGrid: function ()
{
    $(".wordgrid").html("");
    this.squares = [];

    for (var x = 0; x < this.maxSize; x++)
    {
        this.squares[x] = [];

        for (var y = 0; y < this.maxSize; y++)
        {
            this.squares[x].push
            (
                {
                    letter: "",
                    selected: false,
                    correct: false,
                    dir: undefined,
                    intersected: false
                }
            );

            var square = $("<div><div>");
            square.attr("data-x", x);
            square.attr("data-y", y);
            square.addClass("letter");
            square.click
            (
                (e) =>
                {
                    this.displaySelected(e.currentTarget.dataset.x, e.currentTarget.dataset.y);
                }
            );

            $(".wordgrid").append(square);
        }    
    }

    var unassigned = [];
    var i;
    do
    {
        this.populateGridWithWords();

        unassigned = this.words.filter((x) => {return !x.assigned;});
    }
    while (unassigned.length > 0);

    for (var x = 0; x < this.maxSize; x++)
    {
        for (var y = 0; y < this.maxSize; y++)
        {

        }    
    }                        
},

If the letter property is an empty string, generate a random character from the ASCII table. Set the letter property to that value, then use jQuery to ensure that the letter is in the grid at that position.

for (var x = 0; x < this.maxSize; x++)
{
    for (var y = 0; y < this.maxSize; y++)
    {
        if (this.squares[x][y].letter == "")
        {
            var randomChar = String.fromCharCode(this.generateRandomNo(25) + 97);
            this.squares[x][y].letter = randomChar;
            $(".letter[data-x=" + x + "][data-y=" + y + "]").html(randomChar);
        }
    }    
}

Ah, there it is... a fully-populated grid.

Cleaning up

Now all we need to do is get rid of the red lines.

div {outline: 0px solid #FF0000;}

Like magic!

Adding content

This is probably the easiest part. All throughout this web tutorial, we've been coding in a way that allows for new content to be added without needing to change anything outside of where the content is added.

So go to the themes array and insert more objects.

let themes =
[
    {
        title: "Sea Life",
        picture: "sealife",
        description: "Look for all life you can find in the oceans.",
        words: ["shark", "coral", "whale", "starfish", "jellyfish", "turtle", "anemone", "octopus", "swordfish", "squid", "lobster", "seahorse", "walrus", "lamprey", "prawn", "oyster", "barracuda", "mackerel", "clownfish", "plankton"]
    },
    {
        title: "Birds",
        picture: "birds",
        description: "Look for all kinds of birds.",
        words: ["pelican", "kingfisher", "woodpecker", "swallow", "sparrow", "eagle", "hummingbird", "cuckoo", "robin", "raven", "penguin", "pigeon", "albatross", "ostrich", "goose", "flamingo", "nightingale", "thrush", "crane", "heron"]
    },
    {
        title: "Food",
        picture: "food",
        description: "Look for anything you can eat.",
        words: ["butter", "bread", "yoghurt", "mutton", "pudding", "cereal", "steak", "noodles", "porridge", "salad", "sandwich", "omelette", "cupcake", "bacon", "cupcake", "chocolate", "sugar", "pancake", "pizza", "burger"]
    },
    {
        title: "Sports",
        picture: "sports",
        description: "Look for anything related to sports such as people, places or equipment.",
        words: ["stadium", "hockey", "badminton", "referee", "umpire", "football", "discus", "goalkeeper", "baseball", "cricket", "tennis", "racquet", "golfer", "boxer", "javelin", "track", "arena", "archery", "medal", "trophy"]
    },
    {
        title: "Music",
        picture: "music",
        description: "Look for anything related to music such as instruments or people.",
        words: ["choir", "chorus", "harmonica", "orchestra", "trumpet", "trombone", "piano", "melody", "ballard", "clarinet", "accordion", "flute", "guitar", "cello", "violin", "fiddle", "conductor", "rhythm", "zither", "xylophone"]
    }
];

You'll of course, want to add the following images as well.

birds.png

food.png

music.png

Here's what you get... a random theme with every refresh!

This part of the web tutorial is pretty short, but that's because we did so much great work earlier on. Thanks for joining me today and I hope to see you again soon.

Here's hoping you always find what you're looking for!
T___T