|
Тяпничный animated GIF : ChessPlayer
#38819350
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
Ссылка на профиль пользователя:
|
|
|
|
mayton,
на тебе в качестве заготовки. :)
Нотация ходов упрощена. Проверок нет. Фигура только одна и нарисована символически.
Если включать то
1.
<object data="chess.svg" type="image/svg+xml" height="300px" width="300px">
или inline.
Если сжимать до svgz то
1.
response.addHeader("Content-Encoding", "gzip")
на правах Public Domain, as is, prove fact 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" onload="initBoard();" id="chessBoard_01">
<rect id="Border" x="0" y="0" width="100" height="100" fill="none" stroke="black"/>
<g id="board_01"/>
<script type="application/ecmascript">
<![CDATA[
var unicPrefix = '_01';
var klekaColors = ["#FFFACD","#DAA520"];
var kletkaChars = ['A','B','C','D','E','F','G','H'];
var peshkaPath = "M2 8 A1.5,1.5 0 0,1 3.5,6 A1.5,4 0 0,1 6.5,6 A1.5,1.5 0 0,1 8 8 z";
var nextStep = 0;
var moves = ['E2E4','D7D5','E4D5','E7E5','D5E6E5','F7E6'];
function kletkaXY(kletka){
return {"x":(kletka.toUpperCase().charCodeAt(0)-64)*10,"y":(9-kletka.substring(1,2))*10};
}
function createFig(path,color){
var fig = document.createElementNS("http://www.w3.org/2000/svg",'path');
fig.setAttribute('d',path);
fig.setAttribute('fill',color?'white':'black');
fig.setAttribute('stroke',color?'black':'white');
fig.setAttribute('stroke-width','0.3');
return fig;
}
function initBoard(){
var svg=document.getElementById("board"+unicPrefix);
while (svg.hasChildNodes()) {
svg.removeChild(svg.firstChild);
}
var color = 1;
for (var i=0;i<kletkaChars.length;i++) {
for (var j=1;j<=8;j++) {
var kletkaNum=kletkaChars[i]+j+unicPrefix;
var kletka = document.createElementNS("http://www.w3.org/2000/svg",'g');
kletka.id ='kletka'+kletkaNum;
var rect = document.createElementNS("http://www.w3.org/2000/svg",'rect');
rect.setAttribute('stroke','black');
rect.setAttribute('fill',klekaColors[color]);
rect.setAttribute('width',10);
rect.setAttribute('height',10);
var x = (i+1)*10;
var y = 90-j*10;
rect.setAttribute('x',x);
rect.setAttribute('y',y);
kletka.appendChild(rect);
if (j==2) {
var peshka = createFig(peshkaPath,true);
peshka.id = 'fig'+kletkaNum;
peshka.setAttribute('transform','translate('+x+' '+y+')');
kletka.appendChild(peshka);
}
if (j==7) {
var peshka = createFig(peshkaPath,false);
peshka.id = 'fig'+kletkaNum;
peshka.setAttribute('transform','translate('+x+' '+y+')');
kletka.appendChild(peshka);
}
svg.appendChild(kletka);
color ^= 1;
}
color ^= 1;
}
nextStep = 0;
setTimeout(nextMove,1000);
}
function nextMove() {
if (nextStep<moves.length) {
frm = moves[nextStep].substring(0,2);
tto = moves[nextStep].substring(2,4);
ddl = moves[nextStep].substring(4,6);
var fig = document.getElementById("fig"+tto+unicPrefix);
var kletkaTo = document.getElementById("kletka"+tto+unicPrefix);;
if ((fig!=null)&&(kletkaTo!=null)) {
kletkaTo.removeChild(fig);
}
fig = document.getElementById("fig"+frm+unicPrefix);
var kletkaFrom = document.getElementById("kletka"+frm+unicPrefix);;
if ((fig!=null)&&(kletkaTo!=null)&&(kletkaFrom!=null)) {
kletkaFrom.removeChild(fig);
fig.id="fig"+tto+unicPrefix;
var xy = kletkaXY(tto);
fig.setAttribute('transform','translate('+xy.x+' '+xy.y+')');
kletkaTo.appendChild(fig);
}
fig = document.getElementById("fig"+ddl+unicPrefix);
kletkaTo = document.getElementById("kletka"+ddl+unicPrefix);;
if ((fig!=null)&&(kletkaTo!=null)) {
kletkaTo.removeChild(fig);
}
nextStep++;
setTimeout(nextMove,1000);
} else {
setTimeout(initBoard,3000);
}
}
function refreshBoard() {
var svg=document.getElementById("chessBoard"+unicPrefix);
svg.innerHTML = svg.innerHTML;
}
]]>
</script></svg>
|
|
|
