【汇智学堂】-JS菜鸟版过河小游戏（之四---全部角色左侧上船与左侧下船）-CFANZ编程社区

界面代码

<!--
游戏简介：
这是一款很有难度的解谜小游戏。游戏中，一家六口，包括爸爸，妈妈，两个女儿以及两个孩子，以及一个警察抓着一个逃犯，这8个人都是准备
要过河的。但游戏的规则是只有爸爸，妈妈以及警察能控制舢板。无论成人和小孩过河，每次都只能是两个人。妈妈不在，爸爸打儿子，
爸爸不在，妈妈打女儿。警察不在，匪徒杀人。过河游戏结束。
-->

<!--
	作者：雷玉广
	时间：2019-04-18
	描述：左侧全部上船与左侧全部下船
-->

<!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" onclick="fathermove1()" />
		</div>	
		
		<div id="div2" class="a2">
			<img  src="img/mother.jpg" onclick="mothermove1()"/>
		</div>
		
		<div id="div3" class="a3">
			<img src="img/son1.jpg" onclick="son1move()"/>
		</div>
		
		<div id="div4" class="a4">
			<img src="img/son2.jpg" onclick="son2move()"/>
		</div>
		
		<div id="div5" class="a5">
			<img src="img/daughter1.jpg" onclick="daughter1move()"/>
		</div>
		
		<div id="div6" class="a6">
			<img src="img/daughter2.jpg" onclick="daughter2move()"/>
		</div>
		
		<div id="div7" class="a7">
			<img src="img/policeman.jpg" onclick="policemanmove()"/>
		</div>
		
		<div id="div8" class="a8" onclick="banditmove()">
			<img src="img/bandit.jpg" />
		</div>
		
		<div id="div9" class="a9">
			<img src="img/ship.png" />
		</div>
		
		<div id="div10" class="a10">
			<button type="button">开船</button>
		</div>
									
	</div>		
	
	</body>
</html>

JS代码

var shipposition1=0;
var shipposition2=0;

<!--上船-->

function upship(div11){
	var div1=document.getElementById(div11);
	
	if(div1.style.marginLeft=="0px"||div1.style.marginLeft==""){
		
		if(shipposition1==1&shipposition2==1){
			return alert("船上人已满！");
		}
		
		div1.style.marginTop="600px"; 
		if(shipposition1==0){		
	  	 div1.style.marginLeft="210px";	
	  	 shipposition1=1;
	   }
		else if(shipposition2==0){
		 div1.style.marginLeft="110px";	
		 shipposition2=1;
	   }
		else{
			alert('船上人已满！');
		}
    }
	
	//左侧下船
	
	else if(div1.style.marginLeft=="210px"||div1.style.marginLeft=="110px"){	  
	  
	  if(div1.style.marginLeft=="210px"){
	  	shipposition1=0;
	  }
	  else if(div1.style.marginLeft=="110px"){
	  	shipposition2=0;
	  }	  
	  
	  if(div11=="div1"){
	  	div1.style.marginTop=0;
	  }
	  
	  else if(div11=="div2"){	 	
	  	div1.style.marginTop="100px";
	  } 
	  
	  else if(div11=="div3"){	 	
	  	div1.style.marginTop="200px";
	  } 
	  
	   else if(div11=="div4"){	 	
	  	div1.style.marginTop="300px";
	  } 
	  
	  else if(div11=="div5"){
	  	div1.style.marginTop="400px";
	  }
	  
	  else if(div11=="div6"){	 	
	  	div1.style.marginTop="500px";
	  } 
	  
	  else if(div11=="div7"){	 	
	  	div1.style.marginTop="600px";
	  } 
	  
	   else if(div11=="div8"){	 	
	  	div1.style.marginTop="700px";
	  } 
	  
	  div1.style.marginLeft=0;  
  
	}
}

<!--爸爸上船-->

function fathermove1(){
	upship("div1");	
}
<!--妈妈上船-->
function mothermove1(){
	upship("div2");
}

<!--儿子一上船-->
function son1move(){
	upship("div3");
}

<!--儿子二上船-->
function son2move(){
	upship("div4");
}

<!--女儿一上船-->
function daughter1move(){
	upship("div5");
}

<!--女儿二上船-->
function daughter2move(){
	upship("div6");
}

<!--警察上船-->
function policemanmove(){
	upship("div7");
}

<!--匪徒上船-->
function banditmove(){
	upship("div8");
}