var canvas; var ctx; window.onload = function() { canvas = document.getElementById( 'Canvas' ); ctx = canvas.getContext( '2d' ); Game(); } isPointInsideRect = function( px, py, rectx, recty, width, height ) { return px >= rectx && px <= rectx + width && py >= recty && py <= recty + height; } to1D = function( x, y, width ) { return x + y * width; } function Piece( x, y, type, img ) { this.x = x; this.y = y; this.type = type; this.img = img; this.hasMoved = false; this.width = 111; this.height = 116; this.draw = function( boardPositions ) { var pos = to1D( this.x, this.y, 8 ); ctx.drawImage( this.img, boardPositions[pos].x, boardPositions[pos].y ); } } function Game() { var scaleX, scaleY; var reciprocal_scaleX, reciprocal_scaleY; var boardImg; var pieceImgs = []; var pieceWidth, pieceHeight; var boardPositions = []; // Hard coded positions var pieces = []; var board = []; var selectedPiece = undefined; var moveSet = []; var turn = 0; onresize = function( event ) { canvas.width = window.innerWidth; canvas.height = window.innerHeight * 0.92; calculateScale(); }; onclick = function( event ) { var rect = canvas.getBoundingClientRect(); var px = ( event.clientX - rect.left ) / scaleX; var py = ( event.clientY - rect.top ) / scaleY; var madeMove = false; if( moveSet.length > 0 ) { for( var i = 0; i < moveSet.length; ++i ) { var x = boardPositions[ to1D( moveSet[i].x, moveSet[i].y, 8 ) ].x; var y = boardPositions[ to1D( moveSet[i].x, moveSet[i].y, 8 ) ].y; if( isPointInsideRect( px, py, x, y, pieceWidth, pieceHeight ) ) { var capturePiece = board[ to1D( moveSet[i].x, moveSet[i].y, 8 ) ]; if( capturePiece !== undefined ) // capturing { removePiece( capturePiece ); } selectedPiece.x = moveSet[i].x; selectedPiece.y = moveSet[i].y; selectedPiece.hasMoved = true; madeMove = true; turn = turn === 0 ? 1 : 0; break; } } selectedPiece = undefined; } if( !madeMove ) { var piece = undefined; for( var i = 0; i < pieces.length; ++i ) { var type = pieces[i].type; if( ( turn === 0 && type < 6 ) || ( turn === 1 && type >= 6 ) ) { var x = boardPositions[ to1D( pieces[i].x, pieces[i].y, 8 ) ].x; var y = boardPositions[ to1D( pieces[i].x, pieces[i].y, 8 ) ].y; if( isPointInsideRect( px, py, x, y, pieces[i].width, pieces[i].height ) ) { piece = pieces[i]; break; } } } selectedPiece = piece; } moveSet = findMoveSet(); }; function getHorizontalMoves( piece, maxRange = 8 ) { var moves = []; var x = piece.x; var y = piece.y; for( var i = x + 1; i < Math.min( x + maxRange + 1, 8 ); ++i ) { var r = generateMoves( piece, i, y ); moves = moves.concat( r.m ); if( r.b ) break; } for( var i = x - 1; i >= Math.max( x - maxRange, 0 ); --i ) { var r = generateMoves( piece, i, y ); moves = moves.concat( r.m ); if( r.b ) break; } return moves; } function getVerticalMoves( piece, maxRange = 8 ) { var moves = []; var x = piece.x; var y = piece.y; for( var i = y + 1; i < Math.min( y + maxRange + 1, 8 ); ++i ) { var r = generateMoves( piece, x, i ); moves = moves.concat( r.m ); if( r.b ) break; } for( var i = y - 1; i >= Math.max( y - maxRange, 0 ); --i ) { var r = generateMoves( piece, x, i ); moves = moves.concat( r.m ); if( r.b ) break; } return moves; } function getDiagonalMoves( piece, maxRange = 8 ) { var moves = []; var x = piece.x; var y = piece.y; for( var i = x - 1, j = y - 1; i >= Math.max( x - maxRange, 0 ) && j >= Math.max( y - maxRange, 0 ); --i, --j ) { var r = generateMoves( piece, i, j ); moves = moves.concat( r.m ); if( r.b ) break; } for( var i = x + 1, j = y - 1; i < Math.min( x + maxRange + 1, 8 ) && j >= Math.max( y - maxRange, 0 ); ++i, --j ) { var r = generateMoves( piece, i, j ); moves = moves.concat( r.m ); if( r.b ) break; } for( var i = x - 1, j = y + 1; i >= Math.max( x - maxRange, 0 ) && j < Math.min( y + maxRange + 1, 8 ); --i, ++j ) { var r = generateMoves( piece, i, j ); moves = moves.concat( r.m ); if( r.b ) break; } for( var i = x + 1, j = y + 1; i < Math.min( x + maxRange + 1, 8 ) && j < Math.min( y + maxRange + 1, 8 ); ++i, ++j ) { var r = generateMoves( piece, i, j ); moves = moves.concat( r.m ); if( r.b ) break; } return moves; } function getHorseMoves( piece ) { var moves = []; var jumps = [ -1, -2, 1, -2, -2, -1, 2, -1, -2, 1, -1, 2, 2, 1, 1, 2 ]; var x = piece.x; var y = piece.y; for( var i = 0; i < jumps.length; i += 2 ) { var nx = x + jumps[i]; var ny = y + jumps[i+1]; var r = generateMoves( piece, nx, ny ); moves = moves.concat( r.m ); } return moves; } function generateMoves( piece, x, y ) { var moves = []; var brk = false; if( x >= 0 && x < 8 && y >= 0 && y < 8 ) { var otherPiece = board[ to1D( x, y, 8 ) ]; var move = { x: x, y: y }; if( otherPiece === undefined ) { moves.push( move ); } else if( isEnemyPiece( piece, otherPiece ) ) { moves.push( move ); brk = true; } else brk = true; } return { m: moves, b: brk }; } function isEnemyPiece( piece1, piece2 ) { return ( piece1.type < 6 && piece2.type >= 6 ) || ( piece1.type >= 6 && piece2.type < 6 ); } function removePiece( piece ) { var index = pieces.indexOf( piece ); board[ to1D( piece.x, piece.y, 8 ) ] = undefined; if( index > -1 ) pieces.splice( index, 1 ); } function updateBoard() { board = []; for( var i = 0; i < 64; ++i ) board.push( undefined ); for( var i = 0; i < pieces.length; ++i ) { var x = pieces[i].x; var y = pieces[i].y; board[ to1D( x, y, 8 ) ] = pieces[i]; } } function findMoveSet() { var moves = []; if( selectedPiece !== undefined ) { var x = selectedPiece.x; var y = selectedPiece.y; var type = selectedPiece.type; if( type % 6 === 0 ) // pawn { if( type === 0 ) // white pawn { if( board[ to1D( x, y - 1, 8 ) ] === undefined ) { moves.push( { x: x, y: y - 1 } ); // normal movement if( selectedPiece.hasMoved === false && board[ to1D( x, y - 2, 8 ) ] === undefined ) moves.push( { x: x, y: y - 2 } ); // extra movement if it hasn't moved before } var piece = board[to1D( x - 1, y - 1, 8 )]; // capture top left if( piece !== undefined && piece.type >= 6 ) { moves.push( { x: x - 1, y: y - 1 } ); } piece = board[to1D( x + 1, y - 1, 8 )]; // capture top right if( piece !== undefined && piece.type >= 6 ) { moves.push( { x: x + 1, y: y - 1 } ); } } else // black pawn { if( board[ to1D( x, y + 1, 8 ) ] === undefined ) { moves.push( { x: x, y: y + 1 } ); // normal movement if( selectedPiece.hasMoved === false && board[ to1D( x, y + 2, 8 ) ] === undefined ) moves.push( { x: x, y: y + 2 } ); // extra movement if it hasn't moved before } var piece = board[to1D( x - 1, y + 1, 8 )]; // capture top left if( piece !== undefined && piece.type < 6 ) { moves.push( { x: x - 1, y: y + 1 } ); } piece = board[to1D( x + 1, y + 1, 8 )]; // capture top right if( piece !== undefined && piece.type < 6 ) { moves.push( { x: x + 1, y: y + 1 } ); } } } else if( type % 6 === 1 ) // rook { moves = moves.concat( getHorizontalMoves( selectedPiece ) ); moves = moves.concat( getVerticalMoves( selectedPiece ) ); } else if( type % 6 === 2 ) // horse { moves = moves.concat( getHorseMoves( selectedPiece ) ); } else if( type % 6 === 3 ) // bishop { moves = moves.concat( getDiagonalMoves( selectedPiece ) ); } else if( type % 6 === 4 ) // queen { moves = moves.concat( getHorizontalMoves( selectedPiece ) ); moves = moves.concat( getVerticalMoves( selectedPiece ) ); moves = moves.concat( getDiagonalMoves( selectedPiece ) ); } else if( type % 6 === 5 ) // king { moves = moves.concat( getHorizontalMoves( selectedPiece, 1 ) ); moves = moves.concat( getVerticalMoves( selectedPiece, 1 ) ); moves = moves.concat( getDiagonalMoves( selectedPiece, 1 ) ); } } return moves; } function update() { updateBoard(); } function draw() { ctx.clearRect( 0, 0, canvas.width, canvas.height ); calculateScale(); ctx.scale( scaleX, scaleY ); drawBoard(); drawPieces(); if( selectedPiece !== undefined ) { var pos = to1D( selectedPiece.x, selectedPiece.y, 8 ); var x = boardPositions[pos].x; var y = boardPositions[pos].y; ctx.beginPath(); ctx.lineWidth = "6"; ctx.strokeStyle = "#FFFFFF"; ctx.rect( x, y, selectedPiece.width, selectedPiece.height ); ctx.stroke(); for( var i = 0; i < moveSet.length; ++i ) { pos = to1D( moveSet[i].x, moveSet[i].y, 8 ); x = boardPositions[pos].x; y = boardPositions[pos].y; ctx.rect( x, y, selectedPiece.width, selectedPiece.height ); ctx.stroke(); } ctx.closePath(); } ctx.scale( reciprocal_scaleX, reciprocal_scaleY ); } function drawBoard() { ctx.drawImage( boardImg, 0, 0 ); } function drawPieces() { for( var i = 0; i < pieces.length; ++i ) pieces[i].draw( boardPositions ); } function loop() { update(); draw(); } initialize(); drawBoard(); setInterval( loop, 1000 / 20 ); function calculateScale() { scaleX = canvas.width / boardImg.width; scaleY = canvas.height / boardImg.height; reciprocal_scaleX = 1 / scaleX; reciprocal_scaleY = 1 / scaleY; } function initialize() { window.addEventListener( "onresize", onresize, false ); window.addEventListener( "onclick", onclick, false ); window.addEventListener( "ontouchstart", onclick, false ); loadImages(); canvas.height = window.innerHeight * 0.92; canvas.width = window.innerWidth; calculateScale(); boardPositions = [ { x: 80, y: 80 }, { x: 205, y: 80 }, { x: 335, y: 80 }, { x: 460, y: 80 }, { x: 590, y: 80 }, { x: 715, y: 80 }, { x: 840, y: 80 }, { x: 970, y: 80 }, { x: 80, y: 210 }, { x: 205, y: 210 }, { x: 335, y: 210 }, { x: 460, y: 210 }, { x: 590, y: 210 }, { x: 715, y: 210 }, { x: 840, y: 210 }, { x: 970, y: 210 }, { x: 80, y: 333 }, { x: 205, y: 333 }, { x: 335, y: 333 }, { x: 460, y: 333 }, { x: 590, y: 333 }, { x: 715, y: 333 }, { x: 840, y: 333 }, { x: 970, y: 333 }, { x: 80, y: 460 }, { x: 205, y: 460 }, { x: 335, y: 460 }, { x: 460, y: 460 }, { x: 590, y: 460 }, { x: 715, y: 460 }, { x: 840, y: 460 }, { x: 970, y: 460 }, { x: 80, y: 585 }, { x: 205, y: 585 }, { x: 335, y: 585 }, { x: 460, y: 585 }, { x: 590, y: 585 }, { x: 715, y: 585 }, { x: 840, y: 585 }, { x: 970, y: 585 }, { x: 80, y: 710 }, { x: 205, y: 710 }, { x: 335, y: 710 }, { x: 460, y: 710 }, { x: 590, y: 710 }, { x: 715, y: 710 }, { x: 840, y: 710 }, { x: 970, y: 710 }, { x: 80, y: 835 }, { x: 205, y: 835 }, { x: 335, y: 835 }, { x: 460, y: 835 }, { x: 590, y: 835 }, { x: 715, y: 835 }, { x: 840, y: 835 }, { x: 970, y: 835 }, { x: 80, y: 970 }, { x: 205, y: 970 }, { x: 335, y: 970 }, { x: 460, y: 970 }, { x: 590, y: 970 }, { x: 715, y: 970 }, { x: 840, y: 970 }, { x: 970, y: 970 } ]; pieces = [ new Piece( 0, 0, 7, pieceImgs[7] ), new Piece( 1, 0, 8, pieceImgs[8] ), new Piece( 2, 0, 9, pieceImgs[9] ), new Piece( 3, 0, 10, pieceImgs[10] ), new Piece( 4, 0, 11, pieceImgs[11] ), new Piece( 5, 0, 9, pieceImgs[9] ), new Piece( 6, 0, 8, pieceImgs[8] ), new Piece( 7, 0, 7, pieceImgs[7] ), new Piece( 0, 1, 6, pieceImgs[6] ), new Piece( 1, 1, 6, pieceImgs[6] ), new Piece( 2, 1, 6, pieceImgs[6] ), new Piece( 3, 1, 6, pieceImgs[6] ), new Piece( 4, 1, 6, pieceImgs[6] ), new Piece( 5, 1, 6, pieceImgs[6] ), new Piece( 6, 1, 6, pieceImgs[6] ), new Piece( 7, 1, 6, pieceImgs[6] ), new Piece( 0, 7, 1, pieceImgs[1] ), new Piece( 1, 7, 2, pieceImgs[2] ), new Piece( 2, 7, 3, pieceImgs[3] ), new Piece( 3, 7, 4, pieceImgs[4] ), new Piece( 4, 7, 5, pieceImgs[5] ), new Piece( 5, 7, 3, pieceImgs[3] ), new Piece( 6, 7, 2, pieceImgs[2] ), new Piece( 7, 7, 1, pieceImgs[1] ), new Piece( 0, 6, 0, pieceImgs[0] ), new Piece( 1, 6, 0, pieceImgs[0] ), new Piece( 2, 6, 0, pieceImgs[0] ), new Piece( 3, 6, 0, pieceImgs[0] ), new Piece( 4, 6, 0, pieceImgs[0] ), new Piece( 5, 6, 0, pieceImgs[0] ), new Piece( 6, 6, 0, pieceImgs[0] ), new Piece( 7, 6, 0, pieceImgs[0] ), ]; setTimeout( onresize, 300 ); } function loadImages() { boardImg = new Image(); boardImg.src = "https://image.ibb.co/dnS5GK/Board.png"; pieceImgs = []; for( var i = 0; i < 12; ++i ) pieceImgs.push( new Image() ); // W Pawn pieceImgs[0].src = "https://image.ibb.co/ccUViz/White_Pawn.png"; // W Rook pieceImgs[1].src = "https://image.ibb.co/cr9NVe/White_Rook.png"; // W Horse pieceImgs[2].src = "https://image.ibb.co/fMepAe/White_Horse.png"; // W Bishop pieceImgs[3].src = "https://image.ibb.co/gqHbqe/White_Bishop.png"; // W Queen pieceImgs[4].src = "https://image.ibb.co/nt1xwK/White_Queen.png"; // W King pieceImgs[5].src = "https://image.ibb.co/ioozAe/White_King.png"; // B Pawn pieceImgs[6].src = "https://image.ibb.co/mTwKAe/Black_Pawn.png"; // B Rook pieceImgs[7].src = "https://image.ibb.co/kHGaiz/Black_Rook.png"; // B Horse pieceImgs[8].src = "https://image.ibb.co/ckJSwK/Black_Horse.png"; // B Bishop pieceImgs[9].src = "https://image.ibb.co/fb8SwK/Black_Bishop.png" // B Queen pieceImgs[10].src = "https://image.ibb.co/gZjT3z/Black_Queen.png"; // B King pieceImgs[11].src = "https://image.ibb.co/dwSRqe/Black_King.png"; pieceWidth = 111; pieceHeight = 116; } }

Chess Engine Contest