汇智学堂-JS菜鸟版过河小游戏（之一---角色入场）

游戏简介：
这是一款很有难度的解谜小游戏。游戏中，一家六口，包括爸爸，妈妈，两个女儿以及两个孩子，以及一个警察抓着一个逃犯，这8个人都是准备要过河的。
但游戏的规则是只有爸爸，妈妈以及警察能控制舢板。无论成人和小孩过河，每次都只能是两个人。妈妈不在，爸爸打儿子，爸爸不在，妈妈打女儿。警察不在，匪徒杀人。全部过河，游戏结束。
汇智学堂-JS菜鸟版过河小游戏（之一---角色入场）

界面：

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<link rel="stylesheet" href="css/moveship.css">
		<script type="text/javascript" src="js/moveship.js"></script>
	</head>
	
	<body>
		
		<div >
			
		<div id="div1" class="a1">
			<img src="img/father.jpg" />
		</div>	
		
		<div>
			<img class="a2" src="img/mother.jpg" ""/>
		</div>
		
		<div>
			<img class="a3" src="img/son1.jpg" />
		</div>
		
		<div>
			<img class="a4" src="img/son2.jpg" />
		</div>
		
		<div>
			<img class="a5" src="img/daughter1.jpg" />
		</div>
		
		<div>
			<img class="a6" src="img/daughter2.jpg" />
		</div>
		
		<div>
			<img class="a7" src="img/policeman.jpg" />
		</div>
		
		<div>
			<img class="a8" src="img/bandit.jpg" />
		</div>
		
		<div>
			<img class="a9 img" src="img/ship.jpg" />
		</div>
		
		<div id="div10" class="a10">
			<button type="button" >开船</button>
		</div>
									
	</div>		
	
	</body>
</html>

CSS样式表

 img{width:80px;height:80px} 
 
.a1{
	margin-top:0px;	
	margin-left:0px;
	position: absolute;
}
.a2{
   position: absolute;
	margin-top:100px;
	margin-left:0px;
}

.a3{
   position: absolute;
	margin-top:200px;
	margin-left:0px;
}

.a4{
   position: absolute;
	margin-top:300px;
	margin-left:0px;
}


.a5{
	margin-top:400px;	
	position: absolute;
	margin-left:0px;
}

.a6{
   position: absolute;
	margin-top:500px;
	margin-left:0px;
}

.a7{
   position: absolute;
	margin-top:600px;
	margin-left:0px;
}

.a8{
   position: absolute;
	margin-top:700px;
	margin-left:0px;
}

.a9{
   position: absolute;
	margin-top:700px;
	margin-left:100px ;	
	width: 206px;
	height: 131px;	
}
/*
.a9 img{
	width: 466px;
	height: 131px;	
}*/

.a10{
   position: absolute;
	margin-top:790px;
	margin-left:120px ;
	
	width: 100px;	
	height: 40px;
}

汇智学堂-JS菜鸟版过河小游戏（之一---角色入场）

相关推荐