100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > JavaScript网页小游戏:过河游戏

JavaScript网页小游戏:过河游戏

时间:2019-09-14 01:42:45

相关推荐

JavaScript网页小游戏:过河游戏

JavaScript网页小游戏:过河游戏代码,好像是几个人都需要做船,但只能坐两人个人,应该采取什么办法让几个人都顺利过河呢?游戏玩法:

1.无论大人、小孩,每次最多只能承载两人。

2.只有爸爸、妈妈、警察可以驾船。

3.妈妈看到爸爸离开儿子打儿子。

4.爸爸看到妈妈离开女儿打女儿。

5.土匪离开警察会伤害家人。

6.先选择人物,然后点击"移动"按钮。

7.移动过程中若出现提示,说明违反上述规则。

<!DOCTYPE html><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];elsepeople[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];elsepeople[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;}elsetempId = 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;}elsetempId = 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;}}}elsealert("只有妈妈、爸爸和警察能撑船!");}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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。