JavaScript 过河游戏

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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" />
<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: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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript 过河游戏

分类

游戏

描述

游戏规则：&<br/> 　　1.无论大人、小孩，每次最多只能承载两人。2.只有爸爸、妈妈、警察可以驾船。3.妈妈看到爸爸离开儿子打儿子。4.爸爸看到妈妈离开女儿打女儿。5.土匪离开警察会伤害家人。6.先选择人物，然后点击"移动"按...