| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>JavaScript过河游戏</title>
 <style type="text/css">
 #content{width:800px;height:600px;border:1px #333333 solid;overflow:hidden;}
 #A{width:120px;height:600px;float:left;background:#996633;}
 #B{width:560px;height:600px;float:left;background:#0099FF;}
 #river{width:560px;height:450px;}
 #operator{width:560px;height:150px;background:#99CCFF;overflow:hidden;}
 #C{width:120px;height:600px;float:right;background:#996633;}
 #people{width:100px;height:20px;border:2px #000000 solid;margin:10px auto;text-align:center;cursor:pointer;padding:10px 0px;}
 #ship{width:200px;height:20px;border:1px #CC3300 solid;background:#663300;position:relative;top:150px;left:0px;text-align:center;padding:10px 0px;cursor:pointer;}
 #btns{width:560px;height:40px;margin-top:10px;}
 #btn{width:60px;height:20px;border:1px #000000 solid;background:#FFFFCC;text-align:center;padding:10px 0px;cursor:pointer;float:left;margin-left:210px;display:inline;}
 #new{width:60px;height:20px;border:1px #000000 solid;background:#FFFFCC;text-align:center;padding:10px 0px;cursor:pointer;float:left;margin-left:10px;display:inline;}
 #rule{width:560px;height:100px;margin-top:10px;font-family:宋体;font-size:12px;color:#666666;line-height:16px;text-align:center;}
 </style>
 <script type="text/javascript">
 var direction;  //A to C:true ; C to A:false
 var people=new Array(9);
 var s2Able;  //判断船2是否有人
 var s1Able;  //判断船1是否有人
 var pInShip1; //哪个人在船1上
 var pInShip2; //哪个人在船2上
 function init(){
 var peopleA=document.getElementById("A").getElementsByTagName("div");
 var ships=document.getElementsByName("ship");
 var peopleC=document.getElementById("C").getElementsByTagName("div");
 var moveBtn=document.getElementById("btn");
 var newBtn=document.getElementById("new");
 for(var i=0,len=peopleC.length;i<len;i++){
 peopleC[i].style.visibility="hidden";
 }
 s1Able=true;
 s2Able=true;
 direction=true;
  for (var i=0;i<9;i++){
 people[i]=true;
 }
 
 //注册事件
 var len=peopleA.length;
 for(var j=0;j<len;j++){
 (function(m){
 peopleA[m].onclick = function(){
 if(direction)
 selectPeople(this,m+1);
 };
 peopleC[m].onclick = function(){
 if(!direction)
 selectPeople(this,m+10+1);
 };
 })(j);
 }
 ships[0].onclick=function(){
 quitShip(this,pInShip1);
 s1Able=true;
 pInShip1=0;
 };
 ships[1].onclick=function(){
 quitShip(this,pInShip2);
 s2Able=true;
 pInShip2=0;
 };
 moveBtn.onclick=function(){
 move();
 };
 newBtn.onclick=function(){
 window.location = window.location;
 };
 }
 function selectPeople(obj,move_num){
 var ships=document.getElementsByName("ship");
 if(s1Able){
 ships[0].innerHTML=obj.innerHTML;
 obj.style.visibility="hidden";
 s1Able=false;
 pInShip1=move_num;
 if(move_num>10)
 people[move_num-10]=!people[move_num-10];
 else
 people[move_num]=!people[move_num];
 }
 else if(s2Able){
 ships[1].innerHTML=obj.innerHTML;
 obj.style.visibility="hidden";
 s2Able=false;
 pInShip2=move_num;
 if(move_num>10)
 people[move_num-10]=!people[move_num-10];
 else
 people[move_num]=!people[move_num];
 }
 else{
 alert("船上最多两个人,已满!");
 }
 }
 function quitShip(obj,quitId){
 if(obj.innerHTML != ""){
 var peopleA=document.getElementById("A").getElementsByTagName("div");
 var peopleC=document.getElementById("C").getElementsByTagName("div");
 if(quitId > 10){
 peopleC[quitId-10-1].style.visibility="visible";
 people[quitId-10]=!people[quitId-10];
 }
 else{
 peopleA[quitId-1].style.visibility="visible";
 people[quitId]=!people[quitId];
 }
 obj.innerHTML="";
 }
 }
 function motherCheck(){
 if(people[1]==people[5])
 {
 if(people[4]!=people[1])
 {
 alert("妈妈打儿子1");
 return false;
 }
 }
 if(people[1]==people[6])
 {
 if(people[4]!=people[1])
 {
 alert("妈妈打儿子2");
 return false;
 }
 }
 return true;
 }
 function fatherCheck(){
 if(people[4]==people[2])
 {
 if(people[1]!=people[4])
 {
 alert("爸爸打女儿1");
 return false;
 }
 }
 if(people[4]==people[3])
 {
 if(people[1]!=people[4])
 {
 alert("爸爸打女儿2");
 return false;
 }
 }
 return true;
 }
 function policeCheck(){
 if(people[7]!=people[8])
 {
 for(var i=1;i<8;i++)
 {
 if(people[8]==people[i])
 {
 alert("犯人伤人");
 return false;
 }
 }
 }
 return true;
 }
 function atoc(peopleId){
 var peopleC=document.getElementById("C").getElementsByTagName("div");
 var ships=document.getElementsByName("ship");
 var tempId;
 if(peopleId > 10){
 tempId = peopleId - 10 -1;
 }
 else
 tempId = peopleId - 1;
 if(tempId >= 0)
 peopleC[tempId].style.visibility="visible";
 for(var i=0,len=ships.length;i<len;i++){
 ships[i].style.left = "360px";
 ships[i].innerHTML = "";
 }
 }
 function ctoa(peopleId){
 var peopleA=document.getElementById("A").getElementsByTagName("div");
 var ships=document.getElementsByName("ship");
 var tempId;
 if(peopleId > 10){
 tempId = peopleId - 10 -1;
 }
 else
 tempId = peopleId - 1;
 if(tempId >= 0)
 peopleA[tempId].style.visibility="visible";
 for(var i=0,len=ships.length;i<len;i++){
 ships[i].style.left = "0px";
 ships[i].innerHTML = "";
 }
 }
 function move(){
 if(pInShip1==1 || pInShip1==4 || pInShip1==7 ||
 pInShip1==11 || pInShip1==14 || pInShip1==17 ||
 pInShip2==1 || pInShip2==4 || pInShip2==7 ||
 pInShip2==11 || pInShip2==14 || pInShip2==17
 )  //开动船只的人只能是爸爸妈妈或者是警察
 {
 if (motherCheck()&& fatherCheck() && policeCheck())
 {
 if(direction)
 {
 atoc(pInShip1);
 atoc(pInShip2);
 direction=false;
 }
 else
 {
 ctoa(pInShip1);
 ctoa(pInShip2);
 direction=true;
 }
 s1Able=s2Able=true;
 pInShip1=pInShip2=0;
 
 var peopleC=document.getElementById("C").getElementsByTagName("div");
 var result = true;
 for(var i=0,len=peopleC.length;i<len;i++){
 if(peopleC[i].style.visibility=="hidden"){
 result = false;
 break;
 }
 }
 if(result){
 alert("你真厉害!");
 window.location = window.location;
 }
 }
 }
 else
 alert("只有妈妈、爸爸和警察能撑船!");
 }
 window.onload = function(){
 init();
 };
 </script>
 </head>
 <body><div id="content">
 <div id="A">
 <div id="people" name="people">妈妈</div>
 <div id="people" name="people">女儿1</div>
 <div id="people" name="people">女儿2</div>
 <div id="people" name="people">爸爸</div>
 <div id="people" name="people">儿子1</div>
 <div id="people" name="people">儿子2</div>
 <div id="people" name="people">警察</div>
 <div id="people" name="people">土匪</div>
 </div>
 <div id="B">
 <div id="river">
 <div id="ship" name="ship"></div>
 <div id="ship" name="ship"></div>
 </div>
 <div id="operator">
 <div id="btns">
 <div id="btn">移动</div>
 <div id="new">重玩</div>
 </div>
 <div id="rule">
 游戏规则:<br />
 1.无论大人、小孩,每次最多只能承载两人。2.只有爸爸、妈妈、警察可以驾船。<br />
 3.妈妈看到爸爸离开儿子打儿子。4.爸爸看到妈妈离开女儿打女儿。<br />
 5.土匪离开警察会伤害家人。6.先选择人物,然后点击"移动"按钮。<br />
 7.移动过程中若出现提示,说明违反上述规则。
 </div>
 </div>
 </div>
 <div id="C">
 <div id="people" name="people">妈妈</div>
 <div id="people" name="people">女儿1</div>
 <div id="people" name="people">女儿2</div>
 <div id="people" name="people">爸爸</div>
 <div id="people" name="people">儿子1</div>
 <div id="people" name="people">儿子2</div>
 <div id="people" name="people">警察</div>
 <div id="people" name="people">土匪</div>
 </div>
 </div>
 </body>
 </html>
 |