game

game.markdown

Tile game

A Pen by David Markowitz on CodePen.

License.

index.html

<div id="board">
  <div id="1" class="tile colored">1</div>
  <div id="2" class="tile colored">2</div>
  <div id="3" class="tile colored">3</div>
  <div id="4" class="tile colored">4</div>
  <div id="5" class="tile colored">5</div>
  
  <div id="6" class="tile colored">6</div>
  <div id="7" class="tile colored">7</div>
  <div id="8" class="tile colored">8</div>
  <div id="9" class="tile colored">9</div>
  <div id="10" class="tile colored">10</div>
  
  <div id="11" class="tile colored">11</div>
  <div id="12" class="tile colored">12</div>
  <div id="13" class="tile colored">13</div>
  <div id="14" class="tile colored">14</div>
  <div id="15" class="tile colored">15</div>
  
  <div id="16" class="tile colored">16</div>
  <div id="17" class="tile colored">17</div>
  <div id="18" class="tile colored">18</div>
  <div id="19" class="tile colored">19</div>
  <div id="20" class="tile colored">20</div>
  
  <div id="21" class="tile colored">21</div>
  <div id="22" class="tile colored">22</div>
  <div id="23" class="tile colored">23</div>
  <div id="24" class="tile colored">24</div>
  <div id="25" class="tile empty"></div>
</div>

script.js

NUMTILES = 25;

class Board {
  constructor() {
    this.tiles = {};
    this.clickedTileId = null;
    this.blankId = 25;
    
    this.addTiles();
    this.updateBorderTiles();
    this.initListeners();
  }
  
  addTiles() {
    for (let i=1; i < 26; i++) {
      let movingTile = $("#" + i);
      
      this.tiles[i] = {
        tileId : i,
        borderTileIds : {}
      }
      
      this.randomize(i, movingTile);
      
      this.tiles[i].currentDomPos = $(".tile").index(movingTile);
    }
    
    for (let tile in this.tiles) {
      let domTile = $("#" + this.tiles[tile].tileId);
      this.tiles[tile].currentDomPos = $(".tile").index(domTile);
    }
  }

  randomize(i, movingTile) {
    let rand = i;
    while (rand === i) {
      rand = Math.ceil(Math.random() * NUMTILES);
    }
    $("#" + rand).after(movingTile);
  }
  
  initListeners() {
    let tileIds = this.tiles[this.blankId].borderTileIds;
    for (let id in tileIds) {
      if (id !== null) {
        $("#" + tileIds[id]).click(evt => {
          this.clickedTileId = +evt.target.id;
          this.moveTile();
        });
      }
    };    
  }
  
  removeListeners() {
    $(".tile").off("click");
  }
  
  moveTile() {
    let clickedTile = $("#" + this.clickedTileId);
    let blankTile = $("#" + this.blankId);
    let clickedTileDomPos = this.tiles[this.clickedTileId].currentDomPos;
    let blankBorders = this.tiles[this.blankId].borderTileIds;
    let domTiles = $(".tile");
    let newBlankPos = null;
        
    if (this.clickedTileId === blankBorders.left || this.clickedTileId === blankBorders.bottom) {
      $("#" + this.blankId).after(clickedTile);
      if (this.clickedTileId === blankBorders.bottom) {
        newBlankPos = +$(domTiles[clickedTileDomPos - 1]).attr("id");
        $("#" + newBlankPos).after(blankTile);
      }
    } else if (this.clickedTileId === blankBorders.right || this.clickedTileId === blankBorders.top) {
      $("#" + this.blankId).before(clickedTile);
      if (this.clickedTileId === blankBorders.top) {
        newBlankPos = +$(domTiles[clickedTileDomPos + 1]).attr("id");
        $("#" + newBlankPos).before(blankTile);
      }
    }
    this.tiles[this.clickedTileId].currentDomPos = this.tiles[this.blankId].currentDomPos;
    this.tiles[this.blankId].currentDomPos = clickedTileDomPos;

    if (this.checkForWin()) {
      this.flash();
    }
    this.updateBorderTiles();
    this.removeListeners();
    this.initListeners();
  }
  
  updateBorderTiles() {
    let domTiles = $(".tile");
    for (let i=1; i < 26; i++) {
      let domPos = this.tiles[i].currentDomPos;
      this.tiles[i].borderTileIds = {
        top: domPos > 4 ? +$(domTiles[domPos - 5]).attr("id") : null,
        right: domPos % 5 === 4 ? null : +$(domTiles[domPos + 1]).attr("id"),
        bottom: domPos < 20 ? +$(domTiles[domPos + 5]).attr("id") : null,
        left: domPos % 5 === 0 ? null : +$(domTiles[domPos - 1]).attr("id")
      };
    };
  }
  
  checkForWin() {
    for (let tile in this.tiles) {
      if (this.tiles[tile].tileId !== this.tiles[tile].currentDomPos + 1) {
        return false;
      }
    }
    return true;
  }
  
  flash() {
    for (let i=1; i<4; i++) {
      setTimeout(()=> {
        $(".tile").addClass("win");
        setTimeout(()=> {
          $(".tile").removeClass("win");
        }, 200);
      }, 300*i);
    }
  }
}

let board = new Board();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

#board {
  max-width: 500px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, auto);
}

.tile {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 1px;
  text-align: center;
  line-height: 100px;
  font-size: 40px;
}

.colored {
  background-color: lightblue;  
}

.empty {
  background-color: transparent;
}

.win {
  background-color: yellow;
}