【汇智学堂】-JS菜鸟版过河小游戏（之四---全部角色左侧上船与左侧下船）

界面代码


<!--
游戏简介：
这是一款很有难度的解谜小游戏。游戏中，一家六口，包括爸爸，妈妈，两个女儿以及两个孩子，以及一个警察抓着一个逃犯，这8个人都是准备
要过河的。但游戏的规则是只有爸爸，妈妈以及警察能控制舢板。无论成人和小孩过河，每次都只能是两个人。妈妈不在，爸爸打儿子，
爸爸不在，妈妈打女儿。警察不在，匪徒杀人。过河游戏结束。
--><!--作者：雷玉广时间：2019-04-18描述：左侧全部上船与左侧全部下船
--><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title>      <link rel="stylesheet" href="css/moveship.css"><script type="text/javascript" src="js/moveship.js"></script></head><body><div ><div id="div1" class="a1"><img src="img/father.jpg" onclick="fathermove1()" /></div>   <div id="div2" class="a2"><img  src="img/mother.jpg" onclick="mothermove1()"/></div><div id="div3" class="a3"><img src="img/son1.jpg" onclick="son1move()"/></div><div id="div4" class="a4"><img src="img/son2.jpg" onclick="son2move()"/></div><div id="div5" class="a5"><img src="img/daughter1.jpg" onclick="daughter1move()"/></div><div id="div6" class="a6"><img src="img/daughter2.jpg" onclick="daughter2move()"/></div><div id="div7" class="a7"><img src="img/policeman.jpg" onclick="policemanmove()"/></div><div id="div8" class="a8" onclick="banditmove()"><img src="img/bandit.jpg" /></div><div id="div9" class="a9"><img src="img/ship.png" /></div><div id="div10" class="a10"><button type="button">开船</button></div></div>      </body>
</html>

JS代码

var shipposition1=0;
var shipposition2=0;<!--上船-->function upship(div11){var div1=document.getElementById(div11);if(div1.style.marginLeft=="0px"||div1.style.marginLeft==""){if(shipposition1==1&shipposition2==1){return alert("船上人已满！");}div1.style.marginTop="600px"; if(shipposition1==0){     div1.style.marginLeft="210px";   shipposition1=1;}else if(shipposition2==0){div1.style.marginLeft="110px"; shipposition2=1;}else{alert('船上人已满！');}}//左侧下船else if(div1.style.marginLeft=="210px"||div1.style.marginLeft=="110px"){      if(div1.style.marginLeft=="210px"){shipposition1=0;}else if(div1.style.marginLeft=="110px"){shipposition2=0;}     if(div11=="div1"){div1.style.marginTop=0;}else if(div11=="div2"){        div1.style.marginTop="100px";} else if(div11=="div3"){       div1.style.marginTop="200px";} else if(div11=="div4"){       div1.style.marginTop="300px";} else if(div11=="div5"){div1.style.marginTop="400px";}else if(div11=="div6"){       div1.style.marginTop="500px";} else if(div11=="div7"){       div1.style.marginTop="600px";} else if(div11=="div8"){       div1.style.marginTop="700px";} div1.style.marginLeft=0;  }
}<!--爸爸上船-->function fathermove1(){upship("div1");
}
<!--妈妈上船-->
function mothermove1(){upship("div2");
}<!--儿子一上船-->
function son1move(){upship("div3");
}<!--儿子二上船-->
function son2move(){upship("div4");
}<!--女儿一上船-->
function daughter1move(){upship("div5");
}<!--女儿二上船-->
function daughter2move(){upship("div6");
}<!--警察上船-->
function policemanmove(){upship("div7");
}<!--匪徒上船-->
function banditmove(){upship("div8");
}

【汇智学堂】-JS菜鸟版过河小游戏（之四---全部角色左侧上船与左侧下船）相关推荐

【汇智学堂】-JS菜鸟版过河小游戏（之一---角色入场）
游戏简介: 这是一款很有难度的解谜小游戏.游戏中,一家六口,包括爸爸,妈妈,两个女儿以及两个孩子,以及一个警察抓着一个逃犯,这8个人都是准备要过河的. 但游戏的规则是只有爸爸,妈妈以及警察能控制舢板. ...
【汇智学堂】-JS菜鸟版过河小游戏（之十---精简代码，完整版）
游戏简介: 这是一款很有难度的解谜小游戏.游戏中,一家六口,包括爸爸,妈妈,两个女儿以及两个孩子,以及一个警察.一个逃犯,这8个人都是准备要过河的. 但游戏的规则是无论成人和小孩过河,每次都只能是两个 ...
【汇智学堂】-JS菜鸟版过河小游戏（之五---开船前的控制）
游戏简介: 这是一款很有难度的解谜小游戏.游戏中,一家六口,包括爸爸,妈妈,两个女儿以及两个孩子,以及一个警察.一个逃犯,这8个人都是准备要过河的. 但游戏的规则是无论成人和小孩过河,每次都只能是两个 ...
【汇智学堂】-JS菜鸟版过河小游戏（之八---补充返程判断）
修改moveship.js: var shipposition1=0;//代表船上的位置1没人,1代表有人,2代表是爸爸妈妈或警察 var shipposition2=0;//代表船上的位置2没人 v ...
【汇智学堂】-JS菜鸟版过河小游戏（之九---修改bug）
修改后的moveship.js如下: /* 作者:雷雷时间:2019-04-18描述:修改BUG:警察不在,爸爸妈妈可以接走匪徒.*/var shipposition1=0;//代表船上的位置1没人, ...
【汇智学堂】-JS菜鸟版过河小游戏（之七---上船/下船/过河/返程）
修改moveship.js,修改后的内容见下文:: var shipposition1=0;//代表船上的位置1没人,1代表有人,2代表是爸爸妈妈或警察 var shipposition2=0;//代 ...
【汇智学堂】-JS菜鸟版过河小游戏（之六---过河）
修改moveship.js: var shipposition1=0;//代表船上的位置1没人 var shipposition2=0;//代表船上的位置2没人 var arr = [1,1,1,1, ...
【汇智学堂】-JS菜鸟版过河小游戏（之二---测试父母上船）
上船界面见下图: 页面修改代码 <div id="div1" class="a1"><img src="img/father.jpg ...
【汇智学堂】-JS菜鸟版过河小游戏（之三---父母左侧下船）
下船代码: else if(div1.style.marginLeft=="210px"){ div1.style.marginLeft=0;shipposition1=0;if( ...

【汇智学堂】-JS菜鸟版过河小游戏（之四---全部角色左侧上船与左侧下船）

【汇智学堂】-JS菜鸟版过河小游戏（之四---全部角色左侧上船与左侧下船）相关推荐

最新文章

热门文章