For our first project, we were given four days to design and build an in-browser game using HTML, CSS and JavaScript (jQuery library used). WeeWords was a product of my own imagination, rather than a remake of an existing game. It requires the player to enter words made up of letters randomly appearing on screen, and features 3 levels with specific win conditions.
Visit website for best playing experience (the game was not designed for mobile).
Please be aware that Heroku apps go to sleep after 30 mins of inactivity and may take a little time to load
WeeWords takes place in a 100% CSS-built and animated environment, with the weather changing on each level as the player progresses.
Level one gives the player 30 seconds to fulfil the required score, using any letters they can see on screen. The letters are picked at random from a weighted alphabet (so that you get more E’s than Z’s etc.) and assigned a random position on screen. They shrink and fade away after a set period of time, at which point they become unavailable for use in the player’s words.
In level two, the difficulty increases as the player is only able to use blue letters. In level 3, the player may only use red letters and words under 4 letters long are not allowed.
The win logic requires a submitted word to fulfil a number of conditions to be passed as a valid word:
function returnResult() {
if (wordIsValid && invalidLetters.length === 0 && !wordIsRepeat) {
$wordLog.append($(`<span>${submittedWord}</span>`).addClass('green'));
scoreUpdate();
} else {
$wordLog.append($(`<span>${submittedWord}</span>`).addClass('red'));
}
}
If level 3 is beaten, the player is presented with a final score (the sum of each level score) and can restart the entire game and try to beat it.
I was pleased with the final product, which I feel looks good an plays well. The game could be developed into a larger game with new levels and challenges to further test the player’s skills.