I have finally finished completing a small markup of a chessboard from scratch. The code is very simple and probably can be done much easier, however I wanted to complete the project before I go back and see what I could have done better.
With that being said I'm having a lot of problems attempting to move the pieces on the board so I'm hoping someone could give me some advice on where to go next.
checkout https://github.com/kevin6767/Chessboard.js
Hopefully someone can take a quick look and figure it out fairly quickly or point me in the right directions
I've looked into onclick and onmousedown options but once I get the code in the images stay the same, I don't get errors or anything they just keep the same behavior.
Well this is swell dude. But if you are just learning its fine with javascript, I would recommend using a framework like Angular or a library like JQuery/React
The first thing is to map routes or make a rule engine which piece can go where based on the item that you are dragging and the cell where you are hovering or intent to drop.
You need to bind these events dragstart, dragend, dragenter, dragleave, dragover, drop to your img and td tags.
I also made a rule that if the cell already has a piece it will not be allowed to drop.
Cheers!
Check out the below snippet.
let pieceArray = [
{ name: 'rook', image: 'a0.png' },
{ name: 'knight', image: 'a1.png' },
{ name: 'bishop', image: 'a2.png' },
{ name: 'king', image: 'a3.png' },
{ name: 'queen', image: 'a4.png' },
{ name: 'bishop2', image: 'a5.png' },
{ name: 'knight2', image: 'a6.png' },
{ name: 'rook2', image: 'a8.png' },
];
function genBoard() {
var urls1 = ["image/a0.png", "image/a1.png", "image/a2.png", "image/a3.png", "image/a4.png", "image/a5.png", "image/a6.png", "image/a7.png"]
var urls2 = ["image/a8.png", "image/a9.png", "image/a10.png", "image/a11.png", "image/a12.png", "image/a13.png", "image/a14.png", "image/a15.png"]
var urls3 = ["image/a16.png", "image/a17.png", "image/a18.png", "image/a19.png", "image/a20.png", "image/a21.png", "image/a22.png", "image/a23.png"]
var urls4 = ["image/a24.png", "image/a25.png", "image/a26.png", "image/a27.png", "image/a28.png", "image/a29.png", "image/a30.png", "image/a31.png"]
//Do not include in code just to work the snippet
urls1 = urls1.map(i => 'https://github.com/kevin6767/Chessboard.js/raw/master/' + i);
urls2 = urls2.map(i => 'https://github.com/kevin6767/Chessboard.js/raw/master/' + i);
urls3 = urls3.map(i => 'https://github.com/kevin6767/Chessboard.js/raw/master/' + i);
urls4 = urls4.map(i => 'https://github.com/kevin6767/Chessboard.js/raw/master/' + i);
var p = 1;
var table = document.createElement("table");
table.setAttribute("id", "myTable");
for (var i = 0; i < 8; i++) {
var row = document.createElement('tr');
for (var j = 0; j < 8; j++) {
var cell = document.createElement('td');
if (i < 1) {
cell.insertAdjacentHTML('beforeend', '<img class="piece" draggable="true" id="' + urls1[j] + '" src="' + urls1[j] + '">');
}
if (i > 0 && i < 2) {
cell.insertAdjacentHTML('beforeend', '<img class="piece" draggable="true" id="' + urls2[j] + '" src="' + urls2[j] + '">');
}
if (i > 5 && i < 7) {
cell.insertAdjacentHTML('beforeend', '<img class="piece" draggable="true" id="' + urls3[j] + '" src="' + urls3[j] + '">');
}
if (i < 8 && i > 6) {
cell.insertAdjacentHTML('beforeend', '<img class="piece" draggable="true" id="' + urls4[j] + '" src="' + urls4[j] + '">');
}
if (i % 2 == j % 2) {
cell.className += "white" + p;
} else {
cell.className += "grey" + p;
}
row.appendChild(cell);
p++;
}
table.appendChild(row);
}
document.body.appendChild(table);
addEventListeners(document.querySelectorAll('img'), 'dragstart', function(e){
this.parentNode.classList.add('source');
dragData(e, { id: e.target.id, source: '.'+this.parentNode.classList.toString().split(' ')[0] });
});
addEventListeners(document.querySelectorAll('td'), 'dragend', function(e){
document.querySelectorAll('.source').forEach(function(node){node.classList.remove('source');})
});
addEventListeners(document.querySelectorAll('td'), 'drop', function(e){
e.preventDefault();
e.stopPropagation();
var data = dragData(e);
this.classList.remove('allowed', 'denied', 'active');
var incoming = dragData(e).id;
var source = dragData(e).source;
var target = '.' + this.classList.toString().split(' ')[0];
// TODO: some rule engine the incoming piece can go to this target or not
var allowed = !(document.querySelector(target).children.length); // doesn't have a piece already. need more rules if the piece move is needed to be here
if(allowed) {
this.appendChild(document.getElementById(data.id));
} else {
// nothing
}
});
addEventListeners(document.querySelectorAll('td'), 'dragover', function(e){
e.preventDefault();
});
addEventListeners(document.querySelectorAll('td'), 'dragenter', function(e){
e.preventDefault();
this.classList.add('active');
var incoming = dragData(e).id;
var source = dragData(e).source;
var target = '.' + this.classList.toString().split(' ')[0];
// TODO: some rule engine the incoming piece can go to this target or not
var allowed = !(document.querySelector(target).children.length); // doesn't have a piece already. need more rules if the piece move is needed to be here
if(!this.classList.contains('source')){
this.classList.toggle('allowed', allowed);
this.classList.toggle('denied', !allowed);
}
});
addEventListeners(document.querySelectorAll('td'), 'dragleave', function(e){
e.preventDefault();
if(!this.contains(e.relatedTarget)){
this.classList.remove('allowed', 'denied', 'active');
}
});
}
function addEventListeners(list, event, fn) {
for (var i = 0, len = list.length; i < len; i++) {
list[i].addEventListener(event, fn.bind(list[i]), false);
}
}
function dragData(event, data) {
if (data) {
event.dataTransfer.setData('text', JSON.stringify(data));
} else {
var response = event.dataTransfer.getData('text');
try {
response = JSON.parse(response);
} catch (e) {
response = {};
}
return response;
}
}
// polyfill closest api
if (window.Element && !Element.prototype.closest) {
Element.prototype.closest =
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i,
el = this;
do {
i = matches.length;
while (--i >= 0 && matches.item(i) !== el) {};
} while ((i < 0) && (el = el.parentElement));
return el;
};
}
genBoard();table {
empty-cells: show;
}
td {
width: 6em;
height: 6em;
line-height: 2em;
text-align: center;
border: 1px solid #000;
padding: 20px;
transition: all ease 200ms;
}
tbody tr:nth-child(odd) td:nth-child(even),
tbody tr:nth-child(even) td:nth-child(odd) {
color: #fff;
background-color: #00f;
}
tbody tr:nth-child(even) td:nth-child(even),
tbody tr:nth-child(odd) td:nth-child(odd) {
background-color: #999;
}
tbody {
counter-reset: rowNumber;
}
tr {
counter-increment: rowNumber;
counter-reset: cellNumber;
}
td {
counter-increment: cellNumber;
}
td::after {
content: counter(cellNumber, upper-alpha) counter(rowNumber, decimal);
}
td[class^="grey"] {
background-color: grey;
}
td[class^="white"] {
background-color: white;
}
td.allowed {
transform: scale(1.1);
}
td.denied {
background-color: red;
}<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>