-
-
Save valerysntx/8298852 to your computer and use it in GitHub Desktop.
This file contains 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
| @import url(http://fonts.googleapis.com/css?family=Coda:400,800); | |
| .high { | |
| color:yellow; | |
| } | |
| .lb { | |
| line-height: 65px; | |
| position: absolute; | |
| display: block; | |
| background: rgb(221, 221, 221); | |
| height: 60px; | |
| width: 60px; | |
| color: rgba(255, 255, 255, 0.31); | |
| font-size: 47px; | |
| font-family: 'Coda' !important; | |
| font-style: normal; | |
| font-weight: 800; | |
| padding: 0px 0px 0px 0px; | |
| border-radius: 40px; | |
| text-align: center; | |
| order: 1px solid gray; | |
| -webkit-box-shadow: 7px 7px 19px 0px rgba(50, 50, 50, 1); | |
| -moz-box-shadow: 7px 7px 19px 0px rgba(50, 50, 50, 1); | |
| box-shadow: 7px 7px 19px 0px rgba(50, 50, 50, 1); | |
| } | |
| .box { | |
| position:absolute; | |
| display:block; | |
| // background: #ddd; | |
| height:50px; | |
| width:50px; | |
| // color:white; | |
| font-size:30px; | |
| font-family: 'Coda' !important; | |
| font-style: normal; | |
| font-weight: 800; | |
| padding:10px 0px 0px 10px; | |
| } | |
| #ox, #oy, #oz { | |
| position: absolute; | |
| display: block; | |
| //border: 1px solid red; | |
| height: 140px; | |
| width: 120px; | |
| } | |
| #oz { | |
| width: 190px; | |
| height: 100px; | |
| cursor: w-resize | |
| } | |
| .highlight { | |
| color: rgba(255, 255, 255,1); | |
| //background:#555 !important; | |
| //border: 1px solid #555; | |
| //color:yellow; | |
| } | |
| #ox { | |
| cursor: sw-resize; | |
| } | |
| #oy { | |
| cursor: se-resize; | |
| } | |
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Rubik - wheel movements prototype" /> | |
| <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> | |
| <script src=" http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js | |
| "></script> | |
| <meta charset=utf-8 /> | |
| <title>Rubik</title> | |
| </head> | |
| <body style="cursor: auto;"> | |
| <div id="b2" class="box ui-draggable" style="left: 351px; top: 107px;"> | |
| <div class="lb" data-angle="0" style="display: block;background:#E50001;">1</div> | |
| </div> | |
| <div id="b6" class="box ui-draggable" style="left: 434px; top: 147px;"> | |
| <div class="lb" data-angle="0" style="display: block;background:#DD8100;">2</div> | |
| </div> | |
| <div id="b8" class="box ui-draggable" style="left: 432px; top: 238px;"> | |
| <div class="lb" data-angle="0" style="display: block;background:#AFD500;">3</div> | |
| </div> | |
| <div id="b7" class="box ui-draggable" style="left: 347px; top: 282px;"> | |
| <div class="lb" data-angle="0" style="display: block;background:#2FCE00;">4</div> | |
| </div> | |
| <div id="b3" class="box ui-draggable" style="left: 264px; top: 239px;"> | |
| <div class="lb" data-angle="0" style="display: block;background:#00C648;">5</div> | |
| </div> | |
| <div id="b1" class="box ui-draggable" style="left: 263px; top: 148px;"> | |
| <div class="lb" data-angle="0" style="display: block;background:#00BFB7;">6</div> | |
| </div> | |
| <div id="b4" class="box ui-draggable" style="left: 347px; top: 194px;"> | |
| <div style=" xvisibility:hidden;" class="lb" data-angle="0" style="display: block;">+</div> | |
| </div> | |
| <div id="ox" class="ui-draggable" style="left: 261px; top: 115px;"> </div> | |
| <div id="oy" class="ui-draggable" style="left: 401px; top: 114px;"> </div> | |
| <div id="oz" class="ui-draggable" style="left: 300px; top: 268px;"> </div> | |
| <div id="btnSubmit"> | |
| Click here | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| //[email protected] | |
| var del = 0; | |
| var b1, b2, b3, b4; | |
| var rr = 0; | |
| var intervalID; | |
| var rand_no = 1; | |
| var interval2; | |
| $(document).ready(function () { | |
| $( ".box" ).draggable(); | |
| $("#btnSubmit").click(function(){ | |
| rr=0; | |
| intervalID= setInterval(function () { | |
| del = 0; | |
| if (Math.random() >0.6) | |
| rand_no = Math.ceil(6 * Math.random()); | |
| switch(rand_no) { | |
| case 1: RotateSide("#b1", "#b2", "#b4", "#b3"); | |
| break; | |
| case 2: RotateSide("#b3", "#b4", "#b2", "#b1"); | |
| break; | |
| case 3: RotateSide("#b4", "#b2", "#b6", "#b8"); | |
| break; | |
| case 4: RotateSide("#b8", "#b6", "#b2", "#b4"); | |
| break; | |
| case 5: RotateSide("#b3", "#b4", "#b8", "#b7"); | |
| break; | |
| case 6: RotateSide("#b7", "#b8", "#b4", "#b3"); | |
| break; | |
| } | |
| if (++rr === 40) { | |
| window.clearInterval(intervalID); | |
| } | |
| }, 150); | |
| }); | |
| $('#ox').mousewheel(function (event, delta) { | |
| event.stopPropagation(); | |
| event.preventDefault(); | |
| if (delta > 0) RotateSide("#b1", "#b2", "#b4", "#b3"); | |
| if (delta < 0) RotateSide("#b3", "#b4", "#b2", "#b1"); | |
| }).hover( | |
| function () { | |
| $("#b1,#b2,#b4,#b3").find(".lb").addClass("highlight"); | |
| }, function () { | |
| $("#b1,#b2,#b4,#b3").find(".lb").removeClass("highlight"); | |
| }); | |
| $('#oy').mousewheel(function (event, delta) { | |
| event.stopPropagation(); | |
| event.preventDefault(); | |
| if (delta > 0) RotateSide("#b4", "#b2", "#b6", "#b8"); | |
| if (delta < 0) RotateSide("#b8", "#b6", "#b2", "#b4"); | |
| }).hover( | |
| function () { | |
| $("#b4,#b2,#b6,#b8").find(".lb").addClass("highlight"); | |
| }, function () { | |
| $("#b4,#b2,#b6,#b8").find(".lb").removeClass("highlight"); | |
| }); | |
| $('#oz').mousewheel(function (event, delta) { | |
| event.stopPropagation(); | |
| event.preventDefault(); | |
| if (delta > 0) RotateSide("#b3", "#b4", "#b8", "#b7"); | |
| if (delta < 0) RotateSide("#b7", "#b8", "#b4", "#b3"); | |
| }).hover( | |
| function () { | |
| $("#b3,#b4,#b8,#b7").find(".lb").addClass("highlight"); | |
| }, function () { | |
| $("#b3,#b4,#b8,#b7").find(".lb").removeClass("highlight"); | |
| }); | |
| }); | |
| function RotateSide(b1, b2, b3, b4) { | |
| if (del == 1) return; | |
| del = 1; | |
| moveAnimate($(b1 + ">div:first"), $(b2)); | |
| moveAnimate($(b2 + ">div:first"), $(b3)); | |
| moveAnimate($(b3 + ">div:first"), $(b4)); | |
| moveAnimate($(b4 + ">div:first"), $(b1)); | |
| interval2 = setTimeout(function () { | |
| del = 0; | |
| }, 220); | |
| } | |
| function Rotate(element) { | |
| rotation = $(element).data("angle") + 90; | |
| $(element).data("angle", rotation); | |
| $(element).text(rotation / 90); | |
| $(element).css({ | |
| '-webkit-transform': 'rotate(' + rotation + 'deg)', | |
| '-moz-transform': 'rotate(' + rotation + 'deg)', | |
| '-ms-transform': 'rotate(' + rotation + 'deg)', | |
| 'transform': 'rotate(' + rotation + 'deg)' | |
| }); | |
| } | |
| function moveAnimate(element, newParent) { | |
| element = $(element); | |
| newParent = $(newParent); | |
| var oldOffset = element.offset(); | |
| element.appendTo(newParent); | |
| var newOffset = element.offset(); | |
| var temp = element.clone().appendTo('body'); | |
| temp.css('position', 'absolute') | |
| .css('left', oldOffset.left) | |
| .css('top', oldOffset.top) | |
| .css('zIndex', 1000); | |
| element.hide(); | |
| temp.animate({ | |
| 'top': newOffset.top, | |
| 'left': newOffset.left | |
| }, 100, function () { | |
| element.show(); | |
| temp.remove(); | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
prototype of logic game objects centered movements, controlled with a mouse wheel