Skip to content

Instantly share code, notes, and snippets.

@StevenJoynt
Created August 7, 2021 10:25
Show Gist options
  • Save StevenJoynt/d882c5ff6a62b14fe612562d1caa1c13 to your computer and use it in GitHub Desktop.
Save StevenJoynt/d882c5ff6a62b14fe612562d1caa1c13 to your computer and use it in GitHub Desktop.
Noughts and Crosses board

Noughts and Crosses

What is it?

This is just a simple game board.

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 cells to cycle through the different options - Green “O”, Purple “X”, or grey numbers.

The players can shout out which number they want to claim, then the operator needs to click that number once or twice 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 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.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Noughts and Crosses game board">
<meta name="author" content="Steve Joynt">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Start Snip -->
<style>
.NoughtsAndCrosses {
display: table;
margin: auto;
}
.NoughtsAndCrosses h1 {
text-align: center;
font-size: 50px;
color: #732;
font-weight: bold;
}
.NoughtsAndCrosses table {
border-collapse: collapse;
}
.NoughtsAndCrosses td {
border: 10px inset black;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
font-family: sans-serif;
font-style: normal;
font-weight: bold;
font-variant: normal;
font-size: 150px;
color: #888;
}
.NoughtsAndCrossesO {
background-color: #efe !important;
color: #060 !important;
}
.NoughtsAndCrossesX {
background-color: #fef !important;
color: #303 !important;
}
.NoughtsAndCrosses #Cell1,
.NoughtsAndCrosses #Cell2,
.NoughtsAndCrosses #Cell3 {
border-top: hidden;
}
.NoughtsAndCrosses #Cell3,
.NoughtsAndCrosses #Cell6,
.NoughtsAndCrosses #Cell9 {
border-right: hidden;
}
.NoughtsAndCrosses #Cell7,
.NoughtsAndCrosses #Cell8,
.NoughtsAndCrosses #Cell9 {
border-bottom: hidden;
}
.NoughtsAndCrosses #Cell1,
.NoughtsAndCrosses #Cell4,
.NoughtsAndCrosses #Cell7 {
border-left: hidden;
}
</style>
<script>
function NoughtsAndCrosses_Click(td) {
switch ( td.innerText ) {
case "O" :
td.innerText = "X";
td.className = "NoughtsAndCrossesX";
break;
case "X" :
td.innerText = td.id.slice(-1);
td.className = "";
break;
default :
td.innerText = "O";
td.className = "NoughtsAndCrossesO";
break;
}
}
</script>
<div class="NoughtsAndCrosses">
<h1>Noughts &amp; Crosses</h1>
&nbsp;<br>
<table cellspacing="8" cellpadding="8" rows="3" cols="3">
<tr>
<td id="Cell1" onclick="NoughtsAndCrosses_Click(this)">1</td>
<td id="Cell2" onclick="NoughtsAndCrosses_Click(this)">2</td>
<td id="Cell3" onclick="NoughtsAndCrosses_Click(this)">3</td>
</tr>
<tr>
<td id="Cell4" onclick="NoughtsAndCrosses_Click(this)">4</td>
<td id="Cell5" onclick="NoughtsAndCrosses_Click(this)">5</td>
<td id="Cell6" onclick="NoughtsAndCrosses_Click(this)">6</td>
</tr>
<tr>
<td id="Cell7" onclick="NoughtsAndCrosses_Click(this)">7</td>
<td id="Cell8" onclick="NoughtsAndCrosses_Click(this)">8</td>
<td id="Cell9" onclick="NoughtsAndCrosses_Click(this)">9</td>
</tr>
</table>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
</div>
<!-- End Snip -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment