Four corners is a children’s game, often played in primary/elementary schools. The game can be played in a classroom. One player stand in the middle of the room with a blindfold. All the other participants choose one of the four corners of the room. For the purpose of this game we will call the four corners of the room North, East, South and West. The central player, “it”, designates one corner of the room. All the participants standing in this corner are out of the game. The remaining participants then move to a different corner of their choice and the game carries on until all participants have been caught.

The aim of this challenge is to recreate the game of four corners using HTML, CSS and JavaScript. The names of all participants will be stored in a JavaScript array called names as follows:

var names = ["Kacy", "Lucas", "Ali", "Cheung", "Leila"];

You can then access a value within an array using the appropriate index. i.e.

var player = names[0];

You can find out the number of items in an array using the length property:

var numberOfPlayers = names.length;

You can sort the values of an array using the sort() method:

names.sort();

You can use the push() method to append a new value in the array.

names.push("Jeff");

You can use the pop() method to remove the last value in the array.

var player = names.pop();

You can reset/empty an array:

names = [];

You can join two or more arrays together using the concat() method:
For instance you can join two arrays together:

var team1 = ["Kacy", "Lucas", "Ali", "Cheung", "Leila"];
var team2 = ["Jeff", "Fran", "Noah", "Eldece", "Marwan"];
var allPlayers = team1.concat(team2);

You can join three arrays together (an so on):

var team1 = ["Kacy", "Lucas", "Ali", "Cheung", "Leila"];
var team2 = ["Jeff", "Fran", "Noah", "Eldece", "Marwan"];
var team3 = ["Laura", "Harry", "Tim", "Jess", "Keziah"];
var allPlayers = team1.concat(team2, team3);

Four Corners Game

Press the “Edit on Codepen” button to access the code in full screen mode.

See the Pen
Four Corners by 101 Computing (@101Computing)
on CodePen.

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area