Added ability to move pieces

script.js

@@ -26,6 +26,8 @@ const COLOR_PIECE_BLACK = '#000';
 const COLOR_PIECE_WHITE = '#fff';
 
 const game = {
+    state: '',
+    stateData: {},
     pieces: [
         {position: 'A1', color: 'black', isKing: false},
         {position: 'A3', color: 'black', isKing: false},
@@ -60,7 +62,24 @@ gameStart();
 
 function gameStart() {
     init();
+    game.state = 'waiting';
     gameUpdate();
+
+    canvas.addEventListener('mousedown', function (e) {
+        var position = getPositionByCoordinates(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+        if (position) {
+            moveStart(position);
+        }
+    });
+    canvas.addEventListener('mousemove', function (e) {
+        moveGoing(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+    });
+    canvas.addEventListener('mouseup', function (e) {
+        var position = getPositionByCoordinates(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+        if (position) {
+            moveEnd(position);
+        }
+    });
 }
 
 function gameUpdate() {
@@ -68,6 +87,40 @@ function gameUpdate() {
     drawPieces();
 }
 
+function moveStart(position) {
+    if (game.state == 'moving') return;
+
+    game.state = 'moving';
+    game.stateData.piece = getPieceByPosition(position);
+    game.stateData.originalPosition = game.stateData.piece.position;
+}
+
+function moveGoing(x, y) {
+    if (game.state != 'moving') return;
+
+    game.stateData.piece.position = x + ',' + y;
+    gameUpdate();
+}
+
+function moveEnd(position) {
+    if (game.state != 'moving') return;
+
+    game.stateData.piece.position = position;
+    game.stateData = {};
+    game.state = 'waiting';
+    gameUpdate();
+}
+
+function getPieceByPosition(position) {
+    return game.pieces[getPieceIndexByPosition(position)];
+}
+
+function getPieceIndexByPosition(position) {
+    return game.pieces.map(function (piece) {
+        return piece.position;
+    }).indexOf(position);
+}
+
 // Graphics
 
 function init() {
@@ -113,12 +166,26 @@ function drawPieces() {
     game.pieces.forEach(function (piece) {
         drawPiece(piece.position, piece.color, piece.isKing);
     });
+    if (game.stateData.piece) {
+        drawPiece(game.stateData.piece.position, game.stateData.piece.color, game.stateData.piece.isKing);
+    }
 }
 
 function drawPiece(position, color, isKing) {
+    var x, y;
+
+    if (position.length == 2) {
         var col = position.toUpperCase().charCodeAt(0) - 65;
         var row = position.toUpperCase().charCodeAt(1) - 49;
 
+        x = BORDER+SQUARE/2 + col*SQUARE;
+        y = BORDER+SQUARE/2 + (7-row)*SQUARE;
+    } else {
+        [x, y] = position.split(',');
+        x = +x;
+        y = +y;
+    }
+
     switch (color) {
         case 'black':
             ctx.fillStyle = COLOR_PIECE_BLACK;
@@ -130,15 +197,15 @@ function drawPiece(position, color, isKing) {
     }
 
     ctx.beginPath();
-    ctx.arc(BORDER+SQUARE/2 + col*SQUARE, BORDER+SQUARE/2 + (7-row)*SQUARE, PIECE/2, 0, 2*Math.PI);
+    ctx.arc(x, y, PIECE/2, 0, 2*Math.PI);
     ctx.fill();
 
     ctx.beginPath();
-    ctx.arc(BORDER+SQUARE/2 + col*SQUARE, BORDER+SQUARE/2 + (7-row)*SQUARE, PIECE/2, 0, 2*Math.PI);
+    ctx.arc(x, y, PIECE/2, 0, 2*Math.PI);
     ctx.stroke();
 
     ctx.beginPath();
-    ctx.arc(BORDER+SQUARE/2 + col*SQUARE, BORDER+SQUARE/2 + (7-row)*SQUARE, PIECE/3, 0, 2*Math.PI);
+    ctx.arc(x, y, PIECE/3, 0, 2*Math.PI);
     ctx.stroke();
 
     if (isKing) {
@@ -151,7 +218,15 @@ function drawPiece(position, color, isKing) {
         }
 
         ctx.beginPath();
-        ctx.arc(BORDER+SQUARE/2 + col*SQUARE, BORDER+SQUARE/2 + (7-row)*SQUARE, PIECE/10, 0, 2*Math.PI);
+        ctx.arc(x, y, PIECE/10, 0, 2*Math.PI);
         ctx.fill();
     }
 }
+
+function getPositionByCoordinates(x, y) {
+    if (x < BORDER || y < BORDER || x > (SIZE-BORDER) || y > (SIZE-BORDER)) return null;
+    var col = Math.floor((x - BORDER) / SQUARE);
+    var row = Math.floor((y - BORDER) / SQUARE);
+
+    return String.fromCharCode(col + 65) + String.fromCharCode((7-row) + 49);
+}