By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,335 Members | 2,718 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,335 IT Pros & Developers. It's quick & easy.

Is it possible to move the checkerboard pieces with the hasClass and the addClass?

P: 74
I have this red and black checkerboard pieces on a checkerboard, but how do I get them to move. For example, if I wanted to move the first checkerboard red piece to the seventeenth cell how would I do that? To clarify, what I want to be done is when I click on the first red highlighted checkerboard piece, I want that to move to next closet unoccupied cell, which in my case would be the seventeenth cell of the checkerboard. Please any examples with any elements on the checkerboard would be much appreciated in order for me to fully learn how to move the checkerboard pieces. I have my three files which are a JavaScript file, CSS file, and HTML file.

Expand|Select|Wrap|Line Numbers
  1. <div class="home">
  2.  
  3.                 <div class="board">
  4.                     <div class="row">
  5.                         <div class="cell piece red"></div>
  6.                         <div class="cell piece red"></div>
  7.                         <div class="cell piece red"></div>
  8.                         <div class="cell piece red"></div>
  9.                         <div class="cell piece red"></div>
  10.                         <div class="cell piece red"></div>
  11.                         <div class="cell piece red"></div>
  12.                         <div class="cell piece red"></div>
  13.                     </div>
  14.                     <div class="row">
  15.                         <div class="cell piece red"></div>
  16.                         <div class="cell piece red"></div>
  17.                         <div class="cell piece red"></div>
  18.                         <div class="cell piece red"></div>
  19.                         <div class="cell piece red"></div>
  20.                         <div class="cell piece red"></div>
  21.                         <div class="cell piece red"></div>
  22.                         <div class="cell piece red"></div>
  23.                     </div>
  24.                     <div class="row">
  25.                         <div class="cell"></div>
  26.                         <div class="cell"></div>
  27.                         <div class="cell"></div>
  28.                         <div class="cell"></div>
  29.                         <div class="cell"></div>
  30.                         <div class="cell"></div>
  31.                         <div class="cell"></div>
  32.                         <div class="cell"></div>
  33.                     </div>
  34.                     <div class="row">
  35.                         <div class="cell"></div>
  36.                         <div class="cell"></div>
  37.                         <div class="cell"></div>
  38.                         <div class="cell"></div>
  39.                         <div class="cell"></div>
  40.                         <div class="cell"></div>
  41.                         <div class="cell"></div>
  42.                         <div class="cell"></div>
  43.                     </div>
  44.                     <div class="row">
  45.                         <div class="cell"></div>
  46.                         <div class="cell"></div>
  47.                         <div class="cell"></div>
  48.                         <div class="cell"></div>
  49.                         <div class="cell"></div>
  50.                         <div class="cell"></div>
  51.                         <div class="cell"></div>
  52.                         <div class="cell"></div>
  53.                     </div>
  54.                     <div class="row">
  55.                         <div class="cell"></div>
  56.                         <div class="cell"></div>
  57.                         <div class="cell"></div>
  58.                         <div class="cell"></div>
  59.                         <div class="cell"></div>
  60.                         <div class="cell"></div>
  61.                         <div class="cell"></div>
  62.                         <div class="cell"></div>
  63.                     </div>
  64.                     <div class="row">
  65.                         <div class="cell piece black"></div>
  66.                         <div class="cell piece black"></div>
  67.                         <div class="cell piece black"></div>
  68.                         <div class="cell piece black"></div>
  69.                         <div class="cell piece black"></div>
  70.                         <div class="cell piece black"></div>
  71.                         <div class="cell piece black"></div>
  72.                         <div class="cell piece black"></div>
  73.                     </div>
  74.                     <div class="row">
  75.                         <div class="cell piece black"></div>
  76.                         <div class="cell piece black"></div>
  77.                         <div class="cell piece black"></div>
  78.                         <div class="cell piece black"></div>
  79.                         <div class="cell piece black"></div>
  80.                         <div class="cell piece black"></div>
  81.                         <div class="cell piece black"></div>
  82.                         <div class="cell piece black"></div>
  83.                     </div>
  84.                 </div>
  85.  
  86.             </div>
  87.  
  88.     </body>
  89.  
  90. </html>
Expand|Select|Wrap|Line Numbers
  1. .home > .board
  2. {
  3.     display: table;
  4.     border: 1px solid black;
  5. }
  6.  
  7. .home > .board > .row
  8. {
  9.     display: table;
  10. }
  11.  
  12. .home > .board > .row > .cell
  13. {
  14.     width: 80px;
  15.     height: 80px;
  16.     border: 1px solid black;
  17.     display: inline-block;
  18. }
  19.  
  20. .piece
  21. {
  22.     background-size: 75px 75px;
  23.     background-repeat: no-repeat;
  24.     background-position: center;
  25.     background-origin: content-box;
  26. }
  27.  
  28. .red
  29. {
  30.     background-image: URL('../images/red.png');
  31. }
  32.  
  33. .black
  34. {
  35.     background-image: URL('../images/black.png');
  36. }
Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function()
  2. {
  3.     var cells = $(".cell");
  4.     var colorCount = 0; 
  5.  
  6.     for (var i = 0; i < cells.length; i++)
  7.     {
  8.         var cell = $(cells[i]);
  9.         var isDark = colorCount % 2 == 0;
  10.         var isNextRow = (i + 1) % 8 == 0;
  11.         colorCount += isNextRow ? 2 : 1;
  12.         cell.css("background-color", isDark ? "navy" : "white"); 
  13.     }
  14.     $(".cell.piece.red").on({
  15.         click: function () {
  16.             $(this).css("background-color", "yellow"); }
  17.     });
  18.     $(".cell.piece.black").on({
  19.         click: function () {
  20.             $(this).css("background-color", "yellow");  }
  21.     });
  22.  
  23.  
  24. });
Feb 26 '17 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.