Skip to content

Instantly share code, notes, and snippets.

@valerysntx

valerysntx/jsbin.aTaXIjuz.css

Forked from anonymous/jsbin.aTaXIjuz.css
Created January 7, 2014 12:49
Show Gist options
  • Save valerysntx/8298852 to your computer and use it in GitHub Desktop.
Save valerysntx/8298852 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.aTaXIjuz.css
@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;
}
Raw
jsbin.aTaXIjuz.html
<!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>
Raw
jsbin.aTaXIjuz.js
//andriy.opeyda@gmail.com
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();
});
}
@valerysntx
Copy link
Author

prototype of logic game objects centered movements, controlled with a mouse wheel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment