{"id":1100,"date":"2013-07-22T11:53:40","date_gmt":"2013-07-22T11:53:40","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=1100"},"modified":"2013-07-22T11:53:40","modified_gmt":"2013-07-22T11:53:40","slug":"3d-board-game-in-a-browser-using-webgl-and-three-js-part-3","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/web-development\/3d-board-game-in-a-browser-using-webgl-and-three-js-part-3\/","title":{"rendered":"3D board game in a browser using WebGL and Three.js, part 3"},"content":{"rendered":"

Continuing from part 2<\/a> this final article will show you how to make the pieces move by drag and drop and adding some game logic.<\/p>\n

\"WebGL<\/a><\/p>\n

Note:<\/strong> Unless specified otherwise, the file you need to edit will be BoardController.js<\/em>.<\/p>\n

Restrict camera rotation<\/h2>\n

The first thing we need to do is to stop the camera from moving if the left mouse button is pressed on the board area. We’ll have to create a few functions to accomplish that. Let’ start by creating an initListeners<\/em> function in which we’ll listen for mouse events:<\/p>\n

\r\nfunction initObjects(callback) { ... }\r\n\r\nfunction initListeners() {\r\n    var domElement = renderer.domElement;\r\n\r\n    domElement.addEventListener('mousedown', onMouseDown, false);\r\n    domElement.addEventListener('mouseup', onMouseUp, false);\r\n}\r\n\r\n<\/pre>\n
Call the new function from drawBoard<\/em>, after initObjects<\/em>. After\u00a0onAnimationFrame<\/em> function definition add the mouse event handlers:<\/p>\n
\r\n\r\nfunction onMouseDown(event) {\r\n    var mouse3D = getMouse3D(event);\r\n\r\n    if (isMouseOnBoard(mouse3D)) {\r\n        cameraController.userRotate = false;\r\n    }\r\n}\r\n\r\nfunction onMouseUp(event) {\r\n    cameraController.userRotate = true;\r\n}\r\n\r\n<\/pre>\n
On line 2 the mouse 2D coordinates are converted to a 3D position. On line 4 we check if the mouse was pressed on the board and if true, the camera rotation is disabled on line 5. On mouse up the camera rotation will be re-enabled. To calculate the 3D mouse position we’ll need a THREE.Projector<\/a> instance, so let’s create one in initEngine<\/em> function:<\/p>\n
\r\n...\r\nvar renderer;\r\nvar projector;\r\n...\r\n\r\nfunction initEngine() {\r\n    ...\r\n    renderer.setSize(viewWidth, viewHeight);\r\n\r\n    projector = new THREE.Projector();\r\n    ...\r\n}\r\n<\/pre>\n
Now we’re ready to define our getMouse3D<\/strong> function after boardToWorld<\/em>:<\/p>\n
\r\nfunction getMouse3D(mouseEvent) {\r\n    var x, y;\r\n    \/\/\r\n    if (mouseEvent.offsetX !== undefined) {\r\n        x = mouseEvent.offsetX;\r\n        y = mouseEvent.offsetY;\r\n    } else {\r\n        x = mouseEvent.layerX;\r\n        y = mouseEvent.layerY;\r\n    }\r\n\r\n    var pos = new THREE.Vector3(0, 0, 0);\r\n    var pMouse = new THREE.Vector3(\r\n        (x \/ renderer.domElement.width) * 2 - 1,\r\n       -(y \/ renderer.domElement.height) * 2 + 1,\r\n       1\r\n    );\r\n    \/\/\r\n    projector.unprojectVector(pMouse, camera);\r\n\r\n    var cam = camera.position;\r\n    var m = pMouse.y \/ ( pMouse.y - cam.y );\r\n\r\n    pos.x = pMouse.x + ( cam.x - pMouse.x ) * m;\r\n    pos.z = pMouse.z + ( cam.z - pMouse.z ) * m;\r\n\r\n    return pos;\r\n}\r\n<\/pre>\n
What I can say about the getMouse3D<\/em> function is that the value for Y axis will always be 0 since we just need to know where the mouse was clicked in the XZ plane space. You can just take the algorithm that translates 2D position to a 3D one as it is, it’s not my creation. The isMouseOnBoard<\/strong> function is defined after getMouse3D<\/em> like this:<\/p>\n
\r\nfunction isMouseOnBoard(pos) {\r\n    if (pos.x >= 0 && pos.x <= squareSize * 8 &&\r\n        pos.z >= 0 && pos.z <= squareSize * 8) {\r\n        return true;\r\n    } else {\r\n        return false;\r\n    }\r\n}\r\n<\/pre>\n
We just check if the mouse event happened inside the board’s squares area. If you test in the browser now you’ll see that you can only manipulate the camera by dragging outside the board (or on its margins).<\/p>\n
Dragging the pieces<\/h2>\n
To drag the pieces around we need to check if the mouse was pressed on a piece in the mouse down event handler. If the mouse was on a piece (actually on a piece square) we need to select it and to start listening for mouse move event. Let’s modify the onMouseDown<\/em> function:<\/p>\n
\r\n...\r\nif (isMouseOnBoard(mouse3D)) {\r\n    if (isPieceOnMousePosition(mouse3D)) {\r\n        selectPiece(mouse3D);\r\n        renderer.domElement.addEventListener('mousemove', onMouseMove, false);\r\n    }\r\n\r\n    cameraController.userRotate = false;\r\n}\r\n...\r\n<\/pre>\n
Add the isPieceOnMousePosition<\/strong> function after isMouseOnBoard<\/em>:<\/p>\n
\r\nfunction isPieceOnMousePosition(pos) {\r\n    var boardPos = worldToBoard(pos);\r\n\r\n    if (boardPos && board[ boardPos[0] ][ boardPos[1] ] !== 0) {\r\n        return true;\r\n    }\r\n\r\n    return false;\r\n}\r\n<\/pre>\n
First the 3D position must be converted to the internal board position on line 2. On the 4th line we check if there’s an actual piece in the position we found. Define the worldToBoard<\/strong> function after boardToWorld<\/em> like this:<\/p>\n
\r\nfunction worldToBoard(pos) {\r\n    var i = 8 - Math.ceil((squareSize * 8 - pos.z) \/ squareSize);\r\n    var j = Math.ceil(pos.x \/ squareSize) - 1;\r\n\r\n    if (i > 7 || i < 0 || j > 7 || j < 0 || isNaN(i) || isNaN(j)) {\r\n        return false;\r\n    }\r\n\r\n    return [i, j];\r\n}\r\n<\/pre>\n
Now we need to define the selectPiece<\/strong> function after isPieceOnMousePosition<\/em>. A new property also needs to be declared:<\/p>\n
\r\n...\r\nvar board = [...];\r\n\r\nvar selectedPiece = null;\r\n...\r\nfunction isPieceOnMousePosition(pos) {...}\r\n\r\nfunction selectPiece(pos) {\r\n    var boardPos = worldToBoard(pos);\r\n\r\n    \/\/ check for piece presence\r\n    if (board[ boardPos[0] ][ boardPos[1] ] === 0) {\r\n        selectedPiece = null;\r\n        return false;\r\n    }\r\n\r\n    selectedPiece = {};\r\n    selectedPiece.boardPos = boardPos;\r\n    selectedPiece.obj = board[ boardPos[0] ][ boardPos[1] ];\r\n    selectedPiece.origPos = selectedPiece.obj.position.clone();\r\n\r\n    return true;\r\n}\r\n<\/pre>\n
Besides storing the actual piece object, we need to store its position also to be able to make a move or to put it back where it was on illegal move.<\/p>\n
Define the onMouseMove<\/em> function like this:<\/p>\n
\r\n\r\nfunction onMouseMove(event) {\r\n    var mouse3D = getMouse3D(event);\r\n\r\n    \/\/ drag selected piece\r\n    if (selectedPiece) {\r\n        selectedPiece.obj.position.x = mouse3D.x;\r\n        selectedPiece.obj.position.z = mouse3D.z;\r\n\r\n        \/\/ lift piece\r\n        selectedPiece.obj.children[0].position.y = 0.75;\r\n    }\r\n}\r\n\r\n<\/pre>\n
If you try to move a piece now you’ll notice that it’s sticking to the mouse cursor even after mouse up release. Let’s fix that onMouseUp<\/em>:<\/p>\n
\r\nfunction onMouseUp(event) {\r\n    renderer.domElement.removeEventListener('mousemove', onMouseMove, false);\r\n\r\n    var mouse3D = getMouse3D(event);\r\n\r\n    if (isMouseOnBoard(mouse3D) && selectedPiece) {\r\n        var toBoardPos = worldToBoard(mouse3D);\r\n\r\n        if (toBoardPos[0] === selectedPiece.boardPos[0] && toBoardPos[1] === selectedPiece.boardPos[1]) {\r\n            deselectPiece();\r\n        } else {\r\n            instance.movePiece(selectedPiece.boardPos, toBoardPos);\r\n            selectedPiece = null;\r\n        }\r\n    } else {\r\n        deselectPiece();\r\n    }\r\n\r\n    cameraController.userRotate = true;\r\n}\r\n<\/pre>\n
If an illegal move is made the deselectPiece<\/strong> function will reset the piece position, otherwise the movePiece<\/strong> will place the piece to a new position. Here’s how deselectPiece<\/em> looks like:<\/p>\n
\r\nfunction selectPiece(pos) {...}\r\n\r\nfunction deselectPiece() {\r\n    if (!selectedPiece) {\r\n        return;\r\n    }\r\n\r\n    selectedPiece.obj.position = selectedPiece.origPos;\r\n    selectedPiece.obj.children[0].position.y = 0;\r\n\r\n    selectedPiece = null;\r\n}\r\n<\/pre>\n
The movePiece<\/em> method we want it to be public, so we’ll have to store the instance of the BoardController<\/em> to be accessible from inside the mouse event handlers:<\/p>\n
\r\n...\r\noptions = options || {};\r\n\r\nvar instance = this;\r\n...\r\n\r\nthis.addPiece = function (piece) {...};\r\n\r\nthis.movePiece = function (from, to) {\r\n    var piece = board[ from[0] ][ from[1] ];\r\n    var capturedPiece = board[ to[0] ][ to[1] ];\r\n    var toWorldPos = boardToWorld(to);\r\n\r\n    \/\/ update internal board\r\n    board[ from[0] ][ from[1] ] = 0;\r\n    delete board[ to[0] ][ to[1] ];\r\n    board[ to[0] ][ to[1] ] = piece;\r\n\r\n    \/\/ capture piece\r\n    if (capturedPiece !== 0) {\r\n        scene.remove(capturedPiece);\r\n    }\r\n\r\n    \/\/ move piece\r\n    piece.position.x = toWorldPos.x;\r\n    piece.position.z = toWorldPos.z;\r\n\r\n    piece.children[0].position.y = 0;\r\n};\r\n<\/pre>\n
While moving the piece, we also remove the piece from the destination position if necessary. Now you can try moving the pieces in the browser. You should be able to move them freely on every square you want and if you drop them outside the board area the pieces will be placed back to their initial position.<\/p>\n
Adding game logic<\/h2>\n
The checkers game logic will reside in Game.js<\/em>, so we’ll have to make the BoardController<\/em> notify the Game<\/em> when a piece needs to be\/or have dropped. We’ll make that happen by allowing some callbacks to be registered when the BoardController<\/em> is instantiated:<\/p>\n
\r\n..\r\nvar board = [...];\r\nvar selectedPiece = null;\r\n\r\nvar callbacks = options.callbacks || {};\r\n...\r\n<\/pre>\n
Now let’s make use of those callbacks in onMouseUp function:<\/p>\n
\r\nfunction onMouseUp(event) {\r\n    renderer.domElement.removeEventListener('mousemove', onMouseMove, false);\r\n\r\n    var mouse3D = getMouse3D(event);\r\n\r\n    if (isMouseOnBoard(mouse3D) && selectedPiece) {\r\n        var toBoardPos = worldToBoard(mouse3D);\r\n\r\n        if (toBoardPos[0] === selectedPiece.boardPos[0] && toBoardPos[1] === selectedPiece.boardPos[1]) {\r\n            deselectPiece();\r\n        } else {\r\n            if (callbacks.pieceCanDrop && callbacks.pieceCanDrop(selectedPiece.boardPos, toBoardPos, selectedPiece.obj.color)) {\r\n                instance.movePiece(selectedPiece.boardPos, toBoardPos);\r\n\r\n                if (callbacks.pieceDropped) {\r\n                    callbacks.pieceDropped(selectedPiece.boardPos, toBoardPos, selectedPiece.obj.color);\r\n                }\r\n\r\n                selectedPiece = null;\r\n            } else {\r\n                deselectPiece();\r\n            }\r\n        }\r\n    } else {\r\n        deselectPiece();\r\n    }\r\n\r\n    cameraController.userRotate = true;\r\n}\r\n<\/pre>\n
Instead of just moving the piece, on line 12 the pieceCanDrop<\/em> callback is called to check if the piece can be dropped on the requested square. If returns true the piece is moved and the\u00a0pieceDropped<\/em> callback is called to allow the Game<\/em> to remove the captured pieces.<\/p>\n
Now let’s add some game logic into Game.js<\/strong>. We’ll start by creating a variable to keep track of which side’s turn is and by modifying the init<\/em> function to pass some callbacks to BoardController<\/em> instance:<\/p>\n
\r\n...\r\nvar board = [...];\r\n\r\nvar colorTurn = CHECKERS.WHITE;\r\n\r\nfunction init() {\r\n    boardController = new CHECKERS.BoardController({\r\n        containerEl: options.containerEl,\r\n        assetsUrl: options.assetsUrl,\r\n        callbacks: {\r\n            pieceCanDrop: isMoveLegal,\r\n            pieceDropped: pieceMoved\r\n        }\r\n    });\r\n\r\n    boardController.drawBoard(onBoardReady);\r\n}\r\n<\/pre>\n
Here’s how the isMoveLegal<\/strong> function looks like:<\/p>\n
\r\nfunction onBoardReady() {...}\r\n\r\nfunction isMoveLegal(from, to, color) {\r\n    if (color !== colorTurn) {\r\n        return false;\r\n    }\r\n\r\n    var fromRow = from[0];\r\n    var fromCol = from[1];\r\n    var toRow = to[0];\r\n    var toCol = to[1];\r\n\r\n    if (board[toRow][toCol] !== 0) { \/\/ a piece can't be dropped on an existing piece\r\n        return false;\r\n    }\r\n\r\n    if (color === CHECKERS.BLACK) {\r\n        \/\/ checks for one square move in left or right direction\r\n        if (toRow === fromRow + 1 && (toCol === fromCol - 1 || toCol === fromCol + 1)) {\r\n            return true;\r\n        }\r\n\r\n        \/\/ checks for 2 squares move (jumping over a piece)\r\n        if (toRow === fromRow + 2) {\r\n            \/\/ left direction\r\n            if (toCol === fromCol - 2 && board[fromRow + 1][fromCol - 1] !== 0 && board[fromRow + 1][fromCol - 1].color != color) {\r\n                return true;\r\n            }\r\n\r\n            \/\/ right direction\r\n            if (toCol === fromCol + 2 && board[fromRow + 1][fromCol + 1] !== 0 && board[fromRow + 1][fromCol + 1].color != color) {\r\n                return true;\r\n            }\r\n        }\r\n    } else if (color === CHECKERS.WHITE) {\r\n        \/\/ checks for one square move in left or right direction\r\n        if (toRow === fromRow - 1 && (toCol === fromCol - 1 || toCol === fromCol + 1)) {\r\n            return true;\r\n        }\r\n\r\n        \/\/ checks for 2 squares move (jumping over a piece)\r\n        if (toRow === fromRow - 2) {\r\n            \/\/ left direction\r\n            if (toCol === fromCol - 2 && board[fromRow - 1][fromCol - 1] !== 0 && board[fromRow - 1][fromCol - 1].color != color) {\r\n                return true;\r\n            }\r\n\r\n            \/\/ right direction\r\n            if (toCol === fromCol + 2 && board[fromRow - 1][fromCol + 1] !== 0 && board[fromRow - 1][fromCol + 1].color != color) {\r\n                return true;\r\n            }\r\n        }\r\n    }\r\n\r\n    return false;\r\n}\r\n<\/pre>\n
The function restricts a piece movement only to diagonal jumping by 1 or 2 squares. In the case of a 2 squares jump there must be an enemy piece in the middle.<\/p>\n
Now here’s the pieceMoved<\/strong> function:<\/p>\n
\r\n\r\nfunction pieceMoved(from, to, color) {\r\n    var fromRow = from[0];\r\n    var fromCol = from[1];\r\n    var toRow = to[0];\r\n    var toCol = to[1];\r\n\r\n    board[toRow][toCol] = board[fromRow][fromCol];\r\n\r\n    board[fromRow][fromCol] = 0;\r\n\r\n    \/\/ capture jumped piece\r\n    if (toRow === fromRow - 2) { \/\/ left direction\r\n        if (toCol === fromCol - 2) {\r\n            boardController.removePiece(fromRow - 1, fromCol - 1);\r\n            board[fromRow - 1][fromCol - 1] = 0;\r\n        } else {\r\n            boardController.removePiece(fromRow - 1, fromCol + 1);\r\n            board[fromRow - 1][fromCol + 1] = 0;\r\n        }\r\n    } else if (toRow === fromRow + 2) { \/\/ right direction\r\n        if (toCol === fromCol + 2) {\r\n            boardController.removePiece(fromRow + 1, fromCol + 1);\r\n            board[fromRow + 1][fromCol + 1] = 0;\r\n        } else {\r\n            boardController.removePiece(fromRow + 1, fromCol - 1);\r\n            board[fromRow + 1][fromCol - 1] = 0;\r\n        }\r\n    }\r\n\r\n    \/\/ change turn\r\n    if (color === CHECKERS.WHITE) {\r\n        colorTurn = CHECKERS.BLACK;\r\n    } else {\r\n        colorTurn = CHECKERS.WHITE;\r\n    }\r\n}\r\n\r\n<\/pre>\n
This function removes a captured (jumped) piece and toggles the turn to move. In order to remove a captured piece the BoardController<\/em> needs one more method:<\/p>\n
\r\n\r\nthis.addPiece = function (piece) {...};\r\n\r\nthis.removePiece = function (row, col) {\r\n    if (board[row][col]) {\r\n        scene.remove(board[row][col]);\r\n    }\r\n\r\n    board[row][col] = 0;\r\n};\r\n\r\n<\/pre>\n
That\u2019s all folks!\u00a0If you want to experiment more you could add some improvements to the game, like complete game logic or making the captured pieces fade out using tween.js<\/a>.<\/p>\n
You can download the sample project from here<\/a>.<\/p>\n
If you have questions, suggestions or improvements don\u2019t hesitate to add a comment and let me know about them.<\/p>\n
\t
\n\t \t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t<\/form>\n\t\t\t
If you liked this post 
 you can buy me a beer<\/strong><\/p>\n\t\t<\/div>\n\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"
Continuing from part 2 this final article will show you how to make the pieces move by drag and drop and adding some game logic. Note: Unless specified otherwise, the file you need to edit will be BoardController.js. Restrict camera rotation The first thing we need to do is to stop the camera from moving …<\/p>\n
Read more<\/a><\/div>\n
\n        <\/div><\/div>","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,13],"tags":[122,121,120],"_links":{"self":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1100"}],"collection":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/comments?post=1100"}],"version-history":[{"count":9,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1100\/revisions"}],"predecessor-version":[{"id":1120,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/1100\/revisions\/1120"}],"wp:attachment":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/media?parent=1100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/categories?post=1100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/tags?post=1100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}