目前在尝试做一个小游戏，我想当红色的div碰到黑色div的时候，弹出一个alert告诉你获得了那些物资（已实现）。
我在js里写了个定时器，每隔60s统计一次地图上的黑色div，根据黑色div的数量建立三个数组，分别放着相应div对应的面包（food）、水（water）和水晶（crystal）的数量。红色div碰到黑色div的时候，告诉你这里有多少物资。假如碰到了第i个黑色div，那么就会弹出那三个数组第i个位置上的数量，并变成0.
我现在懵逼的地方在函数写的太多，不会写怎么返回了，一个函数套一个函数，不知道怎么改变全局变量了，求大神解答。<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单生存游戏</title>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/public.css">
</head>
<body>
<div class="hpBox">
<ul class="hp-ul">
<li class="hp-li">生命：<span id="shengming">100</span>/100</li>
<li class="hp-li">水分：<span id="shuifen">100</span>/100</li>
</ul>
</div> <div class="bag" id="bag">
<ul class="bag-ul">
<li class="title">背包</li>
<li class="bag-li">面包*<span>0</span></li>
<li class="bag-li">水*<span>0</span></li>
<li class="bag-li">水晶*<span>0</span></li>
</ul>
</div> <div class="world" id="world1">
<div id="element" class="element">
<img style="background-color:red;width:50px;height:50px"/>
</div>
<div class="stone" id="stone1"></div>
<div class="stone" id="stone2"></div>
<div class="stone" id="stone3"></div>
<div class="gate" id="gate1"></div>
</div> <div class="world" id="world2">
<div id="" class="element el">
<img style="background-color:green;width:50px;height:50px"/>
</div>
<div class="st" id="stone4"></div>
<div class="st" id="stone5"></div>
<div class="st" id="stone6"></div>
</div></body>
</html>
.world{
width: 100%;
height: 100%;
background: #666666;
position: relative;
overflow:hidden;
}.element{
left:0;
top:0;
position: absolute;
background-color: #eee;}.element img{
border: 0;
padding: 0;
margin: 0;
}.stone{
position: absolute;
background: #000;}#stone1{
width: 100px;
height: 100px;
left: 300px;
top:400px;
}#stone2{
width: 200px;
height: 100px;
left: 500px;
top: 30px;
}#stone3{
width: 100px;
height: 300px;
left:800px;
top:200px;
}.hpBox{
position: fixed;
left: 0;
top: 0;
z-index: 10;
background: #fff;
opacity: 1;
}.hp-li{
font-size: 12px;
line-height: 12px;
text-align: center;
padding: 5px;
float: left;
border-right: 1px solid #cccccc;
}.hpBox:hover{
opacity:1;
}#world2{
display: none;
}.gate{
position: absolute;
background: #cccccc;
}#gate1{
right: 0;
bottom:0;
width: 100px;
height: 20px;
}.bag{
width: 200px;
height: 350px;
background: green;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
margin: auto;
z-index: 20;
display: none;
}.bag-ul{
display: block;
}.bag-li{
width: 200px;
height: 99px;
text-align: center;
font-size: 50px;
line-height: 100px;
color: #000;
border-bottom: 1px solid #cccccc;
display: none;
}.title{
width: 200px;
height: 45px;
border-bottom: 5px solid #000;
text-align: center;
color: #000;
font-size: 25px;
line-height: 45px;
}
我在js里写了个定时器，每隔60s统计一次地图上的黑色div，根据黑色div的数量建立三个数组，分别放着相应div对应的面包（food）、水（water）和水晶（crystal）的数量。红色div碰到黑色div的时候，告诉你这里有多少物资。假如碰到了第i个黑色div，那么就会弹出那三个数组第i个位置上的数量，并变成0.
我现在懵逼的地方在函数写的太多，不会写怎么返回了，一个函数套一个函数，不知道怎么改变全局变量了，求大神解答。<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单生存游戏</title>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/public.css">
</head>
<body>
<div class="hpBox">
<ul class="hp-ul">
<li class="hp-li">生命：<span id="shengming">100</span>/100</li>
<li class="hp-li">水分：<span id="shuifen">100</span>/100</li>
</ul>
</div> <div class="bag" id="bag">
<ul class="bag-ul">
<li class="title">背包</li>
<li class="bag-li">面包*<span>0</span></li>
<li class="bag-li">水*<span>0</span></li>
<li class="bag-li">水晶*<span>0</span></li>
</ul>
</div> <div class="world" id="world1">
<div id="element" class="element">
<img style="background-color:red;width:50px;height:50px"/>
</div>
<div class="stone" id="stone1"></div>
<div class="stone" id="stone2"></div>
<div class="stone" id="stone3"></div>
<div class="gate" id="gate1"></div>
</div> <div class="world" id="world2">
<div id="" class="element el">
<img style="background-color:green;width:50px;height:50px"/>
</div>
<div class="st" id="stone4"></div>
<div class="st" id="stone5"></div>
<div class="st" id="stone6"></div>
</div></body>
</html>
.world{
width: 100%;
height: 100%;
background: #666666;
position: relative;
overflow:hidden;
}.element{
left:0;
top:0;
position: absolute;
background-color: #eee;}.element img{
border: 0;
padding: 0;
margin: 0;
}.stone{
position: absolute;
background: #000;}#stone1{
width: 100px;
height: 100px;
left: 300px;
top:400px;
}#stone2{
width: 200px;
height: 100px;
left: 500px;
top: 30px;
}#stone3{
width: 100px;
height: 300px;
left:800px;
top:200px;
}.hpBox{
position: fixed;
left: 0;
top: 0;
z-index: 10;
background: #fff;
opacity: 1;
}.hp-li{
font-size: 12px;
line-height: 12px;
text-align: center;
padding: 5px;
float: left;
border-right: 1px solid #cccccc;
}.hpBox:hover{
opacity:1;
}#world2{
display: none;
}.gate{
position: absolute;
background: #cccccc;
}#gate1{
right: 0;
bottom:0;
width: 100px;
height: 20px;
}.bag{
width: 200px;
height: 350px;
background: green;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
margin: auto;
z-index: 20;
display: none;
}.bag-ul{
display: block;
}.bag-li{
width: 200px;
height: 99px;
text-align: center;
font-size: 50px;
line-height: 100px;
color: #000;
border-bottom: 1px solid #cccccc;
display: none;
}.title{
width: 200px;
height: 45px;
border-bottom: 5px solid #000;
text-align: center;
color: #000;
font-size: 25px;
line-height: 45px;
}
window.onload = function(){ /************* 浏览器滚动条宽度 **************/
var scrollTop=0;
function getScrollTop()
{
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
function myParseInt(s) {
var ret = parseInt(s);
return (isNaN(ret) ? 0 : ret);
} /*************** 键盘响应事件 *****************/
$(document).keydown(function(e){
// console.log('进入键盘响应事件');
var keyNum = e.which;
e=window.event||e; var el = $("#element");
var stone = $('.stone'); var elWidth = el[0].offsetWidth;
var elHeight = el[0].offsetHeight; var bodyWidth = $(window).width();
var bodyHeight = $(window).height(); var left = el.css('left');
var top = el.css('top'); switch (keyNum) {
case 66://B键背包
bag();
break;
case 37: //向左
if(myParseInt(left)>0 ){
console.log('开始向左移动');
to_left(el,stone);
}
break;
case 38: //向上
if(myParseInt(top)>0 ){
console.log('开始向上移动')
to_top(el,stone);
} break;
case 39: //向右
console.log('准备向右移动');
if( (myParseInt(left) <= (bodyWidth-elWidth-scrollTop-10) ) ){
console.log('开始向右移动');
to_right(el,stone);
} break;
case 40: //向下
if(myParseInt(top)<= (bodyHeight-elHeight-scrollTop-10) ){
console.log('开始向下移动');
to_bottom(el,stone);
}
break;
case 65: // A键向左
if(myParseInt(left)>0){
to_left(el,stone);
}
break;
case 87: //W键向上
if(myParseInt(top)>0){
to_top(el,stone);
}
break;
case 68: //D键向右
if(myParseInt(left)<= (bodyWidth-elWidth-scrollTop-10)){
to_right(el,stone);
}
break;
case 83: //S键向下
if(myParseInt(top)<= (bodyHeight-elHeight-scrollTop-10)){
to_bottom(el,stone);
}
break;
}
}) /************* 消除浏览器滚动条跟随按键移动 **************/
$(document).keydown(function(event){
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40 || event.keyCode == 65 || event.keyCode == 87 || event.keyCode == 68 || event.keyCode == 83)
{event.preventDefault();}
}); /********************* 碰撞检测 ***********************/
function playerCollision(rect1,rect2){
// console.log('playerCollision');
var center1 = {
x:myParseInt(rect1.css('left')) + myParseInt(rect1.width()/2),
y:myParseInt(rect1.css('top')) + myParseInt(rect1.height()/2)
}
// console.log('rect1.left:'+myParseInt(rect1.css('left')));
// console.log('rect1.top:'+myParseInt(rect1.css('top')));
// console.log('rect1.width()/2:'+myParseInt(rect1.width()/2));
// console.log('rect1.height()/2:'+myParseInt(rect1.height()/2)); var center2 = {
x:rect2.offsetLeft + rect2.offsetWidth/2,
y:rect2.offsetTop + rect2.offsetHeight/2
}
// console.log('rect2.offsetLeft:'+rect2.offsetLeft);
// console.log('rect2.offsetTop:'+rect2.offsetTop);
// console.log('rect2.offsetWidth/2:'+rect2.offsetWidth/2);
// console.log('rect2.offsetHeight/2:'+rect2.offsetHeight/2);
var distX = Math.abs(center1.x-center2.x);
var distY = Math.abs(center1.y-center2.y);
var stX = myParseInt(rect1.width())/2 + myParseInt(rect2.offsetWidth)/2;
var stY = myParseInt(rect1.height())/2 + myParseInt(rect2.offsetHeight)/2; if( distX > stX || distY > stY ){
return true;
} else {
return false;
}
}
/************* 碰撞判断 **************/
function collisionJudge(pl,st){
var flag = true;
for(var i=0;i<st.length;i++){
if(!playerCollision(pl,st[i]))
flag = false;
}
// console.log('collisionJudge');
// console.log(flag);
return flag;
} function goLeft(gl1,gl2){
var re = false;
for(var i=0;i<gl2.length;i++){
var plRborder = myParseInt(gl1.css('left'))+myParseInt(gl1.width());
var stLborder = myParseInt(gl2[i].offsetLeft);
var plY1 = myParseInt(gl1.css('top'));
var plY2 = plY1 + myParseInt(gl1.height());
var stY1 = myParseInt(gl2[i].offsetTop);
var stY2 = myParseInt(gl2[i].offsetHeight) + stY1;
if(plRborder==stLborder || plY1==stY2 || plY2==stY1 )
re = true;
}
return re;
} function goRight(gl1,gl2){
var re = false;
for(var i=0;i<gl2.length;i++){
var plRborder = myParseInt(gl1.css('left'));
var stLborder = myParseInt(gl2[i].offsetLeft)+myParseInt(gl2[i].offsetWidth);
var plY1 = myParseInt(gl1.css('top'));
var plY2 = plY1 + myParseInt(gl1.height());
var stY1 = myParseInt(gl2[i].offsetTop);
var stY2 = myParseInt(gl2[i].offsetHeight) + stY1;
if(plRborder==stLborder || plY1==stY2 || plY2==stY1 )
re = true;
}
return re;
} function goTop(gl1,gl2){
var re = false;
for(var i=0;i<gl2.length;i++){
var stLborder = myParseInt(gl2[i].offsetTop);
var plRborder = myParseInt(gl1.css('top'))+myParseInt(gl1.height());
var plX1 = myParseInt(gl1.css('left'));
var plX2 = plX1 + myParseInt(gl1.width());
var stX1 = myParseInt(gl2[i].offsetLeft);
var stX2 = myParseInt(gl2[i].offsetWidth) + stX1;
if(plRborder==stLborder || plX1==stX2 || plX2==stX1 )
re = true;
}
return re;
} function goBottom(gl1,gl2){
var re = false;
for(var i=0;i<gl2.length;i++){
var plRborder = myParseInt(gl1.css('top'));
var stLborder = myParseInt(gl2[i].offsetTop)+myParseInt(gl2[i].offsetHeight);
var plX1 = myParseInt(gl1.css('left'));
var plX2 = plX1 + myParseInt(gl1.width());
var stX1 = myParseInt(gl2[i].offsetLeft);
var stX2 = myParseInt(gl2[i].offsetWidth) + stX1;
if(plRborder==stLborder || plX1==stX2 || plX2==stX1 )
re = true;
}
return re;
}
/************** 获取元素id ***************/
function getId(){
var st = $('.stone');
var pl = $('#element');
for(var i=0;i<st.length;i++){
var center1 = {
x:myParseInt(pl.css('left')) + myParseInt(pl.width()/2),
y:myParseInt(pl.css('top')) + myParseInt(pl.height()/2)
} var center2 = {
x:st[i].offsetLeft + st[i].offsetWidth/2,
y:st[i].offsetTop + st[i].offsetHeight/2
} var distX = Math.abs(center1.x-center2.x);
var distY = Math.abs(center1.y-center2.y);
var stX = myParseInt(pl.width())/2 + myParseInt(st[i].offsetWidth)/2;
var stY = myParseInt(pl.height())/2 + myParseInt(st[i].offsetHeight)/2;
if( (distX==stX&&distY<=stY)||(distX<=stX&&distY==stY) ){
// var stId = st.eq(i).attr('id');
return i;
}
}
}
/*************** 控制玩家移动 *****************/
function to_left(pl1,pl2){
if(collisionJudge(pl1,pl2)||goLeft(pl1,pl2)){
$("#element").css({'left':'-=10'});
} else {
playerFood();
}
} function to_right(pl1,pl2){
if(collisionJudge(pl1,pl2)||goRight(pl1,pl2)){
$("#element").css({'left':'+=10'});
} else {
playerFood();
getFood();
}
} function to_top(pl1,pl2){
if(collisionJudge(pl1,pl2)||goTop(pl1,pl2)){
$("#element").css({'top':'-=10'});
} else {
playerFood();
}
} function to_bottom(pl1,pl2){
if(collisionJudge(pl1,pl2)||goBottom(pl1,pl2)){
$("#element").css({'top':'+=10'});
} else {
playerFood();
}
} /**************** 生命值 *****************/
var hpReduce = setInterval(hpReduce,5000);
var mpReduce = setInterval(mpReduce,2000); function hpReduce(){
var hp = $('#shengming').text();
if(hp==0){
hp=0;
} else {
hp--;
}
$('#shengming').text(hp); } function mpReduce(){
var mp = $('#shuifen').text();
if(mp==0){
mp=0;
} else {
mp--;
}
$('#shuifen').text(mp); } /************* 设置地图上的资源 ***************/
var box = new Array;
box = [0,0,0];
var food=box[0];
var water=box[1];
var cirstal = box[2];
var bagNum = 0; function bag(){
var bag = $('#bag');
if(bagNum==0){
bag.show();
bagNum=1;
} else {
bag.hide();
bagNum=0;
}
return bagNum;
} var f1 = setTimeout(foodNum,1000);
var w1 = setTimeout(waterNum,1000);
var c1 = setTimeout(crystalNum,1000);
var foods = setInterval(foodNum,60000);
var waters = setInterval(waterNum,60000);
var crystals = setInterval(crystalNum,60000);
var foodArray = new Array();
var waterArray = new Array();
var crystalArray = new Array();
var foodArr = foodNum();
var waterArr = waterNum();
var crystalArr = crystalNum(); function foodNum(){
var st = $('.stone');
for(var i=0;i<st.length;i++){
foodArray[i]=myParseInt(Math.random()*5);
} return (foodArray);
} function waterNum(){
var st = $('.stone');
for(var i=0;i<st.length;i++){
waterArray[i]=myParseInt(Math.random()*3);
}
return (waterArray);
} function crystalNum(){
var st = $('.stone');
var cn = myParseInt(Math.random()*100);
for(var i=0;i<st.length;i++){
if(cn<=5){
crystalArray[i]=1;
} else {
crystalArray[i]=0;
}
}
return (crystalArray);
}
function playerFood(){
var snum = getId();
if(foodArr[snum]==0&&waterArr[snum]==0&&cirstalArr[snum]==0){
alert('很遗憾，这里什么都没有！');
} else if(foodArr[snum]!=0&&waterArr[snum]!=0){
alert('你获得了面包*'+foodArr[snum]+"，水*"+waterArr[snum]+"！");
} else if(foodArr[snum]!=0&&waterArr[snum]==0){
alert("你获得了面包*"+foodArr[snum]+"！");
} else if(foodArr[snum]==0&&waterArr[snum]!=0){
alert("你获得了水*"+waterArr[snum]+"！");
}
if(cirstalArr[snum]!=0){
alert("恭喜你获得了水晶*"+cirstalArr[snum]+"！");
}
}
}