Question

我是编码和尝试制作游戏的新手，我沿着x和y轴移动我的div。当我运行代码时，我在marginLeft变量和marginTop中得到一个错误。我包含了这些变量，因为我希望连续的keydown笔划继续移动div。如果可能，我想仅使用jquery进行编码。

＆＃13;

var player = $('#player');
var marginleft = $('#player').offset().left;
var margintop = $('#player').offset().top;


function movePlayer(e) {
  if (e.keydown==39) {
    marginleft +=2;
    player.css('left', marginleft + 'px');
  }
  if (e.keydown==37) {
    marginleft -=2;
    player.css('left', marginleft + 'px');
  }
  if (e.keydown==40) {
    margintop +=2;
    player.css('top', margintop + 'px');
  }
  if (e.keydown==38) {
    margintop -=2;
    player.css('top', margintop + 'px');
  }
}

＆＃13;

#player {
  width: 50px;
  height: 50px;
  background-color: red;
  left: 0px;
  top: 0px;
  position: absolute;
}
body {
  height: 100%;
  width: 100%;
  background-color: green;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>

＆＃13;

Answer 1

我修改它以在事件侦听器中使用e.which时，您的代码运行正常。我还将事件监听器附加在snippit的底部。

在使用箭头键之前点击游戏内部：https://jsfiddle.net/CoryDanielson/kchrv4t4/

var player = $('#player');
var marginleft = $('#player').offset().left;
var margintop = $('#player').offset().top;

function movePlayer(e) {
  if (e.which==39) {
    marginleft +=2;
    player.css('left', marginleft + 'px');
  }
  if (e.which==37) {
    marginleft -=2;
    player.css('left', marginleft + 'px');
  }
  if (e.which==40) {
    margintop +=2;
    player.css('top', margintop + 'px');
  }
  if (e.which==38) {
    margintop -=2;
    player.css('top', margintop + 'px');
  }
}

$(document.body).on('keydown', movePlayer);

使用jQuery时应该使用e.which。浏览器和密钥代码之间存在很多差异。 which是确定密钥代码的安全方法。 https://api.jquery.com/event.which/

Answer 2

当我运行代码时，我在marginLeft变量和marginTop
中出现错误

这个phare让我想你正在定义和初始化文档之外的变量......

如果您只需要在可见文档区域内移动div，则可以使用以下解决方案：

＆＃13;

//
// declare global variables and functions outside the
//  document ready
//
var player;
var marginleft;
var margintop;
var docWidth;
var docHeight;

function movePlayer(e) {
  if (e.which==39) {
    if (marginleft >= docWidth) {
      return;
    }
    marginleft +=2;
    player.css('left', marginleft + 'px');
  }
  if (e.v==37) {
    if (marginleft<=0) {
      return;
    }
    marginleft -=2;
    player.css('left', marginleft + 'px');
  }
  if (e.which==40) {
    if (margintop >= docHeight) {
      return;
    }
    margintop +=2;
    player.css('top', margintop + 'px');
  }
  if (e.which==38) {
    if (margintop<=0) {
      return;
    }
    margintop -=2;
    player.css('top', margintop + 'px');
  }
}

//
// On document ready: set the variables and
// add the event listener for keydown event
//
$(function () {
  player = $('#player');
  marginleft = $('#player').offset().left;
  margintop = $('#player').offset().top;
  docWidth = $(document).width() - player.width();
  docHeight = $(document).height() - player.height();

  $(document).on('keydown', function(e) {
    movePlayer(e);
  });
});

＆＃13;

#player {
  width: 50px;
  height: 50px;
  background-color: red;
  left: 0px;
  top: 0px;
  position: absolute;
}
body {
  height: 100%;
  width: 100%;
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="player"></div>

＆＃13;

使用箭头在窗口内移动Div

2 个答案: