JS小游戲-網頁版過河游戲_網頁代碼站(www.hbsxmp.com)

歡迎您來到網頁代碼站！設為首頁網頁代碼站分割線

網頁代碼站分割線

加入收藏

網頁代碼站分割線

網頁代碼站分割線

留言板

網頁代碼站分割線

精品美文

網頁代碼站分割線

網頁代碼站分割線

在線手冊

如果您關閉了瀏覽器的javascript，可能導致頁面部分功能無法顯示，請開啟javascript以便正常瀏覽本網頁。網頁代碼站(www.hbsxmp.com)謝謝您的支持！

熱搜:div

您的當前位置：網頁代碼站 >> 游戲娛樂 >> JS小游戲-網頁版過河游戲

JS小游戲-網頁版過河游戲

分類：游戲娛樂時間：2011-10-12 點擊：

關鍵詞：JS|網頁代碼|特效代碼|

<!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>
<title>JS小游戲-網頁版過河游戲_網頁代碼站(www.hbsxmp.com)</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>
<br />
<p><a href="http://www.hbsxmp.com">網頁代碼站</a> - 最專業的網頁代碼下載網站 - 致力為中國站長提供有質量的網頁代碼！</p>
</body>
</html>

運行代碼全選代碼復制代碼保存代碼友情提示

網頁代碼站代碼預覽圖片

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

一、如果您使用的瀏覽器版本為IE6.0、360瀏覽器V3.0.8.1版本或者IE的更低版本瀏覽本頁面，建議您升級瀏覽器至IE7以上，上面的“運行”按鈕可能不能用，但您可按以下方式查看。
運行代碼方式：
1、點擊“復制”按鈕；
2、在桌面建立一個txt文檔；
3、粘貼復制的代碼；
4、最后把txt的擴展名改為“htm”或“html”；
5、完成，打開即可看到效果。

二、如果您使用FireFox或者非IE瀏覽器，建議您使用IE7以上版本。上面的“復制”按鈕失效，請您“全選”，以普通方式復制！

三、某些代碼因需加載完Jquery等之類比較大的JS文件，如果您看不到效果，請您刷新頁面！

四、某些代碼不能完全兼容各瀏覽器，還請您再次修改才能使用！給您帶來的不便！盡請諒解！謝謝您的支持！

上一篇：JS用方向鍵來控制圖片移動
下一篇：JS小游戲-網頁泡泡龍

問問 | 貼吧 | 查詢 | 給我留言 | 精品美文 | 友情鏈接 | | 本站承接網站開發業務
版權聲明 | 廣告服務 | 聯系我們 | 網站地圖 | 關于我們 | | 滇ICP備08101440號
Powered by 網頁代碼站(網頁即"web" + 代碼即"dm" + "cn" = webdm.cn) | 最專業的代碼下載網站 - 致力為中國站長提供高質量的代碼！

滇公網安備 53032202100002號

精品久久久久久久中文字幕