javascript - how could I map the divs to a two dimensional array tictactoe game -
i have tic-tac-toe game implement using 2 dimensional array. right i'm using simple array , works fine. think easier implement using 2 dimensional array, take advantage of loops when checking winners , other things.
my problem can find way map div clicked index in 2 dim array. example if user clicks on 3rd div of second row on ui, how map 2darray[1][2]
(the second subarray index 2)? thanks.
hope explained well. interested in looking @ code here's codepen of tic-tac-toe: https://codepen.io/zentech/pen/xlrzgr
var xplayer = "x"; var oplayer = "o"; var turn = "x"; var board = new array(9); var message = document.getelementbyid("message"); $(document).ready(function() { $(".square").click(function() { var sqrid = $(this).attr("id"); playermove(sqrid); if (checkwinners()) { message.innerhtml = "message: " + turn + " wins!"; return; } if (checkboard()) { message.innerthml = "message: " + turn + " move"; } else { message.innerhtml = "message: it's draw!"; } turn = (turn == 'x') ? 'o' : 'x'; }); $(".resetgame").click(function() { $(".square").text(""); $("#message").text("message: "); turn = "x"; board = new array(9); }); }); //getting user move , output board function playermove(sqrid) { console.log("player move: " + $('#' + sqrid).attr("id") + " " + turn); if ($('#' + sqrid).text() == "") { $('#' + sqrid).text(turn); board[sqrid] = turn; } else { console.log("error!"); message.innerhtml = "message: wrong move!..." return; } } //checking winning combinations function checkwinners() { console.log(board[1]); //checking rows if (board[0] != undefined && board[0] == board[1] && board[1] == board[2]) { return true; } else if (board[3] != undefined && board[3] == board[4] && board[4] == board[5]) { return true; } else if (board[6] != undefined && board[6] == board[7] && board[7] == board[8]) { return true; } //checking columns else if (board[0] != undefined && board[0] == board[3] && board[6] == board[8]) { return true; } else if (board[1] != undefined && board[1] == board[4] && board[4] == board[7]) { return true; } else if (board[2] != undefined && board[2] == board[5] && board[5] == board[8]) { return true; } //checking across else if (board[0] != undefined && board[0] == board[4] && board[4] == board[8]) { return true; } else if (board[2] != undefined && board[2] == board[4] && board[4] == board[6]) { return true; } else { return false; } } /* checking if there's more room play, if not it's draw'*/ function checkboard() { (var = 0; < board.length; i++) { // console.log(board[i]); if (board[i] == undefined) { return true; } } return false; }
body { background-color: #999; font-family: serif, verdana; } h1 { font-size: 50px; } h2 { margin-bottom: 30px; } .container { margin: 0 auto; text-align: center; } .row>div { margin: 2px; border: solid 1px black; display: inline-block; font-size: 35px; width: 50px; height: 50px; text-align: center; padding: 0px; vertical-align: top; line-height: 50px; } #message { /* display: inline-block; */ text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="header"> <h1>tictactoe</h1> <h2>you're playing against computer!</h2> </div> <div class="tictactoe"> <div class="row"> <div id="0" class="square"></div> <div id="1" class="square"></div> <div id="2" class="square"></div> </div> <div class="row"> <div id="3" class="square"></div> <div id="4" class="square"></div> <div id="5" class="square"></div> </div> <div class="row"> <div id="6" class="square"></div> <div id="7" class="square"></div> <div id="8" class="square"></div> </div> </div> <div class="controls"> <h2 id="message">message:</h2> <a href="#" class="resetgame"> <h3>reset game</h3 </a> </div> </div>
to go 1d index 2d coordinate, can use these "formula's":
row = math.floor(index / row_size)
col = index % row_size
(using remainder operator (%
))
to go row , column 1d index, can use:
index = row * row_size + col
/* indexes go left right (row), rows go top bottom [ 0, 1, 2 3, 4, 5 6, 7, 8 ] */ const row_size = 3; const rowforindex = function(index) { return math.floor(index / row_size); } const columnforindex = function(index) { return index % row_size; } console.log([0,1,2,3,4,5,6,7,8].map( => `index: ${i}, row: ${rowforindex(i)}, col: ${columnforindex(i)}`) );
Comments
Post a Comment