tane10 / coloured_lines_javascript_game

A interactive HTML5 / CSS web game

Coloured Lines

---

Purpose:

This is a simple line drawing web application game. Developed with HTML/CSS/JavaScript/JQuery.

Your goal is to turn all the white squares red and make it from the start red square to the finish red square, without touching the green squares or releasing your left mouse click.

Please note that this demo is after 2 sprints over the course of a week, and in the future, I would like to add extra features, such as: *A timer, lives, more levels, responsiveness and power ups.

Functionality:

Coloured Lines application, has 3 different levels, winning and quit screens, and built in homepage with instructions.

How to play:

MAKE SURE THE BROWSER IS IN FULL SCREEN MODE WHEN PLAYING THE APPLICATION!

To play the game you must open the splashPages.html then click start, this will take you to the first level.

To start drawing you must left click and hold it down on the red square on the left side of the screen, then move you mouse along the white squares with left click still down thus turning any white square you go over red.

Tip: All the start squares are on the left side of the screen

To complete the level, you MUST turn all white squares red and then release your left mouse click on the red finish square, this will automatically take you to the next level.

You have unlimited amount of try's and can retry a level as much as you want. However, you can only quit if you lose or are at the Homepage or How To page.

How to lose:

• You will lose if you release left click on any square that is not the red finish square.
• You will lose if you touch a green square.

Implementation

The functionality has been implemented using the following features:

• HTML 4
• JQuery 3.3.1
• JavaScript 1.8.5
• CSS Version 4