Skip to content

Instantly share code, notes, and snippets.

@yosemitebandit
Created March 12, 2016 20:18
Show Gist options
  • Save yosemitebandit/a8f6e3b67e080826028f to your computer and use it in GitHub Desktop.
Save yosemitebandit/a8f6e3b67e080826028f to your computer and use it in GitHub Desktop.
go in the browser -- basically just a virtual board, no scoring or rule enforcement or..much of anything, really!
<!doctype html>
<html>
<head>
<style>
body, html, table {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
#container {
width: 900;
height: 900;
}
table, td {
border: 1px solid black;
border-collapse: collapse;
}
#table {
background: "#d0a060";
}
.cell {
width: 64px;
height: 64px;
border-radius: 32px;
background: "#fff";
}
</style>
</head>
<div id='container'></div>
<body>
<script src='jquery.min.js'></script>
<script>
$(function() {
var table = "<table style='background: #d0a060' id='table'>";
for (var i=0; i<9; i++) {
table += "<tr id=" + i + " >";
for (var j=0; j<9; j++) {
table += "<td><div id=" + i + "-" + j + " class='cell'></div></td>";
}
table += "</tr>";
}
table += "</table>";
$('#container').append(table);
var turn = 'black';
$('.cell').click(function(event) {
$('#' + event.target.id).css('background-color', turn);
if (turn == 'black') {
turn = 'white';
} else if (turn == 'white') {
turn = '#d0a060';
} else if (turn == '#d0a060') {
turn = 'black';
};
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment