alicedevine / clegg-fortunes

A pure HTML5+JS game that follows the rules of Family Feud.

Clan Contest

The rules of this game mostly follow the rules of a well known TV show.

Clan Contest currently runs on browsers that support .ogg audio files (Firefox, Chrome/Chromium, Opera). It does not need an internet connection. The game was developed and tested with Firefox.

Instructions

You need a computer with two connected screens (e.g. internal laptop screen + attached projector). Do not use the clone mode; both screens must show different pictures (extended desktop mode).

1. open index.html in your browser
2. click on "open game window"
3. move the game window to the projector
4. switch the game window to fullscreen mode (Firefox: press F11)

License

• The code of Clan Contest is made available under the GPLv3.
• The sound effects are provided under a Creative Commons Attribution license. Read more on the specifics in sfx/LICENSE.txt.
• The logo is in the public domain.

Files and Folders

• gfx/: image files
• lib/: JS libraries
• sfx/: sound effects
• style/: CSS files

index.html

control window; open this to start the game

popup.html

game window; must be opened through the control window

questions.js

game configuration; edit this file to define answers, points and the like

Developers

Changes in the game state are represented by associative arrays (key value pairs) with the changed state variable name as key and its new value as value.

Settings

Setting	Data Type	Description
teams.{0,1}.name	string	name of the given team (0 = left team, 1 = right team)
teams.{0,1}.points	int	total points of the given team
teams.{0,1}.misses	int	number of mistakes of the given team in the current round
screen	string	name of the shown screen (splash, rounds, finals)
round.id	int	current round index (0 to number of round - 1)
round.points	int	points gained in the current round until now
round.finished	bool	true when the current round was finished (winning team was selected)
round.answers_shown.[0..n_answers-1]	int	negative if the answer with the given index is not yet shown zero or greater if the answer should be shown The exact value denotes the current round (round index from which the game window should take the answer).
finals.points	int	points gained in the finals until now
finals.answers.{0,1}.[0..n_questions-1].id	int/string	negative if the answer of the given player to the given question was not yet given zero or greater if an answer was already given. The exact value denotes the index into the array of correct answers for the given question. If it is a string (check with typeof(...) == 'string'), contains the (wrong) answer given.
finals.answers.{0,1}.[0..n_questions-1].answer_shown	bool	true when the answer of the given player to the given question should be shown
finals.answers.{0,1}.[0..n_questions-1].points_shown	bool	true when the points for the answer of the given player to the given question should be shown

Event Handling

Event handling (in the control window) works as follows:

1. button is pressed, calls event handler using onclick
2. event handler determines neccesary changes to state variables
3. event handler puts all changes into an associative array and calls commit_changes()
4. commit_changes() distributes the changes to both the control and game views and saves the changes in the undo history
5. the views process the received information using a state_changer object and make the neccesary changes to their state

How the State Changer works

The game's state is represented by an object - check initialise_variables.js line 27 to see all the things in the 'state' object.

If a function wants to change the state of the game (eg. update the score), it has to create a "changes" object, and "publish" those changes.

eg. if I wanted to update the score:

var changes = {
   'round.points': 3
};
publish_changes(changes);

The "state changer" object then contains a function called "round", and the "publish_changes" function calls it like this:

state_changer.round("points",3);

There are two reasons we don't just directly call that:

1. the publish_changes function will send the changes to the control window AND the game window
2. it stores the last state, giving the undo/redo function

The state changer object is literally just an object containing the functions like "round"

state_changer = {
   finals = function(args, value) { .... },
   round = function(args, value) { .... },
   etc etc
}