Board Games

Many board games involve moving around in 2 dimensions on a playing board.
For example, the Game of Life board is shown below.  Although the board
is 2-dimensional, the actual path is linear.



In the Game of Life, each player has a car that they move around on the board.
At each position on the board, something happens.  These events often involve
drawing a card from a stack of cards. The event might involve winning
or losing money, moving to a different location, etc.  Each player has
a collection of money, as well as collecting other objects along the way.
Sometimes an object can be used to defeat an enemy or access a "locked" location.

You don't need to make the Game of Life.  You can make any "board game"
where pieces move around on the board and things happen.  You can make
up your own game and your own rules, but the rules should be understandable.

Since we are making the game inside a computer, we can expand our concept
of events to include viewing an image, watching a video, visiting a web-site, etc.

Starting with a 2-Dimensional array of positions (Buttons), placed on top
of a background image, we can create a board game that plays by the rules
that we choose to program.

Squares

You can make squares the same way you did in your calendar - use DIVs with
style="position:absolute..." and background colors.  But don't organize your squares
in rows and columns.  Do make a clear PATH to see what square comes before and
after another.  Some squares might contain some text, others might be blank.

You don't need to make curved paths - they can just be rectangular, moving up,
down, left and right.

Moving

It is difficult to control correct moves from one square to the next,
especially if dice tell how many squares to move.  You can have the program
generate a random number, but rely on the player's HONESTY  to click
on the correct next square by counting correctly. 

Rules

Some locations might be "blocked" or "forbidden". 
This information can be recorded in the button - for example, b9.style.visibility = "hidden".
Then we can check whether it is blocked by:  b15.style.enabled = false

You can force the player to follow a specific path by landing on a square,
answering a question correctly, and then "open" another square with:
b19.style.enabled = true

Activities

You should RESPOND when the player clicks on a square, something should HAPPEN.
For example, it might play a YouTube video (preferably only a small part of the video)
or an image, and then ask a question.  If the player answers correctly, they could win money
or some useful object, like a key or a weapon.  If they answer incorrectly, they could
lose money or energy, or by sent back to the beginning square.

Other possibilities include:
- player must roll dice and get a high number, otherwise they are punished
- player must answer a question correctly to receive a reward
- player must use Google to find the answer to a question, like "Who invented the Web?"

These things can be programmed with specific JavaScript commands, like:
    b15.onclick = function()
    {   ans = prompt("What year was FIS founded?";
         if(ans == 1961)
         {  money = money + 1000; }
         else
         {  output("You must go back to the start.");
              location = 0;
         }
   }

These activities might be clearly stated on the squares (innerHTML)
or they can be "surprise" events, marked with ???.

Disabled After Use

It might be sensible to disable a square after it has been used,
especially if it involves a very simple question or a lot of money.
-    buttons[location].style.enabled = false;

Resetting Other Players

In many board games, you can "reset" another player by landing on the
same square where that players piece is located.  Then that sends the
player back to "start", e.g. locationRed = 0

Winning

Most board games require the player to reach the "end" square to finish.
Other possibilities are:
-  earn a lot of money, like a million Euros
-  collect specific objects
-  killing all the enemies

Enemies

Games usually have several players.  There might also be "enemies" -
evil monsters that can hurt a player.  Players might "battle" with the enemies
when they contact them.  If they win a battle, it can destroy the enemy.
If they lose against the enemy, they can be punished by:
- losing a "life"
- losing money
- be sent back to start

Project

Your project is to create a board game, using either Buttons
to identify the positions on the board.  You must decide on the rules
of your game.  Your game could have a "theme" or "story" - for example, the
players are lost in outer space and must find their way back to earth.
Or they must navigate a shopping mall, buying useful items along the way.

The game should start with an explanation, telling the story and/or rules.
Then the board appears and the player(s) can move around the board
by clicking on the next position.

The program should include any or all of the following features:
- shows the rules and/or story at the beginning
- shows a board of positions marked with Buttons
- players can move a random amount by rollling dice or spinning a spinner
- program prevents illegal moves (jumping to far) and correctly
   performs legal moves
- at many positions contain "activities" (as described above)
- some positions are labelled to show their activity,
   other positions have hidden (secret) activities
- some squares make the player "jump" to some other position
- there are "properties" like lives, money, health, points, collected items,
   and the program correctly keeps track of these properties
- there is a way to win or finish the game
- there are some evil enemies to fight against
- there are multiple players
- make use of web-sites, pictures or videos (displayed in an iframe)
- there must be "interactive" components, like answering questions
   or making decisions (like taking a short-cut)
- any other good ideas that make the game FUN and CHALLENGING

You don't need to do ALL of the things described above, but the more
you do the better.  In any case, the game must be FUN and CHALLENGING.

TEAMS

You should work in teams of 3 students (some might have 3 or 4).
You may not work alone, although each student will probably spend time
doing work alone.  But you must discuss and organize the game as a group.

You may find it useful to do "experiments" on separate computers,
but you probably want to create your whole game using a one "Main" computer.

Be sure to make REGULAR BACKUPS, especially if you are
working online.  You should make a backup every 10 minutes or so.

DUE DATE -
Your game is due on 13 Dec 2018 at 18:00.  We do not have class on 14 Dec.

Organize your time sensibly so that you have a finished,
playable game on the due date.  If your team contains students
who will be absent for a tournament, you will need to
organize the work accordingly.  You probably need to do
some useful work outside class time.