Light Game by using (HTML CSS jS)
Preview :
source code :
Game play online:
Turn On the Light
TURN ON
THE LIGHT
Click on cable
segments to rotate
clockwise until all
the segments are in
the correct position.
NEXT LEVEL
HTML :
<!--
TURN ON THE LIGHT
CREATED BY: webdev_rachel
-->
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<title>Turn On the Light</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<link rel="stylesheet" href="light.css" />
<script src="light.js"></script>
</head>
<body>
<div id="game">
<svg id="paths" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" width="360px"
height="460px" viewBox="0 0 360 460" E="xMidYMid meet">
<path fill="#000000"
d="M21 41l7 0 0 -14c0,-1 1,-2 2,-2 1,0 2,1 2,2l0 14 8 0 0 -14c0,-1 1,-2 2,-2 1,0 2,1 2,2l0 14 7 0c1,0 2,0 2,2l0 3c0,2 -1,3 -2,3l-1 0 0 6c0,5 -4,9 -8,9l0 3c0,1 -1,2 -2,2l-8 0c-1,0 -2,-1 -2,-2l0 -3c-4,0 -8,-4 -8,-9l0 -6 -1 0c-1,0 -2,-1 -2,-3l0 -3c0,-2 1,-2 2,-2z" />
<line fill="none" stroke="#000000" stroke-width="4" x1="36" y1="68" x2="36" y2="172" />
<path fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round"
d="M324 172l0 -16c0,-10 -9,-18 -18,-17 -3,1 -7,3 -9,2 -4,-2 -5,-9 -2,-9 2,0 16,6 14,2 0,-2 -21,-8 -19,-11 3,-3 24,8 23,3 -1,-4 -24,-7 -23,-12 1,-4 26,9 27,4 0,-4 -22,-9 -25,-11 -6,-5 -3,-13 -4,-17 -1,-3 -4,-8 -5,-10 -1,-1 -5,-4 -7,-12 -2,-9 -4,-18 4,-28 8,-10 24,-14 34,-11 10,2 25,14 23,33 -1,9 -7,15 -12,20 -12,10 -6,23 -12,24 -2,1 -4,1 -7,1 -6,-2 -3,-18 -4,-25 -1,-6 -5,-7 -8,-11 -2,-3 1,-5 5,-2 2,3 2,-1 4,-4 3,-4 6,-1 6,1 0,3 1,7 4,1 2,-4 7,-1 5,4 -3,6 -5,6 -10,9" />
<path id="mainpath" fill="none" stroke="#000000" stroke-width="4"
d="M36 68l0 104 0 216c0,20 16,36 36,36l216 0c20,0 36,-16 36,-36l0 -216" />
<circle id="maincircle" fill="#fffd56" cx="0" cy="0" r="7">
<animateMotion dur="1.5s" calcmode="linear" repeatCount="indefinite">
<mpath xlink: href="#mainpath" />
</circle>
</svg>
<div style="position:absolute;top:15px;left:0;width:320px;text-align:center;">TURN ON</div>
<div style="position:absolute;top:40px;left:0;width:320px;text-align:center;">THE LIGHT</div>
<div id="level"
style="position:absolute;top:70px;left:0;width:320px;text-align:center;font-size:21px;display:none;">Level:
<span>0</span>
</div>
<div id="moves"
style="position:absolute;top:95px;left:0;width:320px;text-align:center;font-size:21px;display:none;">Moves:
<span>0</span>
</div>
<svg id="complete" xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink" width="360px"
height="460px" viewBox="0 0 360 460" E="xMidYMid meet">
</svg>
<div id="lighton"></div>
<div id="info"
style="position:absolute;top:90px;left:50px;width:220px;height:auto;font-size:18px;text-align:center;">
Click on cable<br>
segments to rotate<br>
clockwise until all<br>
the segments are in<br>
the correct position.
</div>
<div id="div_levels"
style="position:absolute;top:248px;left:52px;width:260px;height:165px;font-size:18px;text-align:center;"></div>
<div class="btn" id="b_menu" style="left:85px;">MENU</div>
<div class="btn" id="b_next" style="left:150px;">NEXT LEVEL</div>
</div>
</body>
</html>
CSS :
/*
TURN ON THE LIGHT
CREATED BY: webdev_rachel
*/
body {
font-family: 'Oswald', sans-serif;
font-size: 25px;
font-weight: bold;
margin: 0 0 0 0;
background-color: #f0f0f0;
}
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#game {
position: relative;
margin: auto;
width: 360px;
height: 460px;
}
circle,
polyline,
path,
line {
display: none;
}
#paths path,
#paths line,
#paths circle {
display: block;
}
#complete circle,
#complete path {
display: block;
}
.blocks {
position: absolute;
width: 72px;
height: 72px;
display: none;
z-index: 400;
}
#complete {
position: absolute;
top: 0;
left: 0;
width: 360px;
height: 460px;
z-index: 200;
display: none;
}
#lighton {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 173px;
background-image: url(https://i.imgur.com/tTabsv6.png);
}
.b_levels {
position: absolute;
width: 56px;
height: 47px;
border: 2px solid;
background-color: #e0e0e0;
border-radius: 10px;
font-size: 15px;
cursor: pointer;
z-index: 400;
}
.b_levels div {
position: absolute;
top: 15px;
left: 0;
width: 100%;
font-size: 21px;
}
.btn {
position: absolute;
top: 127px;
border: 2px solid;
background-color: #e0e0e0;
border-radius: 10px;
font-size: 15px;
cursor: pointer;
padding: 5px 10px 5px 10px;
display: none;
z-index: 200;
}
JAVASCRIPT :
/*
TURN ON THE LIGHT
CREATED BY: webdev_rachel
APRIL 05, 2018
*/
var playing = true;
// levels.length = 12 (number of levels)
// each element of levels array is composed of an array
// The game board is a 5x4 matrix
// I define values for the sides of
// each cell of the 5x4 matrix:
// 1 = top
// 2 = right
// 3 = bottom
// 4 = left
// each element of this sub array defines
// the piece (.blocks) of the game starting top-left
// each of the values define what to show,
// example: 141_90
// 14 indicates that the curved line
// will go from top (1) to left (4)
// the third caharacter is a 1
// this indicates where to draw the arrow
// as this 3rd character is 1,
// the arrow will be shown at top
// the underscore separates the arrow
// definition from the initial rotation (deg)
// this deg values can be 0 (no rotation al all)
// is deg===0 then the brick background is shown
// there are some special values for this elements:
// x = brick with a cross
// y = brick with top-right & bottom-left lines
// z = brick with top-left & bottom-right lines
var levels = [
["122_0", "242_90", "242_0", "242_-90", "141_0"],
["122_180", "343_0", "", "232_0", "141_90", "", "122_90", "242_-90", "141_-90"],
["x", "343_90", "232_-90", "244_180", "131_90", "122_-90", "242_-180", "y", "z", "141_90", "", "122_-90", "122_-90", "141_90"],
["133_90", "343_-90", "232_180", "242_90", "141_-90", "122_90", "y", "121_90", "x", "344_-90", "233_90", "122_-90", "343_90", "z", "141_180", "121_90", "242_0", "122_180", "141_90"],
["122_90", "343_180", "232_90", "242_180", "141_-90", "233_180", "z", "x", "y", "344_180", "133_90", "y", "z", "z", "141_90", "122_180", "242_-90", "141_180", "233_180", "121_-90"],
["y", "242_90", "343_-90", "232_180", "z", "232_90", "242_180", "x", "141_180", "141_180", "131_90", "122_180", "x", "244_-90", "344_90", "122_0", "244_180", "144_90", "122_90", "144_0"],
["122_90", "343_-90", "232_180", "242_-90", "141_-90", "233_180", "z", "z", "242_90", "343_90", "133_180", "121_180", "x", "344_90", "133_-90", "122_-90", "242_90", "141_180", "121_180", "144_90"],
["133_-90", "232_90", "343_180", "232_180", "141_90", "122_0", "z", "y", "y", "344_-90", "232_180", "z", "y", "x", "141_90", "121_-90", "144_180", "121_90", "144_90", "144_-90"],
["122_90", "242_-90", "343_90", "344_180", "131_-90", "233_90", "244_90", "144_180", "z", "141_180", "133_-90", "121_-90", "z", "y", "344_90", "122_-90", "242_180", "141_-90", "122_180", "141_90"],
["133_-90", "233_180", "344_180", "232_90", "141_-90", "122_-90", "y", "x", "z", "343_90", "233_180", "z", "x", "141_-90", "133_90", "122_180", "141_-90", "121_90", "244_180", "144_-90"],
["122_180", "343_-90", "232_90", "343_-90", "131_90", "233_180", "144_90", "131_-90", "133_180", "131_-90", "133_90", "232_00", "z", "z", "141_180", "122_90", "141_-90", "122_-90", "141_180"],
["133_180", "232_180", "242_-90", "343_90", "131_90", "122_180", "x", "343_90", "122_-90", "141_180", "233_90", "x", "x", "244_180", "344_-90", "122_-90", "141_180", "122_90", "242_180", "141_-90"]
];
// toverify array contain the matrix elements to be verify,
// when rotation degree for each elements of toverify iz zero
// then the level is complete - see verify() function
var toverify = [
[1, 3],
[0, 4, 6, 7, 8],
[4, 5, 6, 9, 12, 13],
[0, 2, 3, 4, 5, 7, 9, 11, 12, 14, 17, 18],
[0, 1, 2, 3, 4, 5, 10, 15, 16, 17],
[1, 2, 3, 5, 6, 8, 10, 16, 17],
[0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 13, 14, 15, 16, 17, 18, 19],
[0, 1, 2, 3, 4, 5, 9, 10, 14, 15, 16, 17, 18],
[0, 1, 2, 4, 5, 6, 7, 9, 10, 14, 15, 16, 17, 18, 19],
[0, 1, 2, 3, 4, 5, 9, 10, 13, 14, 15, 16, 17, 18, 19],
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 14, 15, 16, 17, 18, 19],
[0, 1, 2, 3, 4, 5, 7, 8, 9, 10, 13, 14, 15, 16, 17, 18, 19]
];
// completed_paths is an array with SVG paths to show
// the animation when a level is completed
var completed_paths = [
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36l216 0c20,0 36,-16 36,-36"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36 20,0 36,16 36,36 0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36l72 0c20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,-16 36,-36m0 0c0,-20 16,-36 36,-36 20,0 36,-16 36,-36l0 -72"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36 20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36l-72 0c-20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36l72 0c20,0 36,-16 36,-36"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36 20,0 36,16 36,36 0,20 -16,36 -36,36 -20,0 -36,16 -36,36l0 72c0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36l-72 0c-20,0 -36,16 -36,36 0,20 16,36 36,36 20,0 36,-16 36,-36l0 -72c0,-20 16,-36 36,-36l72 0c20,0 36,-16 36,-36"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36l72 0c20,0 36,16 36,36l0 72 0 72c0,20 -16,36 -36,36l-72 0c-20,0 -36,-16 -36,-36l0 -72c0,-20 16,-36 36,-36l72 0 72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36 20,0 36,16 36,36 0,20 -16,36 -36,36 -20,0 -36,16 -36,36l0 72c0,20 16,36 36,36l72 0c20,0 36,-16 36,-36l0 -72c0,-20 16,-36 36,-36l72 0c20,0 36,16 36,36l0 72c0,20 -16,36 -36,36 -20,0 -36,-16 -36,-36 0,-20 -16,-36 -36,-36l-72 0c-20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36l72 0c20,0 36,-16 36,-36"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,16 36,36l0 72c0,20 -16,36 -36,36 -20,0 -36,-16 -36,-36 0,-20 -16,-36 -36,-36 -20,0 -36,16 -36,36 0,20 -16,36 -36,36 -20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,16 36,36 0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36 -20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36l72 0c20,0 36,16 36,36 0,20 -16,36 -36,36l-72 0c-20,0 -36,16 -36,36l0 72c0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36 -20,0 -36,-16 -36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36l0 -72"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36 20,0 36,16 36,36 0,20 -16,36 -36,36 -20,0 -36,16 -36,36 0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,16 36,36l0 72c0,20 -16,36 -36,36l-72 0c-20,0 -36,-16 -36,-36l0 -72 0 -72c0,-20 -16,-36 -36,-36 -20,0 -36,16 -36,36 0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104c0,20 16,36 36,36 20,0 36,16 36,36 0,20 -16,36 -36,36 -20,0 -36,16 -36,36l0 72c0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36l0 -72c0,-20 16,-36 36,-36 20,0 36,16 36,36l0 72c0,20 -16,36 -36,36 -20,0 -36,16 -36,36 0,20 16,36 36,36 20,0 36,-16 36,-36 0,-20 16,-36 36,-36 20,0 36,-16 36,-36l0 -72 0 -72"/>',
'<path id="motionpath" fill="none" stroke="#000000" stroke-width="4" d="M36 68l0 104 0 72c0,20 16,36 36,36l72 0c20,0 36,16 36,36l0 72c0,20 16,36 36,36l72 0c20,0 36,-16 36,-36 0,-20 -16,-36 -36,-36l-72 0 -72 0 -72 0c-20,0 -36,16 -36,36 0,20 16,36 36,36 20,0 36,-16 36,-36l0 -72 0 -72c0,-20 16,-36 36,-36l72 0c20,0 36,16 36,36 0,20 16,36 36,36 20,0 36,-16 36,-36l0 -72"/>'
];
$(document).ready(function () {
$("body").delegate("#b_next", "click", function () {
var level = parseInt($("#level span").html());
show_level(level);
});
$("body").delegate("#b_menu", "click", function () {
$("body").css("background-color", "#f0f0f0");
$("#complete").html("");
$("#b_menu,#b_next,#level,#moves").hide();
$("#info,#mainpath,#maincircle,#div_levels,#lighton").show();
$(".blocks").remove();
});
$("body").delegate(".b_levels", "click", function () {
var level = parseInt($(this).children("div").html());
$("#info,#div_levels").hide();
$("#mainpath,#maincircle").hide();
show_level(level - 1);
});
$("body").delegate(".blocks", "click", function () {
// rotates the block 90 deg clockwise
if (playing) {
blocked = parseInt($(this).data("blocked"));
if (blocked === 0) {
$(".blocks").css("z-index", 100);
angle = parseInt($(this).data("angle")) + 90;
$(this).css({
"transition": "200ms linear all",
"z-index": "101",
"transform:": "rotate(" + angle + "deg)",
"-moz-transform": "rotate(" + angle + "deg)",
"-webkit-transform": "rotate(" + angle + "deg)",
"-o-transform": "rotate(" + angle + "deg)",
"-ms-transform": "rotate(" + angle + "deg)",
"-khtml-transform": "rotate(" + angle + "deg)"
});
$(this).data("angle", angle);
moves = parseInt($("#moves span").html());
$("#moves span").html(moves + 1);
verify();
}
}
});
show_level_buttons();
});
function show_level_buttons() {
var level = 1;
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 4; j++) {
bhtml = '<div class="b_levels" style="top:' + (i * 55) + 'px;left:' + (2 + j * 65) + 'px;">LEVEL<div>' + level + '</div></div>';
$("#div_levels").append(bhtml);
level++;
}
}
}
function verify() {
// see if all block's rotation angle is zero
// using javascript mod
complete = true;
var level = parseInt($("#level span").html());
var verify_paths = toverify[level - 1];
for (var i = 0; i < verify_paths.length; i++) {
angle = parseInt($("#block_" + verify_paths[i]).data("angle"));
mod = angle % 360;
if (mod != 0) {
complete = false;
}
}
if (complete) {
playing = false;
completed();
}
}
function completed() {
// show the level completed_paths
$(".a1,.a2,.a3,.a4").hide();
$(".blocks circle,.blocks path,.blocks line").hide();
$(".blocks").css({
"cursor": "default",
"background-image": "url()"
});
var level = parseInt($("#level span").html());
$("#complete path:eq(" + (level - 1) + ")").show();
var completed_path = completed_paths[level - 1];
html = completed_path;
html += '<circle id="mover" fill="#fffd56" cx="0" cy="0" r="7">';
html += '</circle>'
$("#complete").html(html).show();
var myPath = document.getElementById("motionpath");
var length = myPath.getTotalLength();
var speed = length / 400;
html = '<animateMotion dur="' + speed + 's" calcmode="linear" repeatCount="indefinite">';
html += '<mpath xlink:href="#motionpath"/>';
$("#complete circle").html(html);
var level = parseInt($("#level span").html());
$(".b_levels:eq(" + (level - 1) + ")").css({
"border": "2px solid #006100",
"color": "#006100",
"background-color": "#ffffff"
});
if (level < 12) {
$("#b_next").show();
}
$("body").css("background-color", "#f0f0f0");
$("#lighton").show();
}
function show_blocks() {
var paths = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72px" height="72px" viewBox="0 0 72 72" E="xMidYMid meet">';
paths += '<circle fill="#9a9a9a" cx="36" cy="36" r="36"/>';
paths += '<polyline fill="none" class="a1" stroke="#000000" stroke-width="4" stroke-linecap="round" points="49,13 36,0 23,13 "/>';
paths += '<polyline fill="none" class="a2" stroke="#000000" stroke-width="4" stroke-linecap="round" points="59,23 72,36 59,49 "/>';
paths += '<polyline fill="none" class="a3" stroke="#000000" stroke-width="4" stroke-linecap="round" points="49,59 36,72 23,59 "/>';
paths += '<polyline fill="none" class="a4" stroke="#000000" stroke-width="4" stroke-linecap="round" points="13,23 0,36 13,49 "/>';
paths += '<path fill="none" class="p12" stroke="#000000" stroke-width="4" d="M36 0c0,20 16,36 36,36"/>';
paths += '<path fill="none" class="p23" stroke="#000000" stroke-width="4" d="M36 72c0,-20 16,-36 36,-36"/>';
paths += '<path fill="none" class="p34" stroke="#000000" stroke-width="4" d="M36 72c0,-20 -16,-36 -36,-36"/>';
paths += '<path fill="none" class="p14" stroke="#000000" stroke-width="4" d="M36 0c0,20 -16,36 -36,36"/>';
paths += '<line fill="none" class="p13" stroke="#000000" stroke-width="4" x1="36" y1="0" x2="36" y2= "72" />';
paths += '<line fill="none" class="p24" stroke="#000000" stroke-width="4" x1="72" y1="36" x2="0" y2= "36" />';
paths += '';
paths += '</svg>';
var c = 0;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 5; j++) {
$("#game").append("<div class='blocks' id='block_" + c + "' data-angle='0' style='top:" + (172 + i * 72) + "px;left:" + (j * 72) + "px;'>" + paths + "</div>");
c++;
}
}
}
function show_level(level) {
// show blocks according level
$("body").css("background-color", "#c0c0c0");
playing = true;
$("#complete").html("").hide();
$(".blocks").remove();
show_blocks();
$("#level span").html(level + 1);
$("#moves span").html(0);
$("#level,#moves,#b_menu").show();
$("#lighton,#b_next").hide();
level_paths = levels[level];
$(".blocks").css({
"background-image": "url(https://i.imgur.com/0Fc0TuZ.png)",
"cursor": "default"
}).data("angle", "0").data("blocked", "1").show();
$(".blocks circle,.blocks polyline,.blocks path,.blocks line").hide();
for (var i = 0; i < level_paths.length; i++) {
path = level_paths[i];
switch (path) {
case "":
break;
case "x":
$(".blocks:eq(" + i + ") .p13").show();
$(".blocks:eq(" + i + ") .p24").show();
break;
case "y":
$(".blocks:eq(" + i + ") .p12").show();
$(".blocks:eq(" + i + ") .p34").show();
break;
case "z":
$(".blocks:eq(" + i + ") .p23").show();
$(".blocks:eq(" + i + ") .p14").show();
break;
default:
arrow = path.substr(2, 1);
angle = parseInt(path.substr(4));
path = path.substr(0, 2);
$(".blocks:eq(" + i + ") .p" + path).show();
bgi = ""
if (angle !== 0) {
$(".blocks:eq(" + i + ") .a" + arrow).show();
$(".blocks:eq(" + i + ") circle").show();
$(".blocks:eq(" + i + ")").css({
"background-image": "url()",
"cursor": "pointer"
}).data("angle", angle).data("blocked", 0);
rotate_block(i, angle);
}
break;
}
}
}
function rotate_block(n, angle) {
$(".blocks:eq(" + n + ")").css({
"transform:": "rotate(" + angle + "deg)",
"-moz-transform": "rotate(" + angle + "deg)",
"-webkit-transform": "rotate(" + angle + "deg)",
"-o-transform": "rotate(" + angle + "deg)",
"-ms-transform": "rotate(" + angle + "deg)",
"-khtml-transform": "rotate(" + angle + "deg)",
}).data("angle", angle);
}
){kind=link}
0 Comments