Tabuleiro de Xadrez (Sem a lógica para jogar localmente)

Não tem um tabuleiro de xadrez? Cole isso no bloco de notas, salve com o nome Xadrez.html e abra o arquivo no navegador:

<div id="palco" style="display:none; width:800px; height:600px; "></div>
<div id="Form1" style="display:inline-block;  width:300px; height:300px;">
	<p><b>Xadrez</b><br><br>
	Escolha as cores das peças:<br>
	<button style="width:150px;" onclick="playBrancas()" >Brancas</button><br>
	<button style="width:150px;" onclick="playNegras()" >Negras</button><br>
	</p>
</div>
<div id="Form2" style="display:none; width:300px; height:300px;">
	<p>Promover Pião para:<br>
		<button style="width:150px;" onclick="promoveRainha()">Rainha</button><br>
		<button style="width:150px;" onclick="promoveCavalo()">Cavalo</button><br>
		<button style="width:150px;" onclick="promoveTorre()">Torre</button><br>
		<button style="width:150px;" onclick="promoveBispo()">Bispo</button><br>
		<button style="width:150px;" onclick="fechar()">Cancelar</button><br>
	</p>
</div>

<script>
pecas =	[["&#x2654", "&#x2655", "&#x2656", "&#x2657", "&#x2658", "&#x2659"],
	["&#x265A", "&#x265B", "&#x265C", "&#x265D", "&#x265E", "&#x265F"]]

Palco = document.getElementById("palco");
Form1 = document.getElementById("Form1");
Form2 = document.getElementById("Form2");

capturadas=0;

function allowDrop(ev) { ev.preventDefault();}
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev)
{
	ev.preventDefault();
	var data = ev.dataTransfer.getData("text");
	Palco.ultimaPecaTocada = data;

	if(ev.target.hasChildNodes())
	{
		x=ev.target.parentElement
		myArray = x.parentElement.id.split("_")
		x.parentElement.appendChild(document.getElementById(data));
		casa="";
		do
		{
			if(capturadas<8) casa=document.getElementById("div_"+capturadas+"_0")
			else if(capturadas<16) casa=document.getElementById("div_"+ (capturadas-8)+"_1")
			else if(capturadas<24) casa=document.getElementById("div_"+ (capturadas-16)+"_10")
			else if(capturadas<32) casa=document.getElementById("div_"+ (capturadas-24)+"_11")
			capturadas++;
			if(capturadas>32) capturadas=0;
		}
		while(casa.hasChildNodes())
		casa.appendChild(x)
		if(document.getElementById(data).tipo==5 && ( myArray[1]+""=="0" || myArray[1]+""=="7" ) )
		{ 
			Palco.style.display = "none";
			Form2.style.display = "inline-block";
		}
	}
	else if(!ev.target.hasChildNodes())
	{
		x=ev.target
		myArray = x.id.split("_")
		x.appendChild(document.getElementById(data));
		if(document.getElementById(data).tipo==5 && ( myArray[1]+""=="0" || myArray[1]+""=="7" ) )
		{ 
			Palco.style.display = "none";
			Form2.style.display = "inline-block";
		}
	}
}

function createTable() 
{
	var table = document.createElement("TABLE");
	table.cellPadding="0"
	table.cellSpacing="0"
	table.style.border = "1px solid #000000";
	table.style.borderSpacing = "0px";
	table.id = "chessTable";
	Palco.appendChild(table);
	for(var n=0; n<8; n++)
	{
		var y = document.createElement("TR");
		document.getElementById("chessTable").appendChild(y);
		for(var m=0; m<8+4; m++)
		{
			var z = document.createElement("TD"); 
			var t = document.createElement("Div");
			t.style.width = "60px"; 
			t.style.height = "60px"; 
			t.style.margin = "0px"; 
			t.style.padding = "0px";
			if(m>1 && m<10)
			{
				t.style.border = "1px solid #000000";
				if(Math.pow(-1,n+m)<1) t.style.backgroundColor = "#FFAA66";
				else t.style.backgroundColor = "#FFFFCC";
			}
			else 
			{
				t.style.border = "1px solid #845424";
				t.style.backgroundColor = "#946434"; 
			}
			t.id = "div_"+n+"_"+m;
			t.addEventListener("drop", drop);
			t.addEventListener("dragover", allowDrop);
			z.appendChild(t);
			y.appendChild(z);
		}
	}
}

function criatePeca(cor, tipo, px, py, id)
{
	var div = document.createElement("DIV");
	div.style.position = "relative";
	div.id = id
	div.draggable="true";
	div.cor=cor;
	div.tipo=tipo;
	div.addEventListener("dragstart", drag);

	var back = document.createElement("DIV");
	back.innerHTML = pecas[1][tipo];
	//back.style.fontFamily = "Symbola";
	back.style.left = "7px";
	back.style.position = "absolute";
	(cor==1 ? back.style.color = "#cc6600" : back.style.color = "#ffffff")
	back.style.fontSize = "55px";
	div.appendChild(back)

	var front = document.createElement("DIV");
	front.innerHTML = pecas[0][tipo];
	//front.style.fontFamily = "Symbola";
	front.style.left = "7px";
	front.style.position = "absolute";
	front.style.color = "#000000";
	front.style.fontSize = "55px";
	div.appendChild(front)

	document.getElementById("div_"+px+"_"+(py+2)).appendChild(div)
}

function fechar()
{
	Form1.style.display = "none";
	Form2.style.display = "none";
	Palco.style.display = "inline-block";
}

function promoveRainha()
{
	p=document.getElementById(Palco.ultimaPecaTocada)
	p.tipo=1;
	p.childNodes[0].innerHTML = pecas[1][p.tipo];
	p.childNodes[1].innerHTML = pecas[0][p.tipo];
	fechar()
}

function promoveTorre()
{
	p=document.getElementById(Palco.ultimaPecaTocada)
	p.tipo=2;
	p.childNodes[0].innerHTML = pecas[1][p.tipo];
	p.childNodes[1].innerHTML = pecas[0][p.tipo];
	fechar()
}

function promoveBispo()
{
	p=document.getElementById(Palco.ultimaPecaTocada)
	p.tipo=3;
	p.childNodes[0].innerHTML = pecas[1][p.tipo];
	p.childNodes[1].innerHTML = pecas[0][p.tipo];
	fechar()
}

function promoveCavalo()
{
	p=document.getElementById(Palco.ultimaPecaTocada)
	p.tipo=4;
	p.childNodes[0].innerHTML = pecas[1][p.tipo];
	p.childNodes[1].innerHTML = pecas[0][p.tipo];
	fechar()
}

function playBrancas()
{
	createTable() ;
	criatePeca(0,2,7,0, "w_tower_1");criatePeca(0,4,7,1, "w_horse_1");
	criatePeca(0,3,7,2, "w_bis_1");	 criatePeca(0,1,7,3, "w_queen");
	criatePeca(0,0,7,4, "w_king");	 criatePeca(0,3,7,5, "w_bis_2");
	criatePeca(0,4,7,6, "w_horse_2");criatePeca(0,2,7,7, "w_tower_2");
	criatePeca(0,5,6,0, "w_piao_1"); criatePeca(0,5,6,1, "w_piao_2");
	criatePeca(0,5,6,2, "w_piao_3"); criatePeca(0,5,6,3, "w_piao_4");
	criatePeca(0,5,6,4, "w_piao_5"); criatePeca(0,5,6,5, "w_piao_6");
	criatePeca(0,5,6,6, "w_piao_7"); criatePeca(0,5,6,7, "w_piao_8");
	criatePeca(1,5,1,0, "b_piao_1"); criatePeca(1,5,1,1, "b_piao_2"); 
	criatePeca(1,5,1,2, "b_piao_3"); criatePeca(1,5,1,3, "b_piao_4"); 
	criatePeca(1,5,1,4, "b_piao_5"); criatePeca(1,5,1,5, "b_piao_6"); 
	criatePeca(1,5,1,6, "b_piao_7"); criatePeca(1,5,1,7, "b_piao_8");
	criatePeca(1,2,0,0, "b_tower_1");criatePeca(1,4,0,1, "b_horse_1");
	criatePeca(1,3,0,2, "b_bis_1");	 criatePeca(1,1,0,3, "b_queen"); 
	criatePeca(1,0,0,4, "b_king");	 criatePeca(1,3,0,5, "b_bis_2"); 
	criatePeca(1,4,0,6, "b_horse_2");criatePeca(1,2,0,7, "b_tower_2");
	fechar()
}

function playNegras()
{	
	createTable() ;
	criatePeca(1,2,7,0, "w_tower_1");criatePeca(1,4,7,1, "w_horse_1");
	criatePeca(1,3,7,2, "w_bis_1");	 criatePeca(1,3,7,5, "w_bis_2");
	criatePeca(1,4,7,6, "w_horse_2");criatePeca(1,2,7,7, "w_tower_2");
	criatePeca(1,5,6,0, "w_piao_1"); criatePeca(1,5,6,1, "w_piao_2");
	criatePeca(1,5,6,2, "w_piao_3"); criatePeca(1,5,6,3, "w_piao_4");
	criatePeca(1,5,6,4, "w_piao_5"); criatePeca(1,5,6,5, "w_piao_6");
	criatePeca(1,5,6,6, "w_piao_7"); criatePeca(1,5,6,7, "w_piao_8");
	criatePeca(1,0,7,3, "w_king");	 criatePeca(1,1,7,4, "w_queen");
	criatePeca(0,5,1,0, "b_piao_1"); criatePeca(0,5,1,1, "b_piao_2"); 
	criatePeca(0,5,1,2, "b_piao_3"); criatePeca(0,5,1,3, "b_piao_4"); 
	criatePeca(0,5,1,4, "b_piao_5"); criatePeca(0,5,1,5, "b_piao_6"); 
	criatePeca(0,5,1,6, "b_piao_7"); criatePeca(0,5,1,7, "b_piao_8");
	criatePeca(0,2,0,0, "b_tower_1");criatePeca(0,4,0,1, "b_horse_1");
	criatePeca(0,3,0,2, "b_bis_1");	 criatePeca(0,3,0,5, "b_bis_2"); 
	criatePeca(0,4,0,6, "b_horse_2");criatePeca(0,2,0,7, "b_tower_2");
	criatePeca(0,0,0,3, "b_king");	 criatePeca(0,1,0,4, "b_queen"); 
	fechar()
}
</script>

Xadrez

Escolha as cores das peças:

Promover Pião para: