Skip to content

Instantly share code, notes, and snippets.

@mlegenhausen

mlegenhausen/app.js

Created August 12, 2012 15:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mlegenhausen/3332403 to your computer and use it in GitHub Desktop.
Save mlegenhausen/3332403 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript Workshop connect-four setup
Raw
app.js
(function(window, document, undefined) {
var $table = document.getElementById('field');
function columnClick(col) {
}
function buildTable() {
var $row, $col, i, j;
for (i = 0; i < ROWS; i++) {
$row = document.createElement('tr');
for (j = 0; j < COLUMNS; j++) {
$col = document.createElement('td');
$col.onclick = columnClick.bind(this, j);
$row.appendChild($col);
}
$table.appendChild(row);
}
}
buildTable();
})(window, document);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vier Gewinnt</title>
<style>
* {
font-family:sans-serif;
}
table {
background-color:#0000FF;
}
td {
background-color:#FFFFFF;
cursor:pointer;
width:60px;
height:60px;
border-radius: 30px;
border: 1px solid;
}
p {
font-size:larger;
}
td.player-red {
background-color:#FF0000;
}
td.player-yellow {
background-color:#FFCC33;
}
span.player-red {
color:#FF0000;
}
span.player-yellow {
color:#FFCC33;
}
span.even {
color:#000000;
}
</style>
</head>
<body style="width:450px; margin:0 auto;">
<h1>Vier Gewinnt</h1>
<p><b>Spieler:</b> <span id="player"></span></p>
<table id="field"></table>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment