diff options
| -rw-r--r-- | assets/css/style.css | 3 | ||||
| -rw-r--r-- | assets/js/global.js | 67 | ||||
| -rw-r--r-- | index.html | 13 | ||||
| -rw-r--r-- | index.php | 13 |
4 files changed, 96 insertions, 0 deletions
diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..3a5ce95 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,3 @@ +canvas { + outline: 2px solid #d3d3d3; +}
\ No newline at end of file diff --git a/assets/js/global.js b/assets/js/global.js new file mode 100644 index 0000000..99e898c --- /dev/null +++ b/assets/js/global.js @@ -0,0 +1,67 @@ +window.onload = function () { + + window.debug = true; // set to true iff you want console log output + + var canvas = document.getElementById("main-canvas"); + window.ctx = canvas.getContext("2d"); + // canvas.style.display = "none"; + + draw(); +} + + +function draw() { + // draw the cube + // generate the cube config + // get the initial position + // get the initial face + // get the final position + // get the final face + + //draw the board 6 x 6 + drawBoard(); +} + +function clear() { + +} + +function update() { + +} + + +function generateCubeConfig() { + +} + +function drawBoard() { + + for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { + window.ctx.moveTo(0, 100*j); + window.ctx.lineTo(600, 100*j); + window.ctx.stroke(); + + window.ctx.moveTo(100*i, 0); + window.ctx.lineTo(100*i, 600); + window.ctx.stroke(); + + var left = 0; + for (var a = 0; a < 6; a++) { + for (var b = 0; b < 6; b += 2) { + startX = b * 100; + if (a % 2 == 0) { + startX = (b+1) * 100; + window.ctx.fillStyle = "#FF0000"; //red + } + window.ctx.fillRect(startX + left, (a * 100) , 100, 100); + } + } + } + } + + if (window.debug) { + console.log("finished drawing game board"); + } +}
\ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..79267b9 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title> Cube Shuffler </title> + <link rel="stylesheet" type="text/css" href="assets/css/style.css"> + <script type="text/javascript" src="assets/js/global.js" async></script> + </head> + <body id="body"> + <canvas id="main-canvas" width="600" height="600"></canvas> + + </body> +</html> diff --git a/index.php b/index.php new file mode 100644 index 0000000..79267b9 --- /dev/null +++ b/index.php @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title> Cube Shuffler </title> + <link rel="stylesheet" type="text/css" href="assets/css/style.css"> + <script type="text/javascript" src="assets/js/global.js" async></script> + </head> + <body id="body"> + <canvas id="main-canvas" width="600" height="600"></canvas> + + </body> +</html> |