JS过河游戏，警察,土匪,妈妈,爸爸,女儿和儿子

　　烈25火65网(LieHuo13.Net)网页特效教73程这是JavaScript 脚本编写的过河游戏，小编试玩了一下，还不错哦，过去了，如下图。

JS过河游戏

　　游戏规则：

　　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"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>JavaScript过河游戏</title><br /> <style type="text/css"><br /> #content{width:800px;height:600px;border:1px #333333 solid;overflow:hidden;}<br /> #A{width:120px;height:600px;float:left;background:#996633;}<br /> #B{width:560px;height:600px;float:left;background:#0099FF;}<br /> #river{width:560px;height:450px;}<br /> #operator{width:560px;height:150px;background:#99CCFF;overflow:hidden;}<br /> #C{width:120px;height:600px;float:right;background:#996633;}<br /> #people{width:100px;height:20px;border:2px #000000 solid;margin:10px auto;text-align:center;cursor:pointer;padding:10px 0px;}<br /> #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;}<br /> #btns{width:560px;height:40px;margin-top:10px;}<br /> #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;}<br /> #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;}<br /> #rule{width:560px;height:100px;margin-top:10px;font-family:宋体;font-size:12px;color:#666666;line-height:16px;text-align:center;}<br /> </style><br /> <script type="text/javascript"><br /> var direction; //A to C:true ; C to A:false<br /> var people=new Array(9);<br /> var s2Able; //判断船2是否有人<br /> var s1Able; //判断船1是否有人<br /> var pInShip1; //哪个人在船1上<br /> var pInShip2; //哪个人在船2上<br /> function init(){<br /> var peopleA=document.getElementById("A").getElementsByTagName("div");<br /> var ships=document.getElementsByName("ship");<br /> var peopleC=document.getElementById("C").getElementsByTagName("div");<br /> var moveBtn=document.getElementById("btn");<br /> var newBtn=document.getElementById("new");<br /> for(var i=0,len=peopleC.length;i<len;i++){<br /> peopleC[i].style.visibility="hidden";<br /> }<br /> s1Able=true;<br /> s2Able=true;<br /> direction=true;<br /> for (var i=0;i<9;i++)<br /> {<br /> people[i]=true;<br /> }<br /> //注册事件<br /> var len=peopleA.length;<br /> for(var j=0;j<len;j++){<br /> (function(m){<br /> peopleA[m].onclick = function(){<br /> if(direction)<br /> selectPeople(this,m+1);<br /> };<br /> peopleC[m].onclick = function(){<br /> if(!direction)<br /> selectPeople(this,m+10+1);<br /> };<br /> })(j);<br /> }<br /> ships[0].onclick=function(){<br /> quitShip(this,pInShip1);<br /> s1Able=true;<br /> pInShip1=0;<br /> };<br /> ships[1].onclick=function(){<br /> quitShip(this,pInShip2);<br /> s2Able=true;<br /> pInShip2=0;<br /> };<br /> moveBtn.onclick=function(){<br /> move();<br /> };<br /> newBtn.onclick=function(){<br /> window.location = window.location;<br /> };<br /> }<br /> function selectPeople(obj,move_num){<br /> var ships=document.getElementsByName("ship");<br /> if(s1Able){<br /> ships[0].innerHTML=obj.innerHTML;<br /> obj.style.visibility="hidden";<br /> s1Able=false;<br /> pInShip1=move_num;<br /> if(move_num>10)<br /> people[move_num-10]=!people[move_num-10];<br /> else<br /> people[move_num]=!people[move_num];<br /> }<br /> else if(s2Able){<br /> ships[1].innerHTML=obj.innerHTML;<br /> obj.style.visibility="hidden";<br /> s2Able=false;<br /> pInShip2=move_num;<br /> if(move_num>10)<br /> people[move_num-10]=!people[move_num-10];<br /> else<br /> people[move_num]=!people[move_num];<br /> }<br /> // 烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ<br /> else{<br /> alert("船上最多两个人，已满!");<br /> }<br /> }<br /> function quitShip(obj,quitId){<br /> if(obj.innerHTML != ""){<br /> var peopleA=document.getElementById("A").getElementsByTagName("div");<br /> var peopleC=document.getElementById("C").getElementsByTagName("div");<br /> if(quitId > 10){<br /> peopleC[quitId-10-1].style.visibility="visible";<br /> people[quitId-10]=!people[quitId-10];<br /> }<br /> else{<br /> peopleA[quitId-1].style.visibility="visible";<br /> people[quitId]=!people[quitId];<br /> }<br /> obj.innerHTML="";<br /> }<br /> }<br /> function motherCheck(){<br /> if(people[1]==people[5])<br /> {<br /> if(people[4]!=people[1])<br /> {<br /> alert("妈妈打儿子1");<br /> return false;<br /> }<br /> }<br /> if(people[1]==people[6])<br /> {<br /> if(people[4]!=people[1])<br /> {<br /> alert("妈妈打儿子2");<br /> return false;<br /> }<br /> }<br /> return true;<br /> }<br /> function fatherCheck(){<br /> if(people[4]==people[2])<br /> {<br /> if(people[1]!=people[4])<br /> {<br /> alert("爸爸打女儿1");<br /> return false;<br /> }<br /> }<br /> if(people[4]==people[3])<br /> {<br /> if(people[1]!=people[4])<br /> {<br /> alert("爸爸打女儿2");<br /> return false;<br /> }<br /> }<br /> return true;<br /> }<br /> function policeCheck(){<br /> if(people[7]!=people[8])<br /> {<br /> for(var i=1;i<8;i++)<br /> {<br /> if(people[8]==people[i])<br /> {<br /> alert("犯人伤人");<br /> return false;<br /> }<br /> }<br /> }<br /> return true;<br /> }<br /> function atoc(peopleId){<br /> var peopleC=document.getElementById("C").getElementsByTagName("div");<br /> var ships=document.getElementsByName("ship");<br /> var tempId;<br /> if(peopleId > 10){<br /> tempId = peopleId - 10 -1;<br /> }<br /> else<br /> tempId = peopleId - 1;<br /> if(tempId >= 0)<br /> peopleC[tempId].style.visibility="visible";<br /> for(var i=0,len=ships.length;i<len;i++){<br /> ships[i].style.left = "360px";<br /> ships[i].innerHTML = "";<br /> }<br /> }<br /> function ctoa(peopleId){<br /> var peopleA=document.getElementById("A").getElementsByTagName("div");<br /> var ships=document.getElementsByName("ship");<br /> var tempId;<br /> if(peopleId > 10){<br /> tempId = peopleId - 10 -1;<br /> }<br /> else<br /> tempId = peopleId - 1;<br /> if(tempId >= 0)<br /> peopleA[tempId].style.visibility="visible";<br /> for(var i=0,len=ships.length;i<len;i++){<br /> ships[i].style.left = "0px";<br /> ships[i].innerHTML = "";<br /> }<br /> }<br /> function move(){<br /> if(pInShip1==1 || pInShip1==4 || pInShip1==7 ||<br /> pInShip1==11 || pInShip1==14 || pInShip1==17 ||<br /> pInShip2==1 || pInShip2==4 || pInShip2==7 ||<br /> pInShip2==11 || pInShip2==14 || pInShip2==17<br /> ) //开动船只的人只能是爸爸妈妈或者是警察<br /> {<br /> if (motherCheck()&& fatherCheck() && policeCheck())<br /> {<br /> if(direction)<br /> {<br /> atoc(pInShip1);<br /> atoc(pInShip2);<br /> direction=false;<br /> }<br /> else<br /> {<br /> ctoa(pInShip1);<br /> ctoa(pInShip2);<br /> direction=true;<br /> }<br /> s1Able=s2Able=true;<br /> pInShip1=pInShip2=0;<br /> var peopleC=document.getElementById("C").getElementsByTagName("div");<br /> var result = true;<br /> for(var i=0,len=peopleC.length;i<len;i++){<br /> if(peopleC[i].style.visibility=="hidden"){<br /> result = false;<br /> break;<br /> }<br /> }<br /> if(result){<br /> alert("你真厉害！");<br /> window.location = window.location;<br /> }<br /> }<br /> }<br /> else<br /> alert("只有妈妈、爸爸和警察能撑船！");<br /> }<br /> window.onload = function(){<br /> init();<br /> };<br /> </script><br /> </head><br /> <body><br /> <div id="content"><br /> <div id="A"><br /> <div id="people" name="people">妈妈</div><br /> <div id="people" name="people">女儿1</div><br /> <div id="people" name="people">女儿2</div><br /> <div id="people" name="people">爸爸</div><br /> <div id="people" name="people">儿子1</div><br /> <div id="people" name="people">儿子2</div><br /> <div id="people" name="people">警察</div><br /> <div id="people" name="people">土匪</div><br /> </div><br /> <div id="B"><br /> <div id="river"><br /> <div id="ship" name="ship"></div><br /> <div id="ship" name="ship"></div><br /> </div><br /> <div id="operator"><br /> <div id="btns"><br /> <div id="btn">移动</div><br /> <div id="new">重玩</div><br /> </div><br /> <div id="rule"><br /> 游戏规则：<br /><br /> 1.无论大人、小孩，每次最多只能承载两人。2.只有爸爸、妈妈、警察可以驾船。<br /><br /> 3.妈妈看到爸爸离开儿子打儿子。4.爸爸看到妈妈离开女儿打女儿。<br /><br /> 5.土匪离开警察会伤害家人。6.先选择人物，然后点击"移动"按钮。<br /><br /> 7.移动过程中若出现提示，说明违反上述规则。<br /> </div><br /> </div><br /> </div><br /> <div id="C"><br /> <div id="people" name="people">妈妈</div><br /> <div id="people" name="people">女儿1</div><br /> <div id="people" name="people">女儿2</div><br /> <div id="people" name="people">爸爸</div><br /> <div id="people" name="people">儿子1</div><br /> <div id="people" name="people">儿子2</div><br /> <div id="people" name="people">警察</div><br /> <div id="people" name="people">土匪</div><br /> </div><br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

JS过河游戏，警察,土匪,妈妈,爸爸,女儿和儿子

由 dawei

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展

JS过河游戏，警察,土匪,妈妈,爸爸,女儿和儿子

由 dawei

相关文章

SQLite 实现if not exist 类似功能的操作

PostgreSQL将数据加载到buffer cache中操作方法

在PostgreSQL中使用ltree处理层次结构数据的方法

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展