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

When I click on first highlighted red checker piece how can I get that piece to move

P: 74
Here is the HTML file

Expand|Select|Wrap|Line Numbers
  1. @model CheckerBoard.Models.HomeModel
  2.  
  3. <html>
  4.  
  5.     <head>
  6.         <title>@Model.PageTitle</title>
  7.         <link href="~/Styles/Home.css" rel="stylesheet" />
  8.     </head>
  9.  
  10.     <body>
  11.  
  12.             <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  13.             <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  14.             <script src="~/Scripts/Home.js"></script>
  15.  
  16.             <div class="home">
  17.  
  18.                 <div class="board">
  19.                     <div class="row">
  20.                         <div class="cell piece red"></div>
  21.                         <div class="cell piece red"></div>
  22.                         <div class="cell piece red"></div>
  23.                         <div class="cell piece red"></div>
  24.                         <div class="cell piece red"></div>
  25.                         <div class="cell piece red"></div>
  26.                         <div class="cell piece red"></div>
  27.                         <div class="cell piece red"></div>
  28.                     </div>
  29.                     <div class="row">
  30.                         <div class="cell piece red"></div>
  31.                         <div class="cell piece red"></div>
  32.                         <div class="cell piece red"></div>
  33.                         <div class="cell piece red"></div>
  34.                         <div class="cell piece red"></div>
  35.                         <div class="cell piece red"></div>
  36.                         <div class="cell piece red"></div>
  37.                         <div class="cell piece red"></div>
  38.                     </div>
  39.                     <div class="row">
  40.                         <div class="cell"></div>
  41.                         <div class="cell"></div>
  42.                         <div class="cell"></div>
  43.                         <div class="cell"></div>
  44.                         <div class="cell"></div>
  45.                         <div class="cell"></div>
  46.                         <div class="cell"></div>
  47.                         <div class="cell"></div>
  48.                     </div>
  49.                     <div class="row">
  50.                         <div class="cell"></div>
  51.                         <div class="cell"></div>
  52.                         <div class="cell"></div>
  53.                         <div class="cell"></div>
  54.                         <div class="cell"></div>
  55.                         <div class="cell"></div>
  56.                         <div class="cell"></div>
  57.                         <div class="cell"></div>
  58.                     </div>
  59.                     <div class="row">
  60.                         <div class="cell"></div>
  61.                         <div class="cell"></div>
  62.                         <div class="cell"></div>
  63.                         <div class="cell"></div>
  64.                         <div class="cell"></div>
  65.                         <div class="cell"></div>
  66.                         <div class="cell"></div>
  67.                         <div class="cell"></div>
  68.                     </div>
  69.                     <div class="row">
  70.                         <div class="cell"></div>
  71.                         <div class="cell"></div>
  72.                         <div class="cell"></div>
  73.                         <div class="cell"></div>
  74.                         <div class="cell"></div>
  75.                         <div class="cell"></div>
  76.                         <div class="cell"></div>
  77.                         <div class="cell"></div>
  78.                     </div>
  79.                     <div class="row">
  80.                         <div class="cell piece black"></div>
  81.                         <div class="cell piece black"></div>
  82.                         <div class="cell piece black"></div>
  83.                         <div class="cell piece black"></div>
  84.                         <div class="cell piece black"></div>
  85.                         <div class="cell piece black"></div>
  86.                         <div class="cell piece black"></div>
  87.                         <div class="cell piece black"></div>
  88.                     </div>
  89.                     <div class="row">
  90.                         <div class="cell piece black"></div>
  91.                         <div class="cell piece black"></div>
  92.                         <div class="cell piece black"></div>
  93.                         <div class="cell piece black"></div>
  94.                         <div class="cell piece black"></div>
  95.                         <div class="cell piece black"></div>
  96.                         <div class="cell piece black"></div>
  97.                         <div class="cell piece black"></div>
  98.                     </div>
  99.                 </div>
  100.  
  101.             </div>
  102.  
  103.     </body>
  104.  
  105. </html>
Here is the CSS file

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.     $(".cell.piece.red").on({
  23.         click: function () {
  24.             $(this).appendTo(".row.cell"); }
  25.     }); 
  26.  
  27.  
  28. });

Hey Everybody. I have an HTML file, CSS file, and a JavaScript file. I have been trying to figure out how when I click on the first red checker piece that becomes highlighted how I am going to move that to an unoccupied cell. So to be clear when I click on the highlighted first red checker it should move to the next closet unoccupied cell. Can someone help? Here is what I have so far with JavaScript file and other files.
Feb 24 '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.