Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- * General overview of all the methods and variables
- * var pieces[] - used to store pieces
- * var tiles[] - used to store pieces
- * var gameBoard - a 2d array used to store the information about the board
- *
- * function distance() - used to calculate distance between two cells
- * function Piece(element, position) - an object - stores all the information about the piece
- * INSIDE PIECE: this.makeKing() - make an element a king - simply assigns the picture to it.
- * INSIDE PIECE: this.move = function(tile) - removes the checker from the board cell;
- * updates the board, assigns a new cell for that piece;
- * toggles animation and changes the turn
- *
- */
- //Script is fired when the entire page loads, including its content
- /////////////////////////////////////////////////////////////////////
- /////////////////////////////////////////////////////////////////////////////////////////////////////////
- //Board object - controls logistics of game
- //////////////////////////////////////////////////////////////////////////////////////
- function gameState(socket){
- this.player1PieceNum = 12;
- this.player2PieceNum = 12;
- this.playerType = null;
- this.getPlayerType = function () {
- return this.playerType;
- };
- this.setPlayerType = function (p) {
- console.assert(typeof p == "string", "%s: Expecting a string, got a %s", arguments.callee.name, typeof p);
- this.playerType = p;
- };
- this.whoWon = function(){
- if (this.player1PieceNum==0){
- return 2;
- }
- if (this.player2PieceNum==0){
- return 1;
- }
- return null;
- }
- //Initial setup of Game Board
- var gameBoard = [
- [ 0, 1, 0, 1, 0, 1, 0, 1 ],
- [ 1, 0, 1, 0, 1, 0, 1, 0 ],
- [ 0, 1, 0, 1, 0, 1, 0, 1 ],
- [ 0, 0, 0, 0, 0, 0, 0, 0 ],
- [ 0, 0, 0, 0, 0, 0, 0, 0 ],
- [ 2, 0, 2, 0, 2, 0, 2, 0 ],
- [ 0, 2, 0, 2, 0, 2, 0, 2 ],
- [ 2, 0, 2, 0, 2, 0, 2, 0 ]
- ];
- //arrays to store the instances
- var pieces = [];
- var tiles = [];
- //Distance formula
- var dist = function (x1, y1, x2, y2) {
- return Math.sqrt(Math.pow((x1-x2),2)+Math.pow((y1-y2),2));
- }
- function Piece (element, position) {
- //linked DOM element
- this.element = element;
- //positions on gameBoard array in format row, column
- this.position = position;
- //which player's piece is it
- this.player = '';
- //figure out player by piece id
- if(this.element.attr("id") < 12)
- this.player = 1;
- else
- this.player = 2;
- //makes object a king
- this.king = false;
- this.makeKing = function () {
- this.element.css("backgroundImage", "url('king.png')");
- this.king = true;
- }
- //moves the piece
- this.move = function (tile) {
- this.element.removeClass('selected');
- if(!Board.isValidPlacetoMove(tile.position[0], tile.position[1])) return false;
- //make sure piece doesn't go backwards if it's not a king
- if(this.player == 1 && this.king == false) {
- if(tile.position[0] < this.position[0]) return false;
- } else if (this.player == 2 && this.king == false) {
- if(tile.position[0] > this.position[0]) return false;
- }
- //remove the mark from Board.board and put it in the new spot
- Board.board[this.position[0]][this.position[1]] = 0;
- Board.board[tile.position[0]][tile.position[1]] = this.player;
- this.position = [tile.position[0], tile.position[1]];
- //change the css using board's dictionary
- this.element.css('top', Board.dictionary[this.position[0]]);
- this.element.css('left', Board.dictionary[this.position[1]]);
- //if piece reaches the end of the row on opposite side crown it a king (can move all directions)
- if(!this.king && (this.position[0] == 0 || this.position[0] == 7 ))
- this.makeKing();
- Board.changePlayerTurn();
- return true;
- };
- //tests if piece can jump anywhere
- this.canJumpAny = function(){
- if(this.canOpponentJump([this.position[0]+2, this.position[1]+2]) ||
- this.canOpponentJump([this.position[0]+2, this.position[1]-2]) ||
- this.canOpponentJump([this.position[0]-2, this.position[1]+2]) ||
- this.canOpponentJump([this.position[0]-2, this.position[1]-2])) {
- return true;
- } return false;
- };
- //tests if an opponent jump can be made to a specific place
- this.canOpponentJump = function(newPosition) {
- //find what the displacement is
- var dx = newPosition[1] - this.position[1];
- var dy = newPosition[0] - this.position[0];
- //make sure object doesn't go backwards if not a king
- if(this.player == 1 && this.king == false) {
- if(newPosition[0] < this.position[0]) return false;
- } else if (this.player == 2 && this.king == false) {
- if(newPosition[0] > this.position[0]) return false;
- }
- //must be in bounds
- if(newPosition[0] > 7 || newPosition[1] > 7 || newPosition[0] < 0 || newPosition[1] < 0) return false;
- //middle tile where the piece to be conquered sits
- var tileToCheckx = this.position[1] + dx/2;
- var tileToChecky = this.position[0] + dy/2;
- //if there is a piece there and there is no piece in the space after that
- if(!Board.isValidPlacetoMove(tileToChecky, tileToCheckx) && Board.isValidPlacetoMove(newPosition[0], newPosition[1])) {
- //find which object instance is sitting there
- for(pieceIndex in pieces) {
- if(pieces[pieceIndex].position[0] == tileToChecky && pieces[pieceIndex].position[1] == tileToCheckx) {
- if(this.player != pieces[pieceIndex].player) {
- //return the piece sitting there
- return pieces[pieceIndex];
- }
- }
- }
- }
- return false;
- };
- this.opponentJump = function (tile) {
- var pieceToRemove = this.canOpponentJump(tile.position);
- //if there is a piece to be removed, remove it
- if(pieceToRemove) {
- pieces[pieceIndex].remove();
- return true;
- }
- return false;
- };
- this.remove = function () {
- //remove it and delete it from the gameboard
- this.element.css("display", "none");
- if(this.player == 1) {
- $('#player2').append("<div class='capturedPiece'></div>");
- this.player2PieceNum--;
- }
- if(this.player == 2){
- $('#player1').append("<div class='capturedPiece'></div>");
- this.player1PieceNum--;
- }
- Board.board[this.position[0]][this.position[1]] = 0;
- //reset position so it doesn't get picked up by the for loop in the canOpponentJump method
- this.position = [];
- }
- }
- function Tile (element, position) {
- //linked DOM element
- this.element = element;
- //position in gameboard
- this.position = position;
- //if tile is in range from the piece
- this.inRange = function(piece) {
- if(dist(this.position[0], this.position[1], piece.position[0], piece.position[1]) == Math.sqrt(2)) {
- //regular move
- return 'regular';
- } else if(dist(this.position[0], this.position[1], piece.position[0], piece.position[1]) == 2*Math.sqrt(2)) {
- //jump move
- return 'jump';
- }
- };
- }
- let Board = {
- board: gameBoard,
- playerTurn: 1,
- tilesElement: $('div.tiles'),
- //dictionary to convert position in Board.board to the viewport units
- dictionary: ["0vmin", "10vmin", "20vmin", "30vmin", "40vmin", "50vmin", "60vmin", "70vmin", "80vmin", "90vmin"],
- //initialize the 8x8 board
- initialize: function () {
- var countPieces = 0;
- var countTiles = 0;
- for (row in this.board) { //row is the index
- for (column in this.board[row]) { //column is the index
- //whole set of if statements control where the tiles and pieces should be placed on the board
- if(row%2 == 1) {
- if(column%2 == 0) {
- this.tilesElement.append("<div class='tile' id='tile"+countTiles+"' style='top:"+this.dictionary[row]+";left:"+this.dictionary[column]+";'></div>");
- tiles[countTiles] = new Tile($("#tile"+countTiles), [parseInt(row), parseInt(column)]);
- countTiles += 1;
- }
- } else {
- if(column%2 == 1) {
- this.tilesElement.append("<div class='tile' id='tile"+countTiles+"' style='top:"+this.dictionary[row]+";left:"+this.dictionary[column]+";'></div>");
- tiles[countTiles] = new Tile($("#tile"+countTiles), [parseInt(row), parseInt(column)]);
- countTiles += 1;
- }
- }
- if(this.board[row][column] == 1) {
- $('.player1pieces').append("<div class='piece' id='"+countPieces+"' style='top:"+this.dictionary[row]+";left:"+this.dictionary[column]+";'></div>");
- pieces[countPieces] = new Piece($("#"+countPieces), [parseInt(row), parseInt(column)]);
- countPieces += 1;
- } else if(this.board[row][column] == 2) {
- $('.player2pieces').append("<div class='piece' id='"+countPieces+"' style='top:"+this.dictionary[row]+";left:"+this.dictionary[column]+";'></div>");
- pieces[countPieces] = new Piece($("#"+countPieces), [parseInt(row), parseInt(column)]);
- countPieces += 1;
- }
- }
- }
- },
- //check if the location has an object
- isValidPlacetoMove: function (row, column) {
- console.log(row); console.log(column); console.log(this.board);
- if(this.board[row][column] == 0) {
- return true;
- } return false;
- },
- //change the active player - also changes div.turn's CSS
- changePlayerTurn: function () {
- if(this.playerTurn == 1) {
- this.playerTurn = 2;
- $('.turn').css("background", "linear-gradient(to right, transparent 50%, #BEEE62 50%)");
- return;
- }
- if(this.playerTurn == 2) {
- this.playerTurn = 1;
- $('.turn').css("background", "linear-gradient(to right, #BEEE62 50%, transparent 50%)");
- }
- },
- //reset the game
- clear: function () {
- location.reload();
- }
- }
- //Piece object - there are 24 instances of them in a checkers game
- if (this.playerType == "A" && this.gameBoard.playerTurn == 1 || this.playerType == "B" && this.gameBoard.playerTurn == 2){
- $('.piece').on("click", function () {
- var selected;
- var isPlayersTurn = ($(this).parent().attr("class").split(' ')[0] == "player"+Board.playerTurn+"pieces");
- if(isPlayersTurn) {
- if($(this).hasClass('selected')) selected = true;
- $('.piece').each(function(index) {$('.piece').eq(index).removeClass('selected')});
- if(!selected) {
- $(this).addClass('selected');
- }
- }
- });
- $('.tile').on("click", function () {
- //make sure a piece is selected
- if($('.selected').length != 0) {
- //find the tile object being clicked
- var tileID = $(this).attr("id").replace(/tile/, '');
- var tile = tiles[tileID];
- //find the piece being selected
- var piece = pieces[$('.selected').attr("id")];
- //check if the tile is in range from the object
- var inRange = tile.inRange(piece);
- if(inRange) {
- //if the move needed is jump, then move it but also check if another move can be made (double and triple jumps)
- if(inRange == 'jump') {
- if(piece.opponentJump(tile)) {
- piece.move(tile);
- if(piece.canJumpAny()) {
- Board.changePlayerTurn(); //change back to original since another turn can be made
- piece.element.addClass('selected');
- }
- }
- //if it's regular then move it if no jumping is available
- } else if(inRange == 'regular') {
- if(!piece.canJumpAny()) {
- piece.move(tile);
- if (getPlayerType() == "A"){
- var outgoingMsg = messages.O_MOVE_TO_A;
- outgoingMsg.pieceEl = piece.element;
- outgoingMsg.piecePos = piece.position;
- outgoingMsg.tileEl = tile.element;
- outgoingMsg.tilePos = tile.position;
- socket.send(JSON.stringify(outgoingMsg));
- }
- else {
- if (getPlayerType() == "B"){
- var outgoingMsg = messages.O_MOVE_TO_B;
- outgoingMsg.pieceEl = piece.element;
- outgoingMsg.piecePos = piece.position;
- outgoingMsg.tileEl = tile.element;
- outgoingMsg.tilePos = tile.position;
- socket.send(JSON.stringify(outgoingMsg));
- }
- }
- } else {
- alert("You must jump when possible!");
- }
- }
- }
- }
- });
- }
- }
- (function setup(){
- console.log("setting up..");
- var socket = new WebSocket("ws://localhost:3000");
- var gs = new gameState(socket);
- console.log(typeof gs.Board.initialize);
- // gs.Board.initialize();
- // initialize the board
- socket.onmessage = function (event) {
- let incomingMsg = JSON.parse(event.data);
- if (incomingMsg.type == Messages.T_PLAYER_TYPE){
- gs.setPlayerType( incomingMsg.data );
- }
- if (incomingMsg.type == Messages.T_MOVE_TO_A && gs.getPlayerType() == "B"){
- var tile = new Tile(incomingMsg.tileEl, incomingMsg.tilePos);
- var piece = new Piece(incomingMsg.pieceEl, incomingMsg.piecePos);
- piece.move(tile);
- }
- else {
- if (incomingMsg.type == Messages.T_MOVE_TO_B && gs.getPlayerType() == "A"){
- var tile = new Tile(incomingMsg.tileEl, incomingMsg.tilePos);
- var piece = new Piece(incomingMsg.pieceEl, incomingMsg.piecePos);
- piece.move(tile);
- }
- }
- }
- socket.onopen = function(){
- socket.send("{}");
- };
- socket.onerror = function(){
- };
- }());
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement