Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>GRID!</title>
- <script src="jquery.min.js"></script>
- <style>
- body {
- }
- form input {
- width: 23px;
- float: right;
- }
- form label {
- height: 25px;
- clear: right;
- position: relative;
- width: 150px;
- display: block;
- }
- #grid {
- border: 1px solid black;
- position: relative;
- }
- #grid:before {
- content: "";
- border-top: 1px solid rgba(0, 0, 0, 0.2);
- height: 1px;
- width: 100%;
- left: 0;
- top: 50%;
- position: absolute;
- }
- #grid:after {
- content: "";
- border-left: 1px solid rgba(0, 0, 0, 0.2);
- width: 1px;
- height: 100%;
- top: 0;
- left: 50%;
- position: absolute;
- }
- .pixel {
- float: left;
- background: white;
- border: 1px solid #eee;
- border-left: 0;
- border-top: 0;
- z-index: 1;
- }
- .origin-x {
- border-right: 1px solid black;
- z-index: 10;
- }
- .origin-y {
- border-bottom: 1px solid black;
- z-index: 10;
- }
- </style>
- </head>
- <body>
- <div id="grid">
- </div>
- <script>
- // how many blocks in the x and y directions... so 10 is -10,10 / -10,10 (121 blocks)
- var gridSize = 25;
- // how big is each "pixel" - they are square, so this is width and height
- var pixelSize = 10;
- $(function () {
- // draw the grid
- var x,y;
- for (y = gridSize; y >= -gridSize; y--) {
- for (x = -gridSize; x <= gridSize; x++) {
- var id = pixelId(x, y)
- $("<div class='pixel' id='" + id + "'>").appendTo("#grid");
- }
- }
- var gridPx = ((gridSize * 2) + 1) * (pixelSize + 1);
- $("#grid").css({"width": gridPx + "px", "height": gridPx + "px"});
- $(".pixel").css({"width": pixelSize + "px", "height": pixelSize + "px"});
- function pixelId(x, y, append) {
- if (append === undefined) { append = ""; }
- return append + "pixel_" + x + "_" + y;
- }
- function setPixel(x, y, color) {
- $(pixelId(x, y, "#")).css("backgroundColor", color);
- }
- function getPixel(x, y) {
- return $(pixelId(x, y, "#")).css("backgroundColor");
- }
- $(".pixel").click(function () {
- var id = $(this).attr("id");
- var xy = id.split("_");
- var color = getPixel(xy[1], xy[2]);
- setPixel(xy[1], xy[2], (getPixel(xy[1], xy[2]) == "rgb(255, 255, 255)") ? "black" : "white")
- });
- });
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment