Skip to content

Instantly share code, notes, and snippets.

@manuerumx

manuerumx/rubik.html

Created May 27, 2014 23:09
Show Gist options
  • Save manuerumx/cf74b548af7bca82b59f to your computer and use it in GitHub Desktop.
Save manuerumx/cf74b548af7bca82b59f to your computer and use it in GitHub Desktop.
Download ZIP
Rubik cube sample
Raw
rubik.html
<html>
<head>
<title>Rubik test</title>
<style>
table{border:1px solid #000; height: 100%}
td{text-align: center;
vertical-align: middle;}
</style>
</head>
<body>
<table width="100%">
<tr>
<td style="width:25%"></td>
<td style="width:25%">
<table width="100%" border="1" id="faceE">
<tr>
<td width="33.3%" height="33.3%" id="E20">E (2,0)</td>
<td width="33.3%" height="33.3%" id="E21">E (2,1)</td>
<td width="33.3%" height="33.3%" id="E22">E (2,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="E10">E (1,0)</td>
<td width="33.3%" height="33.3%" id="E11">E (1,1)</td>
<td width="33.3%" height="33.3%" id="E12">E (1,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="E00">E (0,0)</td>
<td width="33.3%" height="33.3%" id="E01">E (0,1)</td>
<td width="33.3%" height="33.3%" id="E02">E (0,2)</td>
</tr>
</table>
</td>
<td style="width:25%">
<input type="text" id="coord" name="coord" value="0"/>
<br>
<button type="button" onclick="moveUp($('#coord').val());">Up</button>
<button type="button" onclick="moveDown($('#coord').val());">Down</button>
<button type="button" onclick="moveRight($('#coord').val());">Right</button>
<button type="button" onclick="moveLeft($('#coord').val());">Left</button>
</td>
<td style="width:25%"></td>
</tr>
<tr>
<td style="width:25%">
<table width="100%" border="1" id="faceD">
<tr>
<td width="33.3%" height="33.3%" id="D20">D (2,0)</td>
<td width="33.3%" height="33.3%" id="D21">D (2,1)</td>
<td width="33.3%" height="33.3%" id="D22">D (2,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="D10">D (1,0)</td>
<td width="33.3%" height="33.3%" id="D11">D (1,1)</td>
<td width="33.3%" height="33.3%" id="D12">D (1,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="D00">D (0,0)</td>
<td width="33.3%" height="33.3%" id="D01">D (0,1)</td>
<td width="33.3%" height="33.3%" id="D02">D (0,2)</td>
</tr>
</table>
</td>
<td style="width:25%">
<table width="100%" border="1" id="faceA">
<tr>
<td width="33.3%" height="33.3%" id="A20">A (2,0)</td>
<td width="33.3%" height="33.3%" id="A21">A (2,1)</td>
<td width="33.3%" height="33.3%" id="A22">A (2,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="A10">A (1,0)</td>
<td width="33.3%" height="33.3%" id="A11">A (1,1)</td>
<td width="33.3%" height="33.3%" id="A12">A (1,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="A00">A (0,0)</td>
<td width="33.3%" height="33.3%" id="A01">A (0,1)</td>
<td width="33.3%" height="33.3%" id="A02">A (0,2)</td>
</tr>
</table>
</td>
<td style="width:25%">
<table width="100%" border="1" id="faceB">
<tr>
<td width="33.3%" height="33.3%" id="B20">B (2,0)</td>
<td width="33.3%" height="33.3%" id="B21">B (2,1)</td>
<td width="33.3%" height="33.3%" id="B22">B (2,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="B10">B (1,0)</td>
<td width="33.3%" height="33.3%" id="B11">B (1,1)</td>
<td width="33.3%" height="33.3%" id="B12">B (1,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="B00">B (0,0)</td>
<td width="33.3%" height="33.3%" id="B01">B (0,1)</td>
<td width="33.3%" height="33.3%" id="B02">B (0,2)</td>
</tr>
</table>
</td>
<td style="width:25%">
<table width="100%" border="1" id="faceC">
<tr>
<td width="33.3%" height="33.3%" id ="C20">C (2,0)</td>
<td width="33.3%" height="33.3%" id ="C21">C (2,1)</td>
<td width="33.3%" height="33.3%" id ="C22">C (2,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id ="C10">C (1,0)</td>
<td width="33.3%" height="33.3%" id ="C11">C (1,1)</td>
<td width="33.3%" height="33.3%" id ="C12">C (1,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id ="C00">C (0,0)</td>
<td width="33.3%" height="33.3%" id ="C01">C (0,1)</td>
<td width="33.3%" height="33.3%" id ="C02">C (0,2)</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:25%"></td>
<td style="width:25%">
<table width="100%" border="1" id="faceF">
<tr>
<td width="33.3%" height="33.3%" id="F20">F (2,0)</td>
<td width="33.3%" height="33.3%" id="F21">F (2,1)</td>
<td width="33.3%" height="33.3%" id="F22">F (2,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="F10">F (1,0)</td>
<td width="33.3%" height="33.3%" id="F11">F (1,1)</td>
<td width="33.3%" height="33.3%" id="F12">F (1,2)</td>
</tr>
<tr>
<td width="33.3%" height="33.3%" id="F00">F (0,0)</td>
<td width="33.3%" height="33.3%" id="F01">F (0,1)</td>
<td width="33.3%" height="33.3%" id="F02">F (0,2)</td>
</tr>
</table>
</td>
<td style="width:25%"></td>
<td style="width:25%"></td>
</tr>
</table>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="rubik.js"></script>
<script>
drawCube();
</script>
</body>
</html>
Raw
rubik.js
var colors = {
red : "#FF0000",
blue : "#0000FF",
white : "#C0C0C0",
yellow : "#FFFF00",
orange : "#FF9966",
green : "#00FF00"
};
var cubeFace = function cubeFace(id, color){
this.id= id;
this.block = [
[color, color, color],
[color, color, color],
[color, color, color]
];
return this;
};
var cube = {
"a" : new cubeFace("a", colors.red),
"b" : new cubeFace("b", colors.blue),
"c" : new cubeFace("c", colors.white),
"d" : new cubeFace("d", colors.yellow),
"e" : new cubeFace("e", colors.orange),
"f" : new cubeFace("f", colors.green)
};
function moveRight(coordX){
var tmp = cube.d.block[coordX];
console.log(cube.a.block);
cube.d.block[coordX] = cube.c.block[coordX];
cube.c.block[coordX] = cube.b.block[coordX];
cube.b.block[coordX] = cube.a.block[coordX];
cube.a.block[coordX] = tmp;
drawCube();
}
function moveLeft(coordX){
var tmp = cube.c.block[coordX];
cube.c.block[coordX] = cube.d.block[coordX];
cube.d.block[coordX] = cube.a.block[coordX];
cube.a.block[coordX] = cube.b.block[coordX];
cube.b.block[coordX] = tmp;
drawCube();
}
function moveUp(coordY){
var tmp = [cube.f.block[0][coordY] , cube.f.block[1][coordY], cube.f.block[2][coordY] ];
for(var i=0; i<=2; i++){
cube.f.block[i][coordY] = cube.c.block[i][coordY];
}
for(var i=0; i<=2; i++){
cube.c.block[i][coordY] = cube.e.block[i][coordY];
}
for(var i=0; i<=2; i++){
cube.e.block[i][coordY] = cube.a.block[i][coordY];
}
for(var i=0; i<=2; i++){
cube.a.block[i][coordY] = tmp[i];
}
drawCube();
}
function moveDown(coordY){
var tmp = [cube.f.block[0][coordY] , cube.f.block[1][coordY], cube.f.block[2][coordY] ];
for(var i=0; i<=2; i++){
cube.f.block[i][coordY] = cube.a.block[i][coordY];
}
for(var i=0; i<=2; i++){
cube.a.block[i][coordY] = cube.e.block[i][coordY];
}
for(var i=0; i<=2; i++){
cube.e.block[i][coordY] = cube.c.block[i][coordY];
}
for(var i=0; i<=2; i++){
cube.c.block[i][coordY] = tmp[i];
}
drawCube();
}
function drawCube(){
for(var x=0; x<=2; x++){
for(var y=0; y<=2; y++){
$("#A"+x+y).css('backgroundColor',cube.a.block[x][y] );
$("#B"+x+y).css('backgroundColor',cube.b.block[x][y] );
$("#C"+x+y).css('backgroundColor',cube.c.block[x][y] );
$("#D"+x+y).css('backgroundColor',cube.d.block[x][y] );
$("#E"+x+y).css('backgroundColor',cube.e.block[x][y] );
$("#F"+x+y).css('backgroundColor',cube.f.block[x][y] );
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment