前些天看到了个vc版的“爸爸、妈妈、儿子、女儿、警察、土匪过河游戏”,觉得还不错,于是粗略地改造了个js版。
    效果图:
        [源代码下载]
    欢迎大家批评、指正,顺便赞助点下载分吧!

解决方案 »

  1.   

    谢谢!
    在csdn中学会了很多,以前习惯一个人默默地看,默默地学,或者偶尔回复下帖子。当时光流逝,暮然回首,才发现我没发什么帖子,我没能敞开心扉与大家分享所学所感。也许这是性格使然,今天,我决定冲破这种局面,于是此贴诞生了。
      

  2.   

    万分感谢下载过资源的朋友们!为了能够更好的交流,现将源代码粘贴到此处。代码写得比较粗糙,欢迎大家共同讨论。
    <!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>
      

  3.   

    类似的回答下哈哈:简单描素如何过河:首先分析问题,把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岸。全部过完...