Hi, i am a newb trying to learn how to make websites and i'm having troubles with a chess board i'm trying to make.
The point is that i want to be able to create lessons with it for children, as in make a specific setup and have one (or more, if possible)
specific move(s) give a different result (like a popup-box or something) then a wrong move. I copied a drag and drop chessboard from the inet
which i got figured out. But don't know how to create a "good move" and a "bad move". Here is some of the code:
<head>
<style type="text/css">
#chess_board { border:5px solid #333; }
#chess_board td {
background:#fff;
height:50px;
text-align:center;
vertical-align:middle;
width:50px;
}
#chess_board tr:nth-child(odd) td:nth-child(even),
#chess_board tr:nth-child(even) td:nth-child(odd) {
background:#ccc;
}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
table id="chess_board" cellpadding="0" cellspacing="0">
<tr>
<td ondrop="drop(event)"ondragover="allowDrop(event)" id="A8"><div class="piece" draggable="true" ondragstart="drag(event)" id="dragA8">♜</div ></td>
this is only the first field this goes on with b8 c8 etc... </tr> <tr> a7 b7 etc...
as u can see i am using html5 drag and drop for the piece-moving and a table to create the field, is it possible to create a if...else statement inside the drop functon
to make only a specific piece able to accually be dropped (but maintain the ability to drag the other pieces)
