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.