Created
May 14, 2016 17:20
-
-
Save mjumbewu/1176d7c31734f493ab391441149ae750 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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