Question

我有一个垄断板，我想顺利地在棋盘上移动一个unicode片段，就像使用jQuery.animate方法一样。

问：我是否必须去画布才能拥有流畅的玩家移动体验，或者我可以使用某种绝对定位？现在，我正在使用花车浮动作为棋盘的方块。

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">&#x265b;</div>');
		} else if (column == 1 && row > 1) {
			$('#partB .property:eq(' + (row-2) + ')').append('<div id="Player1">&#x265b;</div>');
		} else if (column == 11 && row > 1 && row < 11) {
			$('#partC .property:eq(' + (row-2) + ')').append('<div id="Player1">&#x265b;</div>');
		} else if (row == 11 && column > 1) {
			$('#partD .property:eq(' + (column-1) + ')').append('<div id="Player1">&#x265b;</div>');
		}

		Variables.Counter += 1
		if (Variables.Counter < Variables.die1 + Variables.die2) {
			setTimeout(MoveMe1,1000)
		}
		log(row + ',' + column)
	}
})()

#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 /* Change this to ED1B24 */
}
.green {
background-color:#1FB25A /* Change this to 1FB25A */
}
.blue {
background-color:#0072BB /* Change this to 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);
}

<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"> Change the names of Kentucky, Indiana, Illinois, Atlantic, Ventnor and 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">&nbsp;</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">&nbsp;</div>
		</div>
		<div class="square">
			<div class="property">ILLINOIS AVENUE</div>
			<div class="bottomHeader red">&nbsp;</div>
		</div>
		<div class="square railroad3">
			<div class="property">B &amp; O RAILROAD</div>
		</div>
		<div class="square">
			<div class="property">ATLANTIC AVENUE</div>
			<div class="bottomHeader yellow">&nbsp;</div>
		</div>
		<div class="square">
			<div class="property">VENTNOR AVENUE</div>
			<div class="bottomHeader yellow">&nbsp;</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">&nbsp;</div>
		</div>
		<div class="square gotoJail">
			<div class="property">GO TO JAIL</div>
		</div>
	</div>
	</div>
	<div id="partB">
		<div class="square"> <span class="rightHeader orange">&nbsp;</span>
			<div class="property">NEW YORK AVENUE</div>
		</div>
		<div class="square"> <span class="rightHeader orange">&nbsp;</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">&nbsp;</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">&nbsp;</span>
			<div class="property">VIRGINIA AVENUE</div>
		</div>
		<div class="square"> <span class="rightHeader pink">&nbsp;</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">&nbsp;</span>
			<div class="property">ST. CHARLES PLACE</div>
		</div>
	</div>
<div id="center">&nbsp;</div>
	<div id="partC"> <!-- right column -->
		<div class="square"> <span class="leftHeader green">&nbsp;</span>
			<div class="property">PACIFIC AVENUE</div>
		</div>
		<div class="square"> <span class="leftHeader green">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
			<div class="property">CONNECTICUT AVENUE</div>
		</div>
		<div class="square">
			<div class="topHeader lightBlue">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
	</div>
	<div class="square">
		<div class="property">ILLINOIS AVENUE</div>
		<div class="bottomHeader red">&nbsp;</div>
	</div>
	<div class="square railroad3">
		<div class="property">B &amp; O RAILROAD</div>
	</div>
	<div class="square">
		<div class="property">ATLANTIC AVENUE</div>
		<div class="bottomHeader yellow">&nbsp;</div>
	</div>
	<div class="square">
		<div class="property">VENTNOR AVENUE</div>
		<div class="bottomHeader yellow">&nbsp;</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">&nbsp;</div>
	</div>
	<div class="square gotoJail">
		<div class="property">GO TO JAIL</div>
	</div>
</div>
</div>
<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>

Answer 1

你可以使用绝对定位来平滑地移动棋盘上的棋子，但是有很多JS参与更新棋子。您必须跟踪工件的当前位置并正确更新x和y坐标，或者您必须根据电路板上的每个位置具有移动逻辑，这意味着每个位置都有自己的下一个移动逻辑。

使用canvas，您可以为每个位置创建一个switch语句：

船上X个属性

switch(x){
  case 1:
    piece.moveTo(x, y); // next property position;
    break;
  case 2:
    piece.moveTo(x, y); // next property position;
    break;
}

我可能会建议画布方法，并考虑到移动间距必须保持相对于电路板尺寸。

将浮动转换为绝对定位

1 个答案: