Skip to content

Instantly share code, notes, and snippets.

@mjumbewu

mjumbewu/checkerboard.html

Created May 14, 2016 17:20
Show Gist options
  • Save mjumbewu/1176d7c31734f493ab391441149ae750 to your computer and use it in GitHub Desktop.
Save mjumbewu/1176d7c31734f493ab391441149ae750 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
checkerboard.html
<html>
<head>
<style>
#checker-board {
width: 400px;
height: 400px;
background-color: #ffbc00;
border: 10px solid rgba(0,0,0,0.65);
border-radius: 10px;
position: relative;
}
.square {
width: 50px;
height: 50px;
float: left;
}
.dark { background-color: rgba(0,0,0,0.25); }
.light { background-color: rgba(255,255,255,0.25); }
.checker {
width: 40px;
height: 40px;
border-radius: 20px;
position: absolute;
}
.red { background-color: red; }
.black { background-color: black; }
</style>
</head>
<body>
<div id="checker-board">
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="light square"></div>
<div class="dark square"></div>
<div class="black checker" id="black-checker-1"></div>
<div class="black checker" id="black-checker-2"></div>
<div class="black checker" id="black-checker-3"></div>
<div class="black checker" id="black-checker-4"></div>
<div class="black checker" id="black-checker-5"></div>
<div class="black checker" id="black-checker-6"></div>
<div class="black checker" id="black-checker-7"></div>
<div class="black checker" id="black-checker-8"></div>
<div class="black checker" id="black-checker-9"></div>
<div class="black checker" id="black-checker-10"></div>
<div class="black checker" id="black-checker-11"></div>
<div class="black checker" id="black-checker-12"></div>
<div class="red checker" id="red-checker-1"></div>
<div class="red checker" id="red-checker-2"></div>
<div class="red checker" id="red-checker-3"></div>
<div class="red checker" id="red-checker-4"></div>
<div class="red checker" id="red-checker-5"></div>
<div class="red checker" id="red-checker-6"></div>
<div class="red checker" id="red-checker-7"></div>
<div class="red checker" id="red-checker-8"></div>
<div class="red checker" id="red-checker-9"></div>
<div class="red checker" id="red-checker-10"></div>
<div class="red checker" id="red-checker-11"></div>
<div class="red checker" id="red-checker-12"></div>
</div>
<script>
'use strict';
var board = document.getElementById('checker-board');
var redCheckers = [];
var blackCheckers = [];
for (var i = 1; i <= 12; i = i + 1) {
var redChecker = document.getElementById('red-checker-' + i);
var blackChecker = document.getElementById('black-checker-' + i);
var col = (i - 1) % 4;
var row = Math.floor((i - 1) / 4);
redChecker.style.top = 50 + 50 * row - 45;
redChecker.style.left = 100 + 100 * col - 95 + (row === 1 ? 50 : 0);
blackChecker.style.top = 310 - (50 * row - 45);
blackChecker.style.left = 100 + 100 * col - 95 + (row !== 1 ? 50 : 0);
redCheckers.push(redChecker);
blackCheckers.push(blackChecker);
}
</script>
</body>
</html>
@aambrioso1
Copy link

Hi Mujumbe,

I like your checkerboard. I hope you don't mind if I borrow it for a project I have in mind. Do you mind?

Alex Ambrioso

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment