<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
</head>
<body>
<h1> Scacchiera </h1>
<div id="cartaDaDisegno"></div>
</body>
</html>
// ANDARE IN FONDO PER LE ISTRUZIONI
// DEFINIZIONE FOGLIO
p = Raphael("cartaDaDisegno", 500, 500);
// DEFINIZIONE FUNZIONI
Raphael.el.disappear = function(d) {
setTimeout( function() {
this.animate({ opacity : 0 }, 1000);
}.bind(this), d);
};
Raphael.el.setTo = function(x, y, d) {
setTimeout( function() {
this.attr({'transform': "t"+(x*50+9)+","+(y*50+9)});
}.bind(this), d);
};
Raphael.el.moveTo = function(x, y, d) {
setTimeout( function() {
this.animate({'transform': "...t"+x*50+","+y*50}, 1000, "bounce");
}.bind(this), d);
};
//DEFINIZIONE PROTOTIPI PEZZI
var cavallo = p.path("M11,21 C8,23 8.18,25.34 6,25 C4.958,24.06 7.41,21.96 6,22 C5,22 6.19,23.23 5,24 C4,24 0.997,25 1,20 C1,18 7,8 7,8 C7,8 8.89,6.1 9,4.5 C8.27,3.506 8.5,2.5 8.5,1.5 C9.5,0.5 11.5,4 11.5,4 L13.5,4 C13.5,4 14.28,2.008 16,1 C17,1 17,4 17,4 C27.5,5 33.5,12 33,33 L10,33 C10,24 19.9999997,27 17.9999997,12.5 C18.3799997,15.41 13.45,19.37 11,21 Z").attr({"stroke": '#000000',"stroke-width": '1.5', "fill": '#DDDDDD',"fill-rule": 'evenodd','stroke-opacity': '1'});
var re = p.path("M16.3391477,1 L17.7193664,1 C17.7193664,1.38799758 17.7193664,1.77599516 17.7202148,2.16399274 L19.3294803,2.16399274 C19.3303286,2.63010488 19.3303286,3.09535861 19.3303286,3.56061235 C18.7933412,3.56147075 18.2563538,3.56061235 17.7202148,3.56147075 C17.7193664,4.36321796 17.7193664,5.16496517 17.7193664,5.96671238 C18.9825169,6.30921467 19.8681643,7.4191281 20.3949718,8.57453682 C20.7953795,9.41319531 20.8208291,10.3780388 20.6910359,11.2853695 C22.3444141,10.1505624 24.3396658,9.47242503 26.3484907,9.5574068 C27.8568059,9.61749492 29.3456098,10.1600048 30.5256247,11.1162643 C31.2373663,11.6871015 31.8371294,12.3935661 32.316431,13.1721365 C32.9942397,14.4391374 33.1944435,15.9722429 32.7974291,17.3628537 C32.3291558,19.0710731 31.1745905,20.4891528 29.8825972,21.6445615 C28.9731967,22.4523175 27.9764192,23.1587821 26.9228042,23.7613801 C26.9202592,25.9228357 26.9219558,28.0851496 26.9219558,30.2466052 C24.6891742,31.7522418 22.0424118,32.4973345 19.4041325,32.8346864 C16.1491237,33.2072327 12.7991029,32.968597 9.67897722,31.929931 C8.45993951,31.5213317 7.28840781,30.968521 6.21782633,30.2491804 C6.21697801,27.9306373 6.21952298,25.6120943 6.21612969,23.2944096 C4.85118073,22.4866536 3.58294039,21.47889 2.58531455,20.2307738 C1.70645369,19.1311612 1.07869593,17.7843289 1.00828526,16.3568069 C0.925149777,14.8846479 1.47655862,13.4528338 2.26210414,12.2390538 C3.06716105,11.0184065 4.32097992,10.1050671 5.73258655,9.756556 C7.51151631,9.30160308 9.40412112,9.64324697 11.0642859,10.3694548 C11.9109105,10.7445764 12.7185124,11.2132637 13.451462,11.7823841 C13.242775,10.7291252 13.1901791,9.58315885 13.6576041,8.58998805 C14.1835633,7.42771212 15.0709074,6.31093147 16.3391477,5.96757078 C16.339996,5.16496517 16.339996,4.36321796 16.3391477,3.56147075 C15.8030086,3.56061235 15.2660213,3.56147075 14.7290339,3.56061235 C14.7290339,3.09535861 14.7290339,2.63010488 14.7298822,2.16399274 C15.2660213,2.16485114 15.8021603,2.16399274 16.3382994,2.16485114 C16.339996,1.77685356 16.3391477,1.38885598 16.3391477,1 L16.3391477,1 Z").attr({stroke: '#000000',"stroke-width": '1.5',fill: '#DDDDDD',"fill-rule": 'evenodd','stroke-opacity': '1'});
var regina = p.path("M14.9187807,2.43533565 C15.2910656,1.56376539 16.1624049,0.956072906 17.0650354,1.00248789 C18.2059603,1.01108326 19.2305462,2.07347068 19.2778841,3.29401286 C19.3645366,4.37273148 18.6809445,5.41449002 17.7414065,5.77033824 C18.383277,9.10276221 19.0267523,12.4343267 19.6702275,15.7658911 C20.7758495,12.6792946 21.8750529,9.59011955 22.9782679,6.50352308 C22.2401167,6.04539 21.725818,5.16522437 21.7811793,4.23692468 C21.8036448,2.97426519 22.8731616,1.86718186 24.0525987,1.89210843 C25.2376523,1.85514835 26.3224135,2.96395075 26.3456813,4.23434607 C26.4202988,5.42996169 25.5465525,6.55939297 24.4521632,6.75622689 C24.5163502,9.97347294 24.5797349,13.1915785 24.643922,16.4088246 C26.1731786,13.8972582 27.7032375,11.3865514 29.2300871,8.8732659 C28.6227171,8.3119884 28.3082005,7.41119389 28.4670635,6.56283112 C28.6540083,5.37838948 29.7508046,4.45524701 30.8732758,4.5695654 C32.0775854,4.62887344 33.0941479,5.85973006 32.9930533,7.14903518 C32.9537387,8.40223976 31.8898383,9.47064394 30.7248432,9.46462718 C30.1279036,12.6492108 29.5365803,15.8355136 28.9396407,19.0200972 C28.8120689,19.6063013 28.8586045,20.2397799 28.5898212,20.7873048 C28.2528392,21.5600283 27.5467816,22.0224591 27.0822278,22.6920382 C26.8230725,23.0289766 26.6706283,23.4415543 26.4194964,23.7845094 C26.297541,23.9942364 26.1130032,24.1824749 26.0736887,24.4334597 C26.0993635,24.8829974 26.2173072,25.3196421 26.287913,25.7623035 C26.949842,26.3304573 27.3566274,27.2553188 27.2258463,28.1698659 C27.5178974,28.5747077 27.7513778,29.0620651 27.7313194,29.5863825 C27.7200866,30.2456472 27.346197,30.8533396 26.840724,31.2074688 C21.5468965,33.1972964 15.7179095,33.550566 10.2539864,32.1667118 C9.23260989,31.9260415 8.23450117,31.585665 7.23879946,31.2487266 C6.65951129,30.9332766 6.117933,30.4063805 5.97431446,29.7015604 C5.85797543,29.177243 6.03288515,28.6262799 6.33777367,28.2137023 C6.45331037,28.0804741 6.45571738,27.8922355 6.49583429,27.7254854 C6.6723487,26.9458856 7.1240651,26.2582562 7.70736497,25.763163 C7.78118009,25.3471472 7.87585599,24.9337101 7.92158927,24.512537 C7.9432524,24.2606928 7.7498889,24.0750328 7.63756155,23.8764799 C7.31742861,23.4355375 7.12005341,22.9069224 6.76461759,22.4926257 C6.30808715,21.9227528 5.70071714,21.4732151 5.40064265,20.7726927 C5.15512716,20.2595492 5.17839497,19.6690475 5.07489334,19.1163653 C4.47233736,15.8991193 3.87539774,12.6810137 3.27203941,9.46376765 C2.60850572,9.45173413 1.95861178,9.13026739 1.53818657,8.5784448 C0.991794255,7.91574196 0.852187409,6.91867933 1.16188995,6.1038385 C1.51411642,5.14717409 2.46649186,4.48103311 3.43090238,4.56870586 C4.50041919,4.62027807 5.44878294,5.58983552 5.55308691,6.72958125 C5.65016983,7.5306695 5.33164157,8.34722941 4.76679548,8.8732659 C6.29284273,11.3865514 7.82370401,13.8972582 9.35296062,16.4088246 C9.41634533,13.1915785 9.48133473,9.97433248 9.54391711,6.75708643 C8.8442782,6.62213916 8.22647779,6.1227483 7.89751912,5.45059057 C7.3487198,4.36069797 7.74186551,2.89518781 8.72793916,2.26084969 C9.35697231,1.83194085 10.18659,1.77435189 10.8645658,2.104414 C11.7078232,2.50753674 12.2855067,3.48568956 12.2132963,4.48103311 C12.1844121,5.32423866 11.6885671,6.08235008 11.0194171,6.50180401 C12.1194227,9.59097909 13.2234401,12.6792946 14.3258528,15.7684697 C14.9701303,12.4351862 15.6128032,9.10190268 16.2562785,5.76861916 C15.579105,5.50560092 15.0158636,4.89876797 14.8112674,4.15440915 C14.6516021,3.59227212 14.6901143,2.96910797 14.9187807,2.43533565 L14.9187807,2.43533565 Z").attr({stroke: '#000000',"stroke-width": '1.5',fill: '#DDDDDD',"fill-rule": 'evenodd','stroke-opacity': '1'});
var alfiere = p.path("M16.5638842,1.03379348 C17.9102266,0.816992507 19.3209953,1.66516425 19.7728047,2.95190285 C20.227918,4.12444857 19.8264932,5.54027477 18.8485365,6.32224774 C20.9737752,7.33839887 22.9453823,8.80139169 24.2529038,10.7898373 C25.4076196,12.5225901 26.0097569,14.6872899 25.6265035,16.7601389 C25.3415415,18.3886286 24.3693666,19.926095 22.9032574,20.7279276 C23.8110061,21.5760994 24.7542718,25.6787682 24.4354447,26.4425365 C23.7325383,27.1856177 22.7512777,27.5778454 21.7906665,27.8658101 C21.0795003,28.0627514 20.3542925,28.2257659 19.619173,28.2878272 C19.619173,28.2870007 22.9734655,28.6436456 24.6592845,28.651093 C26.2955449,28.6875023 27.9640184,28.6403357 29.5581539,29.0689727 C30.9020185,29.5447764 32.0773837,30.4293574 33,31.5092249 C32.6745651,31.9850285 32.3367405,32.4922766 31.8015074,32.7521068 C31.098601,33.11951 30.2585824,33.0284867 29.5267668,32.8017559 C28.6900521,32.5096538 27.798823,32.4343527 26.9191575,32.3954609 C24.7377523,32.3209873 22.5546952,32.5121362 20.37329,32.4144931 C19.224356,32.3623615 18.0613804,32.2415488 16.9743947,31.8410462 C15.815549,32.2746482 14.5674978,32.3747738 13.341748,32.4252504 C11.7451345,32.4773819 10.149347,32.3954609 8.55273347,32.3797387 C7.25347168,32.3797387 5.92612668,32.361534 4.66733777,32.7264548 C3.87109597,32.9995247 2.94682773,33.1584017 2.16462754,32.7578992 C1.64839193,32.5088263 1.30891539,32.0305402 1,31.5663213 C1.6996025,30.4665942 2.70316452,29.4868524 3.99003665,29.1409639 C4.65164421,29.0044289 5.31077384,28.8397595 5.98559703,28.782663 C8.50813071,28.541865 11.0595736,28.7793531 13.5721956,28.3978827 C13.8265965,28.3565084 14.0801714,28.3076868 14.3378762,28.2869997 C13.0964328,28.1562572 11.8541634,27.8625001 10.7267049,27.3130503 C10.2757214,27.0788722 9.83051985,26.8000099 9.49765113,26.4102646 C9.2762893,25.8128207 10.2046874,21.5322427 11.0537918,20.7279276 C9.90816168,20.0973844 9.04501575,19.012552 8.60807392,17.7853923 C7.99354705,16.0915313 8.13561509,14.1866617 8.7955707,12.5283825 C9.59098653,10.5027001 11.1116101,8.82704371 12.8866347,7.60402143 C13.5878891,7.11249556 14.3395282,6.69875325 15.1085127,6.32224774 C14.3791751,5.72480384 13.9422332,4.78147136 14.0033555,3.83482895 C14.0463063,2.44548226 15.1869805,1.20094537 16.5638842,1.03379348 Z").attr({stroke: '#000000',"stroke-width": '1.5', fill: '#DDDDDD',"fill-rule": 'evenodd','stroke-opacity': '1'});
var torre = p.path("M3.24520348,1 L9.42123376,1 L9.42123376,3.0313803 L13.350684,3.0313803 L13.350684,1 L20.6486277,1 C20.649316,1.67754193 20.6486277,2.35446111 20.649316,3.0313803 C21.9591328,3.0313803 23.2689495,3.03200304 24.5787662,3.0313803 L24.5787662,1 L30.7541082,1 C30.7541082,2.9473103 30.7547965,4.89462059 30.7541082,6.84193089 C30.5462445,6.84442185 30.3370042,6.82823059 30.1298288,6.85064926 C29.3575669,7.73867755 28.6272907,8.65784288 27.8708595,9.55770325 C27.7187473,9.76881237 27.4984944,9.9481617 27.3918093,10.1798213 C27.3780435,14.1647393 27.3918093,18.15028 27.3842381,22.135198 C27.3883679,22.2454231 27.369784,22.3668575 27.4434311,22.4640051 C27.8660415,23.0967097 28.2817689,23.7331507 28.7078207,24.3646098 C29.0154865,24.3646098 29.3231524,24.3646098 29.6315065,24.3652326 C29.6604147,24.8652934 29.5688721,25.377809 29.6851932,25.8697742 C29.5902091,25.9501078 29.6432074,26.0790151 29.6301299,26.1823901 C29.6335714,26.9309244 29.6301299,27.6794588 29.6315065,28.4286159 C30.7541082,28.4286159 31.87671,28.4279932 33,28.4286159 L33,32.9995329 C22.3335628,33.0001557 11.6664372,33.0001557 1,32.9995329 L1,28.4286159 C2.12260174,28.4279932 3.24589177,28.4292387 4.3684935,28.4279932 C4.37193496,27.0697956 4.35816915,25.7203164 4.3684935,24.3652326 C4.67615934,24.3646098 4.98382517,24.3646098 5.29149101,24.3652326 C5.71685451,23.7362644 6.13051708,23.1004461 6.55243913,22.4702325 C6.61369698,22.3911444 6.6123204,22.2915059 6.61507356,22.199963 C6.61300869,18.2337272 6.61369698,14.2674915 6.61507356,10.3012557 C6.62333305,10.197258 6.59373656,10.096374 6.51458315,10.0197769 C5.62737675,8.96796777 4.77114342,7.89374 3.87223608,6.851272 C3.66506066,6.82760785 3.45444378,6.84504459 3.24589177,6.84255363 C3.24520348,4.89462059 3.24589177,2.9473103 3.24520348,1 L3.24520348,1 Z").attr({stroke: '#000000',"stroke-width": '1.5',fill: '#DDDDDD',"fill-rule": 'evenodd','stroke-opacity': '1'});
var pedone = p.path("M12.826087,5.19672131 C12.826087,6.1304918 13.1286957,6.99081967 13.64,7.69377049 C11.6052174,8.86885246 10.2173913,11.0616393 10.2173913,13.5901639 C10.2173913,15.72 11.1982609,17.6190164 12.7321739,18.867541 C9.60173913,19.9796721 1,24.6904918 1,33 L33,33 C33,24.6904918 24.3982609,19.9796721 21.2678261,18.867541 C22.8017391,17.6190164 23.7826087,15.72 23.7826087,13.5901639 C23.7826087,11.0616393 22.3947826,8.86885246 20.36,7.69377049 C20.8713043,6.99081967 21.173913,6.1304918 21.173913,5.19672131 C21.173913,2.87803279 19.306087,1 17,1 C14.693913,1 12.826087,2.87803279 12.826087,5.19672131 Z").attr({stroke: '#000000',"stroke-width": '1.5',fill: '#DDDDDD',"fill-rule": 'evenodd','stroke-opacity': '1'});
// NASCONDO I PEZZI
re.hide();
regina.hide();
torre.hide();
pedone.hide();
alfiere.hide();
cavallo.hide();
// INIZIARE QUI
//Disegnare la scacchiera all'interno di questo rettangolo (lato quadratino 50)
p.rect(50,50,400,400); // BORDI TASTIERA
p.rect(100,50,50,50).attr("fill","gray"); // UN QUADRATINO
// COSTRUIRE I PEZZI
reBianco = re.clone();
reNero = re.clone();
reNero.attr("fill","black");
// POSIZIONARE I PEZZI
reBianco.setTo(5,1);
reNero.setTo(5,8);
// ANIMARE I PEZZI
reBianco.moveTo(0,1,1000);
// FAR SPARIRE I PEZZI
reBianco.disappear(2000);
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |