Web Editor by 101Computing.net

HTML

CSS

BODY {
  font-family: verdana;
  margin: 6x 20px;
}
H1 {
  text-align: center;
  color: #FF00AA;
}
#room {
  margin: auto;
  width: 520px;
}

#North, #West, #East, #South {
  width:140px;
  height: 160px;
  background-color: #EEEEEE;
  border: 1px solid #FF00AA;
  overflow: auto; 
}

#North, #South {
  margin: auto;
  clear: both;
}

#West {
  float: left;
}
#East {
  float: right;
}

#player {
  margin: 0px 12x;
  width: 236px;
  text-align: center;
  float: left;
}

BUTTON {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  margin: 5px;  
  border-color: #FF00AA;
  color: #AA00AA;
  border-radius: 6px;
}

button:hover {
  background-color: #AA00AA;
  color: #FFFFFF;
}

#reset {
  display: block;
  margin: 0px auto 20px auto;
}

BODY {
background: repeating-linear-gradient(67.5deg, hsla(200,0%,99%,0.05) 0px, hsla(200,0%,99%,0.05) 1px,transparent 1px, transparent 54px),repeating-linear-gradient(157.5deg, hsla(200,0%,99%,0.05) 0px, hsla(200,0%,99%,0.05) 1px,transparent 1px, transparent 54px),repeating-linear-gradient(67.5deg, hsla(200,0%,99%,0.05) 0px, hsla(200,0%,99%,0.05) 1px,transparent 1px, transparent 25px),repeating-linear-gradient(0deg, hsla(200,0%,99%,0.05) 0px, hsla(200,0%,99%,0.05) 1px,transparent 1px, transparent 25px),repeating-linear-gradient(67.5deg, hsla(200,0%,99%,0.05) 0px, hsla(200,0%,99%,0.05) 1px,transparent 1px, transparent 12px),repeating-linear-gradient(157.5deg, hsla(200,0%,99%,0.05) 0px, hsla(200,0%,99%,0.05) 1px,transparent 1px, transparent 12px),linear-gradient(90deg, hsl(259,49%,41%),hsl(259,49%,41%));
}
#North, #West, #East, #South {
background: repeating-linear-gradient(135deg, rgba(86, 86, 86, 0.02) 0px, rgba(86, 86, 86, 0.02) 22px,rgba(202, 202, 202, 0.02) 22px, rgba(202, 202, 202, 0.02) 67px,rgba(247, 247, 247, 0.02) 67px, rgba(247, 247, 247, 0.02) 113px,rgba(135, 135, 135, 0.02) 113px, rgba(135, 135, 135, 0.02) 132px,rgba(157, 157, 157, 0.02) 132px, rgba(157, 157, 157, 0.02) 153px,rgba(53, 53, 53, 0.02) 153px, rgba(53, 53, 53, 0.02) 171px,rgba(17, 17, 17, 0.02) 171px, rgba(17, 17, 17, 0.02) 181px,rgba(179, 179, 179, 0.02) 181px, rgba(179, 179, 179, 0.02) 220px),repeating-linear-gradient(135deg, rgba(58, 58, 58, 0.02) 0px, rgba(58, 58, 58, 0.02) 41px,rgba(198, 198, 198, 0.02) 41px, rgba(198, 198, 198, 0.02) 60px,rgba(176, 176, 176, 0.02) 60px, rgba(176, 176, 176, 0.02) 99px,rgba(173, 173, 173, 0.02) 99px, rgba(173, 173, 173, 0.02) 146px,rgba(164, 164, 164, 0.02) 146px, rgba(164, 164, 164, 0.02) 167px,rgba(179, 179, 179, 0.02) 167px, rgba(179, 179, 179, 0.02) 205px,rgba(228, 228, 228, 0.02) 205px, rgba(228, 228, 228, 0.02) 230px,rgba(23, 23, 23, 0.02) 230px, rgba(23, 23, 23, 0.02) 241px),repeating-linear-gradient(135deg, rgba(190, 190, 190, 0.02) 0px, rgba(190, 190, 190, 0.02) 15px,rgba(74, 74, 74, 0.02) 15px, rgba(74, 74, 74, 0.02) 45px,rgba(98, 98, 98, 0.02) 45px, rgba(98, 98, 98, 0.02) 71px,rgba(43, 43, 43, 0.02) 71px, rgba(43, 43, 43, 0.02) 95px,rgba(131, 131, 131, 0.02) 95px, rgba(131, 131, 131, 0.02) 118px,rgba(21, 21, 21, 0.02) 118px, rgba(21, 21, 21, 0.02) 130px,rgba(77, 77, 77, 0.02) 130px, rgba(77, 77, 77, 0.02) 167px,rgba(231, 231, 231, 0.02) 167px, rgba(231, 231, 231, 0.02) 189px),linear-gradient(90deg, rgb(251, 251, 251),rgb(250, 250, 250));
}

JavaScript

var names = [];
var northList = [];
var southList = [];
var eastList = [];
var westList = [];

//A function to move all remaining participants to the four corners (randomly)
function fourCorners() {
  var numberOfPlayers = names.length;
  var north = document.getElementById("North");
  var south = document.getElementById("South");
  var east = document.getElementById("East");
  var west = document.getElementById("West");
  
  //empty the four corners
  north.innerHTML = "";
  south.innerHTML = "";
  east.innerHTML = "";
  west.innerHTML = "";
  northList = [];
  southList = [];
  eastList = [];
  westList = [];
  
  //Move players to the four corners
  for (i = 0; i < numberOfPlayers; i++) {
    var room = Math.floor(Math.random()*4);
    switch(room) {
    case 0:
      north.innerHTML = north.innerHTML + names[i] + "<br/>";
      northList.push(names[i]);
      break;
    case 1:
      west.innerHTML = west.innerHTML + names[i] + "<br/>";
      westList.push(names[i]);
      break;
    case 2:
      east.innerHTML = east.innerHTML + names[i] + "<br/>";
      eastList.push(names[i]);
      break;
    case 3:
      south.innerHTML = south.innerHTML + names[i] + "<br/>";
      southList.push(names[i]);
      break;
    }
  }
}

//Start again
function resetGame() {
  names = ["Kacy", "Lucas", "Ali", "Cheung", "Leila", "Jeff", "Fran", "Noah", "Eldece", "Marwan", "Laura", "Harry", "Tim", "Jess", "Keziah", "Sivanujan", "Millie", "Tasmiya", "Reuben", "Ruby", "Finley", "Oliver"];
  fourCorners();
}

//This function is triggered when the central player chooses one of the four corners (by clicking on one of the four butttons)
function clickCorner(corner) {
alert("You have clicked on " + corner + ".\n\nComplete the code so that all the names in this corner are out of the game and the remaining players randomly moved to the four corners.\n\nThe game should carry on until all either one player is remaining or all players have been taken out.");  
}

Preview live webpage

Console logs, warnings and errors