test 3

by Ebony McCoy

HTML

<title>HTML5 Checkers</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.png" type="image/x-icon">
  <script src="script.js"></script>
  <div class="column">
    <div class="info">
      <h1>Checkers</h1>
      <hr>
      <p>Made by codethejason for <a href="http://fossasia.org">FOSSASIA</a> 2015.</p>
    </div>
    <div class="stats">
      <h2>Game Statistics</h2>
      <div class="wrapper">
      <div id="player1">
        <h3>Player 1 (Top)</h3>
      </div>
      <div id="player2">
        <h3>Player 2 (Bottom)</h3>
      </div>
      </div>
      <div class="clearfix"></div>
      <div class="turn"></div>
      <span id="winner"></span>
      <button id="cleargame">Reset Game</button>
    </div>
  </div>
  <div class="column">
    <div id="board">
      <div class="tiles"></div>
      <div class="pieces">
        <div class="player1pieces">
        </div>
        <div class="player2pieces">
        </div>
      </div>
  </div>

CSS

html, body {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #333333;
  font-family: "Lato", Calibri, sans-serif;
  font-size: 16px;
  background-color: #3A3042; }
  html h1, body h1 {
    margin-top: 10px; }
  html h2, body h2 {
    font-size: 1.3em; }
  html h3, body h3 {
    font-size: 1.1em; }
  html a, body a {
    text-decoration: none;
    color: #333333;
    font-weight: 700; }
    html a:hover, body a:hover {
      text-decoration: underline; }
  html hr, body hr {
    border: 0;
    height: 1px;
    background-color: #333;
    background-image: linear-gradient(to right, #333333, #ccc); }
  html .clearfix, body .clearfix {
    clear: both; }

div.column {
  position: relative;
  float: left;
  overflow: auto;
  height: 100%;
  min-height: 100%;
  width: 50%; }

@media screen and (max-width: 1000px) {
  div.column {
    width: 100% !important;
    overflow: hidden;
    height: auto; } }
div.info, div.stats {
  width: 70%;
  margin: 13vmin auto 0;
  box-sizing: border-box;
  padding: 20px 30px;
  background-color: #F1F1FF;
  color: #3A3042;
  border-radius: 3px;
  box-shadow: 1px 1px 3px #232621; }

div.stats {
  margin: 50px auto !important; }
  div.stats .wrapper {
    display: flex; }
  div.stats #player1 {
    text-align: center;
    display: inline-block;
    width: 50%;
    float: left;
    background-color: #B93848;
    box-sizing: border-box;
    padding: 0 15px 20px;
    border-top-left-radius: 3px;
    color: #232621; }
    div.stats #player1 .capturedPiece {
      width: 2.4vmin;
      height: 2.4vmin;
      background-color: #232621;
      background-size: 65%;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 6vmin;
      display: inline-block;
      box-sizing: border-box;
      transition: all 0.2s linear;
      margin: 5px; }
  div.stats #player2 {
    text-align: center;
    display: inline-block;
    width: 50%;
    float: left;
   ...

JavaScript

window.onload = function () {
  //The initial setup
  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));
  }
  //Piece object - there are 24 instances of them in a checkers game
  function Piece(element, position) {
    // when jump exist, regular move is not allowed
    // since there is no jump at round 1, all pieces are allowed to move initially
    this.allowedtomove = true;
    //linked DOM element
    this.element = element;
    //positions on gameBoard array in format row, column
    this.position = position;
    //which player's piece i 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('img/king" + this.player + ".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]] =...