Project iTimeOut
| My first JavaScript assignment/game. You can find the project by clicking the Github icon. -> |  |
Game Overview
iTimeOut is a cross-breed game of Hangman and Time Bomb (goes by many names). It is a single-player word game where you have approximately a minute to guess five randomly chosen words. First time players are recommended to watch the intro, but an option to skip intro is provided. You can alternatively skip the intro if you want.
The game will present the dashes, like in Hangman, and ask a (security) question, like ‘What is your favourite fruit?’ And that is your hint to start guessing (the mum’s favourite) fruit (read backstory on website), by clicking on the alphabet buttons on the screen, while the timer runs. If you guess the full word, the next question will present itself, for you to guess.
Scoring is word-based. If you get one word in the time limit, you get 10 points, two is 20, and so on. If you get all five words right in time, you have bonus points added to your score, based on your timer div.
The Backstory
Serah Loo has just failed her midterms and what’s worse is, her grades are going to be sent to her mum. This will be the last straw and most likely, the end to her phone usage, a.k.a. her social life, once and for all. Help Serah Loo answer her way through the security questions to delete the email from her mum’s account before the time runs out. If you don’t, well, bad things will happen.
Design and Development
Website
Home page of overall website
The website created was basic as this was not the primary focus of the task. A simple purple-blue theme that crossed over into multi-colors into certain parts of the website. The character walking across did catch the attention (and did get annoying over time).
Login page
The website required a simple registration and login setup, that used localStorage (refer to section below). Login was required to play the game. Validation was run on the input fields (listed below).
Login :-- Incorrect password
- User does not exist
- Blank input fields
Registration :-- Blank input fields
- Invalid email format
- User already exists
Rankings page
A rankings system was a key requirement for the game, and although you could potentially have an endless number of places and have all data stored and displayed, I chose to highlight just the top ten players, which is, again, stored on localStorage.
- Incorrect password
- User does not exist
- Blank input fields
- Blank input fields
- Invalid email format
- User already exists
Game
iTimeOut game start screen
There are multiple ways to get to the game screen, by clicking any of the first three buttons in the screenshot above.
- Play Intro takes you through the intro (there is an option to skip), goes through the How to Play, and finally gets to the game.
- How to Play goes through the instructions and takes you to the game.
- Play Game directly takes you to the game.
Note: The screenshot taken is from the newer version of the game that can be played online. The High Scores button will show you the top ten players. 
iTimeOut game screen visual
You have about a minute to guess all five answers. The moving bar at the top that serves as the timer is approximated to a minute. The score is incremented by ten for every guessed answer. There is a bonus score that is added, based on the remaining time, if the player wins.
- Play Intro takes you through the intro (there is an option to skip), goes through the How to Play, and finally gets to the game.
- How to Play goes through the instructions and takes you to the game.
- Play Game directly takes you to the game.
localstorage
The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. For this assignment, localStorage is used to store basic data. This includes user details on registration, active user session, game data and user rankings (an array of length ten).
Evaluation
iTimeOut: Original project and current game
Being new to JavaScript, the game works well and was a great starting point to have. There are a few quirks to work out, like the on-screen keyboard in the game, use of keys and maybe, moving through the questions automatically.
4 Years Later
I decided to put the game up on this site. With this in mind, I had to make it compatible so it was playable on the web. Looking over my code, it was illegible. Even with numerous comments, some of the functions and logic were a bit weird, and some of the code could be made obsolete.
I started working on not only moving the game onto Blogger, but also improving the code with the knowledge and skills I now have. It turned out great. I did have to make a few adjustments for it to work on the phone (but eventually, I just settled with making the user rotate their screen). I may have to move some things around for phone players, but the laptop/desktop version works great.
You can play the game here:
Play! Enjoy!
Beat my score if you can...And don't forget to save your score to be on the leaderboard.
0 comments:
Post a Comment