StevenJoynt/BlockBusters.html

## README.md

      
    Raw
  

              README.md
            
          
    Block Busters

What is it?

This is just a simple game board.
It is loosely based on the TV game show. The original game used hexagonal cells. This board uses squares instead (because they are easier to draw).
The file does not contain any game logic, so the computer doesn’t understand how to play the game. It’s about as clever as a piece of paper!
What's the point?

It is intended to be shown on a computer projector screen and used in a kids club to show the current state of a game.
The operator can click on the squares in various positions to choose from the different display options:

Middle of the square - Gold flashing selected square
Towards the right of the square - Green Right Arrow
Towards the bottom of the square - Purple Down Arrow
Anywhere else on the square - eg towards the top left - returns to a free square with a grey letter

The players can shout out which letter they want to claim, then the operator needs to click the middle of that letter. Then depending on the outcome, click the right or bottom margin to fill in the correct symbol.
Note: The page does not remember the state of the game. If you switch to a different web page, or press the “back” button, the game will be lost and all cells will be reset to numbers. So if you want to start a new game, just reload it, or use F5 to refresh the page.
How to play the game

To play this game, the green team is trying to build a connected path from left to right, while the purple team is trying to create a path from top to bottom.
Teams take it in turn to choose a letter from the grid.
They then have to perform some task - eg answer a quiz question, or catch a ball, etc.
If they complete the task, they have won the square and it is filled with their colour.
If they fail, the square is filled in with their opponents colour - effectively blocking their path, and giving their opponents an extra square on the board which they may use to form their own path. If the square would complete the opponents path, they must perform their own task and win it for themselves.
If the game ends in a stalemate (it is not possible to complete a path for either team) the team with the most squares wins the game.
How do I make it work?

Just open the HTML file in your browser. You don't need to upload the HTML file to a web site, you can copy it to your Desktop and just double-click on it to display it.
Can I add it to my web site?

If your web site allows you to create pages containing raw HTML including CSS and JavaScript, you just need to copy the relevent parts from the HTML file. Starting just after <!-- Start Snip --> and ending just before <!-- End Snip -->.
Some web sites don't allow you to include raw HTML because it may be a security risk for other visitors. There are usually features or add-on modules available to administrators which allow this kind of content.
To add this to a HumHub Space, you need to log in as the administrator. Then you can use the "Custom Pages" module to "Create new layout" in the "Template" tab. Copy the "Snip" section from my HTML into the "Source" box.

  
## BlockBusters.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Block Busters game board">
  <meta name="author" content="Steve Joynt">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<!-- Start Snip -->

<style>
  .BlockBusters {
    display: table;
    margin: auto;
  }
  .BlockBusters h1 {
    text-align: center;
    font-size: 50px;
    color: #732;
    font-weight: bold;
  }
  .BlockBusters table {
    border-collapse: collapse;
  }
  .BlockBusters td {
    border: 10px inset black;
    width: 100px;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    font-size: 70px;
    color: #888;
  }
  .BlockBusters_Team1 {
    background-color: #cfc !important;
    color: #060 !important;
  }
  .BlockBusters_Team2 {
    background-color: #c8f !important;
    color: #406 !important;
  }
  .BlockBusters_Selected {
    animation: BlockBusters_Flashing 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
  }
  @keyframes BlockBusters_Flashing {
    to { background-color: gold; }
  }
  .BlockBusters_Corner {
    border-top: hidden !important;
    border-left: hidden !important;
  }
</style>

<div class="BlockBusters">
  <h1>Block Busters</h1>
  &nbsp;<br>
  <table id="BlockBustersTable">
  </table>
  &nbsp;<br>
  &nbsp;<br>
  &nbsp;<br>
</div>

<script>
  var BlockBusters_Team1 = "&rarr;";
  var BlockBusters_Team2 = "&darr;";
  function BlockBusters_Click(event) {
    var td = event.currentTarget;
    var rect = td.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;
    if ( x > 30 && x < 70 && y > 30 && y < 70 ) {
      // click in middle
      td.innerHTML = td.BlockBustersCell;
      td.className = "BlockBusters_Selected";
      return;
    }
    if ( x > 70 && y < 70 ) {
      // click at right
      td.innerHTML = BlockBusters_Team1;
      td.className = "BlockBusters_Team1";
      return;
    }
    if ( y > 70 && x < 70 ) {
      // click at bottom
      td.innerHTML = BlockBusters_Team2;
      td.className = "BlockBusters_Team2";
      return;
    }
    // click anywhere else
    td.innerHTML = td.BlockBustersCell;
    td.className = "";
  }
  function BlockBusters_Cells() {
    var table = document.getElementById("BlockBustersTable");
    var tr;
    var td;
    var x;
    var y;
    var i = 0;
    for ( y = 0 ; y < 6 ; y++ ) {
      tr = table.insertRow();
      for ( x = 0 ; x < 6 ; x++ ) {
        td = tr.insertCell();
        if ( y == 0 ) {
          if ( x == 0 ) {
            td.className = "BlockBusters_Corner";
          } else {
            td.innerHTML = BlockBusters_Team2;
            td.className = "BlockBusters_Team2";
          }
        } else {
          if ( x == 0 ) {
            td.innerHTML = BlockBusters_Team1;
            td.className = "BlockBusters_Team1";
          } else {
            td.BlockBustersCell = td.innerText = String.fromCharCode(97 + i++);
            td.addEventListener('click', function(event){
              BlockBusters_Click(event);
            });
          }
        }
      }
    }
  }
  BlockBusters_Cells();
</script>

<!-- End Snip -->

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<meta name="description" content="Block Busters game board">
	<meta name="author" content="Steve Joynt">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>

	<body>

	<!-- Start Snip -->

	<style>
	.BlockBusters {
	display: table;
	margin: auto;
	}
	.BlockBusters h1 {
	text-align: center;
	font-size: 50px;
	color: #732;
	font-weight: bold;
	}
	.BlockBusters table {
	border-collapse: collapse;
	}
	.BlockBusters td {
	border: 10px inset black;
	width: 100px;
	height: 100px;
	text-align: center;
	vertical-align: middle;
	font-family: sans-serif;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	font-size: 70px;
	color: #888;
	}
	.BlockBusters_Team1 {
	background-color: #cfc !important;
	color: #060 !important;
	}
	.BlockBusters_Team2 {
	background-color: #c8f !important;
	color: #406 !important;
	}
	.BlockBusters_Selected {
	animation: BlockBusters_Flashing 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
	}
	@keyframes BlockBusters_Flashing {
	to { background-color: gold; }
	}
	.BlockBusters_Corner {
	border-top: hidden !important;
	border-left: hidden !important;
	}
	</style>

	<div class="BlockBusters">
	<h1>Block Busters</h1>
	<br>
	<table id="BlockBustersTable">
	</table>
	<br>
	<br>
	<br>
	</div>

	<script>
	var BlockBusters_Team1 = "→";
	var BlockBusters_Team2 = "↓";
	function BlockBusters_Click(event) {
	var td = event.currentTarget;
	var rect = td.getBoundingClientRect();
	var x = event.clientX - rect.left;
	var y = event.clientY - rect.top;
	if ( x > 30 && x < 70 && y > 30 && y < 70 ) {
	// click in middle
	td.innerHTML = td.BlockBustersCell;
	td.className = "BlockBusters_Selected";
	return;
	}
	if ( x > 70 && y < 70 ) {
	// click at right
	td.innerHTML = BlockBusters_Team1;
	td.className = "BlockBusters_Team1";
	return;
	}
	if ( y > 70 && x < 70 ) {
	// click at bottom
	td.innerHTML = BlockBusters_Team2;
	td.className = "BlockBusters_Team2";
	return;
	}
	// click anywhere else
	td.innerHTML = td.BlockBustersCell;
	td.className = "";
	}
	function BlockBusters_Cells() {
	var table = document.getElementById("BlockBustersTable");
	var tr;
	var td;
	var x;
	var y;
	var i = 0;
	for ( y = 0 ; y < 6 ; y++ ) {
	tr = table.insertRow();
	for ( x = 0 ; x < 6 ; x++ ) {
	td = tr.insertCell();
	if ( y == 0 ) {
	if ( x == 0 ) {
	td.className = "BlockBusters_Corner";
	} else {
	td.innerHTML = BlockBusters_Team2;
	td.className = "BlockBusters_Team2";
	}
	} else {
	if ( x == 0 ) {
	td.innerHTML = BlockBusters_Team1;
	td.className = "BlockBusters_Team1";
	} else {
	td.BlockBustersCell = td.innerText = String.fromCharCode(97 + i++);
	td.addEventListener('click', function(event){
	BlockBusters_Click(event);
	});
	}
	}
	}
	}
	}
	BlockBusters_Cells();
	</script>

	<!-- End Snip -->

	</body>

	</html>