jquery animate - Converting floats to absolute positioning -
jquery animate - Converting floats to absolute positioning -
i have monopoly board , i'd move unicode piece around board smoothly, jquery.animate method.
q: have go canvas have smooth player moving experience, or can utilize sort of absolute positioning instead? right i'm using floats float squares board.
class="snippet-code-js lang-js prettyprint-override">window.dom = {} // document object model var column = 1 var row = 2 function roll() { return math.floor(math.random() * 6) + 1 } $('#parta .bottomheader:eq(0)').append('<img src="//lenoir-rhyne.com/emoji/hotel.png" width="25">') $('#parta .bottomheader:eq(1)').append('<img src="//lenoir-rhyne.com/emoji/house.png" width="25">') ;(function() { var variables = {} variables.die1 = roll() variables.die2 = roll() variables.die1 = 1000 /* while testing */ variables.counter = 0 placeposition() function moveme1() { $('#player1').remove() if (row == 11 && column != 1) { column = column - 1 } else if (column == 1 && row != 1) { row = row - 1 } else if (row == 1 && column != 11) { column = column + 1 } else if (column == 11) { row = row + 1 } placeposition() } function placeposition() { if (row == 1) { $('#parta .property:eq(' + (column-1) + ')').append('<div id="player1">♛</div>'); } else if (column == 1 && row > 1) { $('#partb .property:eq(' + (row-2) + ')').append('<div id="player1">♛</div>'); } else if (column == 11 && row > 1 && row < 11) { $('#partc .property:eq(' + (row-2) + ')').append('<div id="player1">♛</div>'); } else if (row == 11 && column > 1) { $('#partd .property:eq(' + (column-1) + ')').append('<div id="player1">♛</div>'); } variables.counter += 1 if (variables.counter < variables.die1 + variables.die2) { settimeout(moveme1,1000) } log(row + ',' + column) } })() class="snippet-code-css lang-css prettyprint-override">#parta .square { float:left; } #parta .property { height:44px; } #partb, #partc { float:left; width:9%; } #partb .square, #partc .square { width:100%; } #partd { clear:left; } #partd .square { float:left; } #center { width:81%; float:left; } #savearea { float:left; width:30%; margin-left:1%; margin-top:1em; } .form-group { margin-bottom:0px; } .red { background-color:#ed1b24 /* alter ed1b24 */ } .green { background-color:#1fb25a /* alter 1fb25a */ } .blue { background-color:#0072bb /* alter 0072bb */ } .purple { background-color:#130c5b } .lightblue { background-color:#aae0fa } .pink { background-color:#d93a96 } .orange { background-color:#f7941d } .yellow { background-color:#fef200 } #parta > div, #partb > div, #partc > div, #partd > div { width:9%; outline:1px solid black; height:100px; font-size:16px; background-repeat:no-repeat; background-position:bottom; } .bottomheader { margin-top:35px; outline-top:2px solid black; } .property:hover { cursor:pointer; background-color:#3e3433; color:white; } .bottomheader:hover, .topheader:hover, .leftheader:hover, .rightheader:hover { cursor:pointer; background-color:#3e3433; color:white; } .leftheader { height:100px; width:24px; float:left; margin-right:3px; outline-right:2px solid black; } .rightheader { height:100px; width:24px; float:right; outline-left:2px solid black; } .topheader { outline-bottom:2px solid black; } .property { margin-left:3px; } .communitychest { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/communitychest.jpg); } .chance1 { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/chance1.jpg); } .chance2 { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/chance2.jpg); } .chance3 { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/chance3.jpg); } .railroad1 { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/rr1.jpg); } .railroad2 { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/rr2.jpg); } .railroad3 { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/rr3.jpg); } .railroad4 { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/rr4.jpg); } .electriccompany { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/electric.jpg); } .waterworks { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/waterworks.jpg); } .luxurytax { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/luxurytax.jpg); } .jail { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/jail.jpg); } .gotojail { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/gotojail.jpg); } .go { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/go.jpg); } .freeparking { background-image:url(//lenoir-rhyne.com/2014fall2/monopoly/freeparking.jpg); } class="snippet-code-html lang-html prettyprint-override"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap-theme.css"> <link rel="stylesheet" href="http://lenoir-rhyne.com/2014fall2/inc/css/fw.css"> <link rel="stylesheet" href="//lenoir-rhyne.com/2014fall2/inc/css/lenoir-rhyne.css"> <link rel="stylesheet" href="//lenoir-rhyne.com/2014fall2/monopoly/monopoly.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav navbar-default navbar-fixed-top"> <div class="navbar-inverse"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand glyphicon glyphicon-home" href="/"></a> </div> <div class="navbar-collapse collapse"> <div class="navbar-right"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">phillip <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li> <a href="/2014fall2/profile/profile.cfm">profile</a> </li> <li class="divider"> </li> <li> <a href="/2014fall2?logout">logout</a> </li> </ul> </li> </ul> </div> </div> </div> </div> <div class="msg container label-info"> alter names of kentucky, indiana, illinois, atlantic, ventnor , marvin gardens. </div> </nav> <main role="main" class="container-fluid"> <div id="parta"> <div class="square freeparking"> <div class="property">free parking</div> </div> <div class="square"> <div class="property">kentucky avenue</div> <div class="bottomheader red"> </div> </div> <div class="square chance2"> <div class="property">chance</div> </div> <div class="square"> <div class="property">indiana avenue</div> <div class="bottomheader red"> </div> </div> <div class="square"> <div class="property">illinois avenue</div> <div class="bottomheader red"> </div> </div> <div class="square railroad3"> <div class="property">b & o railroad</div> </div> <div class="square"> <div class="property">atlantic avenue</div> <div class="bottomheader yellow"> </div> </div> <div class="square"> <div class="property">ventnor avenue</div> <div class="bottomheader yellow"> </div> </div> <div class="square waterworks"> <div class="property">water works</div> </div> <div class="square "> <div class="property">marvin gardens</div> <div class="bottomheader yellow"> </div> </div> <div class="square gotojail"> <div class="property">go jail</div> </div> </div> </div> <div id="partb"> <div class="square"> <span class="rightheader orange"> </span> <div class="property">new york avenue</div> </div> <div class="square"> <span class="rightheader orange"> </span> <div class="property">tenn essee avenue</div> </div> <div class="square communitychest"> <div class="property">community chest</div> </div> <div class="square"> <span class="rightheader orange"> </span> <div class="property">st. james place</div> </div> <div class="square railroad2"> <div class="property">penn sylvania railroad</div> </div> <div class="square"> <span class="rightheader pink"> </span> <div class="property">virginia avenue</div> </div> <div class="square"> <span class="rightheader pink"> </span> <div class="property">states avenue</div> </div> <div class="square electriccompany"> <div class="property">electric company</div> </div> <div class="square"> <span class="rightheader pink"> </span> <div class="property">st. charles place</div> </div> </div> <div id="center"> </div> <div id="partc"> <!-- right column --> <div class="square"> <span class="leftheader green"> </span> <div class="property">pacific avenue</div> </div> <div class="square"> <span class="leftheader green"> </span> <div class="property">north carolina avenue</div> </div> <div class="square communitychest"> <div class="property">community chest</div> </div> <div class="square"> <span class="leftheader green"> </span> <div class="property">penn sylvania avenue</div> </div> <div class="square railroad4"> <div class="property">short line</div> </div> <div class="square chance3"> <div class="property">chance</div> </div> <div class="square"> <span class="leftheader blue"> </span> <div class="property">park place</div> </div> <div class="square luxurytax"> <div class="property">luxury tax</div> </div> <div class="square"> <span class="leftheader blue"> </span> <div class="property">board walk</div> </div> </div> <div id="partd"> <!-- bottom row --> <div class="square jail"> <div class="property">just visiting</div> </div> <div class="square"> <div class="topheader lightblue"> </div> <div class="property">connecticut avenue</div> </div> <div class="square"> <div class="topheader lightblue"> </div> <div class="property">vermont avenue</div> </div> <div class="square chance1"> <div class="property">chance</div> </div> <div class="square"> <div class="topheader lightblue"> </div> <div class="property">oriental avenue</div> </div> <div class="square railroad1"> <div class="property">reading railroad</div> </div> <div class="square"> <div class="property">income tax</div> </div> <div class="square"> <div class="topheader purple"> </div> <div class="property">baltic avenue</div> </div> <div class="square communitychest"> <div class="property">community chest</div> </div> <div class="square"> <div class="topheader purple"> </div> <div class="property">mediter- ranean avenue</div> </div> <div class="square go"> <div class="property">go</div> </div> </div> </main> <div id="fw-home">/2014fall2</div> <div id="answername" hidden> <div class="square freeparking"> <div class="property">free parking</div> </div> <div class="square"> <div class="property">kentucky avenue</div> <div class="bottomheader red"> </div> non breaking space </div> <div class="square chance2"> <div class="property">chance</div> </div> <div class="square"> <div class="property">indiana avenue</div> <div class="bottomheader red"> </div> </div> <div class="square"> <div class="property">illinois avenue</div> <div class="bottomheader red"> </div> </div> <div class="square railroad3"> <div class="property">b & o railroad</div> </div> <div class="square"> <div class="property">atlantic avenue</div> <div class="bottomheader yellow"> </div> </div> <div class="square"> <div class="property">ventnor avenue</div> <div class="bottomheader yellow"> </div> </div> <div class="square waterworks"> <div class="property">water works</div> </div> <div class="square "> <div class="property">marvin gardens</div> <div class="bottomheader yellow"> </div> </div> <div class="square gotojail"> <div class="property">go jail</div> </div> </div> </div> <script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>
you can utilize absolute positioning move pieces on board smoothly, there lot of js involved updating pieces. have track piece's current location , update x , y coordinates correctly, or have have motion logic based on every location on board, meaning every spot had it's own next motion logic.
using canvas can create switch statement each location:
x number of properties on board
switch(x){ case 1: piece.moveto(x, y); // next property position; break; case 2: piece.moveto(x, y); // next property position; break; } i advise canvas method , take business relationship motion spacing has remain relative board size.
jquery-animate css-float
Comments
Post a Comment