Expand|Select|Wrap|Line Numbers
- @model CheckerBoard.Models.HomeModel
- <html>
- <head>
- <title>@Model.PageTitle</title>
- <link href="~/Styles/Home.css" rel="stylesheet" />
- </head>
- <body>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
- <script src="~/Scripts/Home.js"></script>
- <div class="home">
- <div class="board">
- <div class="row">
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- </div>
- <div class="row">
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- <div class="cell piece red"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- <div class="cell"></div>
- </div>
- <div class="row">
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- </div>
- <div class="row">
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- <div class="cell piece black"></div>
- </div>
- </div>
- </div>
- </body>
- </html>
Expand|Select|Wrap|Line Numbers
- .home > .board
- {
- display: table;
- border: 1px solid black;
- }
- .home > .board > .row
- {
- display: table;
- }
- .home > .board > .row > .cell
- {
- width: 80px;
- height: 80px;
- border: 1px solid black;
- display: inline-block;
- }
- .piece
- {
- background-size: 75px 75px;
- background-repeat: no-repeat;
- background-position: center;
- background-origin: content-box;
- }
- .red
- {
- background-image: URL('../images/red.png');
- }
- .black
- {
- background-image: URL('../images/black.png');
- }
Expand|Select|Wrap|Line Numbers
- $(document).ready(function ()
- {
- var cells = $(".cell");
- var colorCount = 0;
- for (var i = 0; i < cells.length; i++)
- {
- var cell = $(cells[i]);
- var isDark = colorCount % 2 == 0;
- var isNextRow = (i + 1) % 8 == 0;
- colorCount += isNextRow ? 2 : 1;
- cell.css("background-color", isDark ? "navy" : "white");
- }
- $(".cell.piece.red").on({
- click: function () {
- $(this).css("background-color", "yellow"); }
- });
- $(".cell.piece.black").on({
- click: function () {
- $(this).css("background-color", "yellow"); }
- });
- $(".cell.piece.red").on({
- click: function () {
- $(this).appendTo(".row.cell"); }
- });
- });
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.