Question

我尝试使用向上，向下，向左和向右箭头键在屏幕上移动一个简单的图像。它工作得很好，除了图像一直走出窗外我无法看到。我想要做的是将图像保持在窗口范围内而不是离开它。

这是我的代码：

＆＃13;

let height = $(window).height();
let width = $(window).width();

$(document).keydown(function(key) {
  switch (parseInt(key.which, 10)) {
    // Left arrow key pressed
    case 37:
      if ($('img').position().left > 0) {
        $('img').animate({
          left: "-=20px"
        }, 'fast');
      }
      break;
      // Up Arrow Pressed
    case 38:
      if ($('img').position().top > 0) {
        $('img').animate({
          top: '-=20px'
        }, 'fast');
      }
      break;
      // Right Arrow Pressed
    case 39:
      if ($('img').position().left < width) {
        $('img').animate({
          left: '+=20px'
        }, 'fast');
      }
      break;
      // Down Arrow Pressed
    case 40:
      if ($('img').position().top < height) {
        $('img').animate({
          top: '+=20px'
        }, 'fast');
      }
      break;
  }
});

＆＃13;

body {
  width: 100%;
  height: 100%;
  background: blue;
  overflow: hidden;
  /*This is the solution*/
}

img {
  position: relative;
  left: 0;
  top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img src="http://pngimg.com/uploads/mario/mario_PNG129.png" />

＆＃13;

Answer 1

好像你只需再考虑一次计算。以正确的移动为例，如果图像的当前右侧位置距离屏幕边缘5px会发生什么？然后($('img').position().right > width)将计算为true，它将移动20px，将其从屏幕上移开15px。

所以，你只需要考虑这个潜力。

if($('img').position().right > 0){
    distance = ( ($('img').position().left - width) < 20 ) ? ($('img').position().left - width) : 20;
    $('img').animate({left: "+="+distance+"px"}, 'fast');
}

我们在这里说，如果图像的当前位置距离右边缘小于20px，则仅移动该差异，否则将其移动20px。

需要在底部应用类似的逻辑，以确保图像的移动速度不会超过屏幕的高度。

我建议在底部和左侧应用相同的逻辑。它当前没有离开屏幕的原因是因为你从0,0开始并一次移动20px。它总会回到0,0。但是，如果你必须将它向右移动12px以保持在界限范围内，那么当你将其移回时，你可能会在左侧遇到同样的问题。希望这是有道理的。

Answer 2

我希望我的代码能为您带来一些线索

    $(document).ready(function(){
//alert("This page has loaded!");
//Below is code which hides a paragraph when the button is clicked
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
//let width=Math.max($(document).width(), $(window).width());
//let height=Math.max($(document).height(), $(window).height());
let height=$(window).height();
let width=$(window).width();

var w =document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
   
//Below is code which allows for the character to move - why not try craft your own
//version?
$(document).keydown(function(key) {
//document.write(Math.max($(document).height(), $(window).height()));
// document.write(Math.max($(document).width(), $(window).width()));
switch(parseInt(key.which,10) ) {
// Left arrow key pressed
case 37:
if($('img').position().left>1 ){
$('img').animate({left: "-=70px"}, 'fast');}
break;
// Up Arrow Pressed
case 38:
    if($('img').position().top >1 ){
$('img').animate({top: '-=20px'},'fast');}
break;
// Right Arrow Pressed
case 39:
if($('img').position().left<(w-185) ){
$('img').animate({left: '+=70px'},'fast');}
break;
// Down Arrow Pressed
case 40:
    if($('img').position().top<(h-185) ){
$('img').animate({top: '+=70px'},'fast');}

break;
}
});
});

img {
position: relative;
left: 0;
top: 0;
right: 0;
}
body{
   width: 100%;
height: 100%;
background: cyan;
overflow: auto; 
}

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Including jQuery -->
<script type='text/javascript' src="script.js"></script> <!-- Including the scripting file -->
</head>
<body>
<img
src="http://staublicht.net/wordpress/wp-content/uploads/2011/08/walk_animation.gif"/>
</body>
</html>

如何使用JQuery

2 个答案: