Question

我正在为我的学校项目制作游戏。有一片森林和一些隐藏的种子。森林角色定位种子。然后回答“数学问题”，并收集种子。一旦收集到5粒种子，他就会进入2级。

一切正常。除了，（a）我在隐藏/显示方面遇到问题 - 如果ForestCharacter移动了名为SeedAdd和mathAdd的DIV，我希望这两个DIV都变得不可见（b）并且还希望移除拖拽

感谢您的帮助

JSFiddle代码如下：

HTML ：

 <body onLoad="hostfunction();">
 <div id=level1> 
 <div id=level1Box><h4>Level 2 - LOCKED</h4></div>

<!-Main HTML->
<div id="heading">
<h3 align=center>Find Seed | Answer Math Question | Get Crystal</h3></div>
<div id="forestCharacter"></div>

<!-Math code->
<p align=center><font color=pink size=4px><span id="resultAdd" align="center"></span></font>
<div id='ContainerAdd'><div id="SeedAdd" style="visibility: hidden"></div>         </div>
<div id=mathAdd style="visibility: hidden"><p id="problemAdd"><b>Problem:    </b><span id="num3"></span><span class="plus">+</span><span id="num4"></span>  </p>
<form method="post" onsubmit="checkMathAdd(); return false;"><input   type="text" id="answerAdd" placeholder="type answer"/><input type="submit"   value="Check"/></form>
</div>
<div id=seedWinAdd style="visibility: hidden">
</div>
<div id=level2 style="visibility: visible">
</body>

Javascript和Jquery代码：

 $(function () {
 var pane = $('#level1'),
 box = $('#forestCharacter'),
 wh = pane.width() - box.width(),
 wv = pane.height() - box.height(),
 d = {},
 x = 5;

function newh(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > wh ? wh : n;
}

function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > wv ? wv : n;
}

$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
box.css({
    left: function(i,v) { return newh(v, 37, 39); },
    top: function(i,v) { return newv(v, 38, 40); }
});
wh = pane.width() - box.width();
wv = pane.height() - box.height();
}, 20);
});

  function collisionAdd($forestCharacter, $ContainerAdd) {
  var x1 = $forestCharacter.offset().left;
  var y1 = $forestCharacter.offset().top;
  var h1 = $forestCharacter.outerHeight(true);
  var w1 = $forestCharacter.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $ContainerAdd.offset().left;
  var y2 = $ContainerAdd.offset().top;
  var h2 = $ContainerAdd.outerHeight(true);
  var w2 = $ContainerAdd.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;        
  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return "Find the FIRST Seed"
  ContainerAdd.style.visibility = 'visible';
  SeedAdd.style.visibility = 'visible';
  mathAdd.style.visibility = 'visible';
  return "Good Job! Answer the Math question";
  }
  window.setInterval(function()         {$('#resultAdd').text(collisionAdd($('#forestCharacter'),    $('#ContainerAdd')));}, 10);
  $('#forestCharacter,#ContainerAdd').draggable();
  $( function() {
  $( "#forestCharacter, #ContainerAdd" ).draggable();
   });

  $(document).ready(function(){
  $("#ContainerAdd").hover(function () {
  $("#ContainerAdd div").css("visibility","hidden");
  },
  function () {
    $("#ContainerAdd div").css("visibility","visible");
  });
  });
 function randomNumAdd() {
 var num3 = document.getElementById("num3");
 var num4 = document.getElementById("num4");
 num3.innerHTML = Math.floor(Math.random()*50+1);
 num4.innerHTML = Math.floor(Math.random()*50+1);
  }

 function checkMathAdd() {
var num3 = parseInt(document.getElementById("num3").innerHTML, 10);
var num4 = parseInt(document.getElementById("num4").innerHTML, 10);
var answerAdd = parseInt(document.getElementById("answerAdd").value, 10);
if (answerAdd === num3 + num4) {
    alert("Great. You have got the Seed");
    document.getElementById("seedWinAdd").style.visibility = "visible";
    document.getElementById("forestCharacter").style.position = "absolute";
document.getElementById("forestCharacter").style.left = "535px";
document.getElementById("forestCharacter").style.top = "200px";
    var element = document.getElementById('ContainerAdd');
    element.parentNode.removeChild(element);
    document.getElementById("mathAdd").style.visibility = "hidden";
    document.getElementById("resultAdd").style.visibility = "hidden";
      } else {
    alert(answerAdd + " is incorrect. Try again" );
        }
document.getElementById("answerAdd").value="";
randomNumAdd();
}

function hostfunction() {

randomNumAdd();
collisionAdd();

}

CSS ：

 #level1 {position:fixed;width:600px;height:400px;background-image: url("https://www.dropbox.com/s/nrarfa7k5lwqtq1/forest.jpg?raw=1");background-size: 100%;background-repeat: no-repeat;}
 #level1Box {width:600px;height:50px;background-color: purple;position:fixed;top:280px}
 #forestCharacter {width: 48px; height: 71px; position:fixed;top: 200px; left:535px;background:url("https://www.dropbox.com/s/vfrh9ppcp6v4tlt/ForestCharacter.gif?raw=1"); background-size: 100% 100%;background-repeat: no-repeat;}
 #heading {background-color:;width:450px;height:30px;margin:auto}
 h2 {color: yellow;font-family: "Arial";color:red;}
 h3 {color: yellow;font-family: "Calibri";}
 h4 {color:black;font-family: "Arial";text-align:center}
 body {background-color:black}
 /* Math Addtion part of CSS */
 #ContainerAdd  {width:60px;height:60px;position:fixed;top:200px;left:195px;border:1px solid red}
 #SeedAdd {width:60px;height:60px;    background:url("https://www.dropbox.com/s/rdtjj8rj8td8i1h/SeedAdd.png?raw=1");background-size: 100% 100%;background-repeat: no-repeat;}
 #mathAdd {width:200px;height:100px;background:orange;position:fixed;left:10px;top:90px}
 #seedWinAdd {width:40px;height:61px;background:red;position:fixed;left:550px;top:20px;background:url("https://www.dropbox.com/s/amvwpx81xy2q2fa/seedwinAdd.jpg?raw=1");background-size: 100%;background-repeat: no-repeat;}
#resultAdd {background:;width:300px;position:fixed;top:65px;right:190px;}

我的游戏项目 - 在箭头键移动时显示隐藏DIV

0 个答案: