JavaScript 過河游戲

2024-09-05 12:20:58

字體：大中小

來源：轉載

供稿：網友

游戲規則：
　　1.無論大人、小孩，每次最多只能承載兩人。2.只有爸爸、媽媽、警察可以駕船。3.媽媽看到爸爸離開兒子打兒子。4.爸爸看到媽媽離開女兒打女兒。5.土匪離開警察會傷害家人。6.先選擇人物，然后點擊"移動"按鈕。7.移動過程中若出現提示，說明違反上述規則。

<!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:falsevar 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   class="vbx9zp9"   id="content">    <div   class="79tpjzj"   id="A">        <div   class="19t9bj9"   id="people" name="people">媽媽</div>        <div   class="x1tpjrf"   id="people" name="people">女兒1</div>        <div   class="frlfxnf"   id="people" name="people">女兒2</div>        <div   class="19vp99x"   id="people" name="people">爸爸</div>        <div   class="r99197x"   id="people" name="people">兒子1</div>        <div   class="17dhl9p"   id="people" name="people">兒子2</div>        <div   class="h7j9bh9"   id="people" name="people">警察</div>        <div   class="9nr99xl"   id="people" name="people">土匪</div>    </div>    <div   class="d9f1dvl"   id="B">        <div   class="1pbvpfn"   id="river">            <div   class="xbdxhhp"   id="ship" name="ship"></div>            <div   class="1htd99d"   id="ship" name="ship"></div>        </div>        <div   class="b99rd99"   id="operator">            <div   class="jd9np1d"   id="btns">                <div   class="9zbdzp9"   id="btn">移動</div>                <div   class="7d9jv9x"   id="new">重玩</div>            </div>            <div   class="79f9tl1"   id="rule">            游戲規則：<br />            1.無論大人、小孩，每次最多只能承載兩人。2.只有爸爸、媽媽、警察可以駕船。<br />            3.媽媽看到爸爸離開兒子打兒子。4.爸爸看到媽媽離開女兒打女兒。<br />            5.土匪離開警察會傷害家人。6.先選擇人物，然后點擊"移動"按鈕。<br />            7.移動過程中若出現提示，說明違反上述規則。            </div>        </div>    </div>    <div   class="19d9fvl"   id="C">        <div   class="zjlpj99"   id="people" name="people">媽媽</div>        <div   class="xj99fd9"   id="people" name="people">女兒1</div>        <div   class="v99ptr9"   id="people" name="people">女兒2</div>        <div   class="lfb9v9z"   id="people" name="people">爸爸</div>        <div   class="rbvr99r"   id="people" name="people">兒子1</div>        <div   class="19ddx9z"   id="people" name="people">兒子2</div>        <div   class="fnp99lz"   id="people" name="people">警察</div>        <div   class="99tlf9r"   id="people" name="people">土匪</div>    </div></div></body></html>

上一篇：JS寫的小游戲，網頁泡泡龍

下一篇：用方向鍵來控制圖片移動