爸爸、妈妈、儿子、女儿、警察、土匪过河游戏 前些天看到了个vc版的“爸爸、妈妈、儿子、女儿、警察、土匪过河游戏”,觉得还不错,于是粗略地改造了个js版。 效果图: [源代码下载] 欢迎大家批评、指正,顺便赞助点下载分吧! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 谢谢!在csdn中学会了很多,以前习惯一个人默默地看,默默地学,或者偶尔回复下帖子。当时光流逝,暮然回首,才发现我没发什么帖子,我没能敞开心扉与大家分享所学所感。也许这是性格使然,今天,我决定冲破这种局面,于是此贴诞生了。 万分感谢下载过资源的朋友们!为了能够更好的交流,现将源代码粘贴到此处。代码写得比较粗糙,欢迎大家共同讨论。<!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" /><meta name="keywords" content="过河游戏" /><meta name="description" content="过河游戏" /><meta name="author" content="rootlee" /><title>过河游戏</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 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> 类似的回答下哈哈:简单描素如何过河:首先分析问题,把A岸上的人分为狼、猎人、男人、A男孩子、B男孩子、女人、A女孩子、B女孩子 要渡河到B岸去 1)、让猎人和狼先从A岸过河到B岸。把狼放在B岸,猎人撑船回A岸来。 2)、再让猎人从A岸带A男孩子过河到B岸。再把狼从B岸带回A岸,留下A男孩子在B岸;(相当于只有A男孩子过了河) 3)、再让男人带B男孩子从A岸过河到B岸。男人再从B岸回到A岸。(相当于A、B男孩子过了河) 4)、再让男人带女人从A 岸过河到B岸。女人再从B岸回到A岸。(相当于A、B男孩子和男人三个人过了河) 5)、再让猎人和狼从A岸过河到B岸。男人从B岸回到A岸。(相当于B岸有狼、猎人、二个男小孩子) 6)、再让男人带女人从A岸过河到B岸。女人从B岸回到A岸。(相当于A岸只剩下女人和二个小女孩子) 7)、再让女人带A小女孩子从A岸过河到B岸。猎人和狼回到A岸(相当于A岸剩下B小女孩子、猎人和狼) 8)、再让猎人带B小女孩子从A岸过河到B岸。猎人再回到A岸去。(相当于只有狼在A岸) 9)、最后猎人和狼一起过到B岸。全部过完... FullCalendar如何设置显示样式 【50分】用extjs这个ui要怎么设计?(需求是用display field) extjs 动态生成表格问题 紧急!!!紧急!!各位大侠帮帮忙!! ie与firefox的兼容问题,层显示不能消失及其他问题 javascript的一个变量怎么传到一个XPath表达式中去? js创建对象后如何加载事件? JS怎么逐行读取TXT?怎么在返回一行后停顿几秒再返回下一行? 高分请教各位大侠 大家好:用javascript时,Substring,或者Copy 函数怎么用, 如何点击后显示图片? ocx控件classid作用
在csdn中学会了很多,以前习惯一个人默默地看,默默地学,或者偶尔回复下帖子。当时光流逝,暮然回首,才发现我没发什么帖子,我没能敞开心扉与大家分享所学所感。也许这是性格使然,今天,我决定冲破这种局面,于是此贴诞生了。
<!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" />
<meta name="keywords" content="过河游戏" />
<meta name="description" content="过河游戏" />
<meta name="author" content="rootlee" />
<title>过河游戏</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>
1)、让猎人和狼先从A岸过河到B岸。把狼放在B岸,猎人撑船回A岸来。
2)、再让猎人从A岸带A男孩子过河到B岸。再把狼从B岸带回A岸,留下A男孩子在B岸;(相当于只有A男孩子过了河)
3)、再让男人带B男孩子从A岸过河到B岸。男人再从B岸回到A岸。(相当于A、B男孩子过了河)
4)、再让男人带女人从A 岸过河到B岸。女人再从B岸回到A岸。(相当于A、B男孩子和男人三个人过了河)
5)、再让猎人和狼从A岸过河到B岸。男人从B岸回到A岸。(相当于B岸有狼、猎人、二个男小孩子)
6)、再让男人带女人从A岸过河到B岸。女人从B岸回到A岸。(相当于A岸只剩下女人和二个小女孩子)
7)、再让女人带A小女孩子从A岸过河到B岸。猎人和狼回到A岸(相当于A岸剩下B小女孩子、猎人和狼)
8)、再让猎人带B小女孩子从A岸过河到B岸。猎人再回到A岸去。(相当于只有狼在A岸)
9)、最后猎人和狼一起过到B岸。全部过完...