实现点击移动玩家时屏幕跟随，仅显示可视区域的技术求助

我来帮你搞定这个视口跟随玩家的效果！要实现你想要的「玩家移动时，可视区域跟着走且铺满屏幕」的功能，核心是靠CSS的溢出隐藏和定位，再配合JS调整视口的位置。下面是修改后的完整方案，一步步给你讲清楚：

咱们得给每个元素明确分工：

• .screen：作为玩家的可视窗口，必须铺满整个屏幕，而且要把超出窗口的地图内容藏起来。
• .map：模拟游戏的大地图，尺寸要比屏幕大（比如我设了2000x2000，你可以根据需求改）。
• .player：你的飞船，要能在大地图里自由移动。

直接用下面的CSS替换原来的样式：

body {
  margin: 0; /* 去掉浏览器默认边距，让视口完全占满屏幕 */
  overflow: hidden; /* 防止页面本身出现滚动条 */
}

.map {
  position: relative;
  width: 2000px; /* 大地图的宽度，按需调整 */
  height: 2000px; /* 大地图的高度，按需调整 */
  background: #1a1a2e; /* 给地图加个深色背景，方便看效果 */
}

.screen {
  position: fixed; /* 固定在屏幕上，不随页面滚动 */
  top: 0;
  left: 0;
  width: 100vw; /* 宽度占满整个视口 */
  height: 100vh; /* 高度占满整个视口 */
  overflow: hidden; /* 核心！把超出视口的地图部分隐藏 */
}

.player {
  position: absolute; /* 绝对定位，方便在地图里移动 */
  width: 60px; /* 飞船的尺寸，按需调整 */
  height: 60px;
}

.ship {
  width: 100%;
  height: 100%; /* 让图片填满玩家容器 */
}

原来的代码错误地移动了.screen，咱们应该移动的是玩家飞船，然后让大地图跟着飞船的位置偏移，这样就实现了视口跟随的效果。我还加了逻辑，让点击的位置就是飞船要移动到的目标点，而且移动后飞船会保持在视口中心：

$(function(){
  $('.screen').on('click', function(event){
    // 获取视口的宽高
    const screenWidth = $(this).width();
    const screenHeight = $(this).height();
    // 获取点击位置相对于视口的坐标（不是整个页面的）
    const clickX = event.clientX;
    const clickY = event.clientY;
    
    const $player = $('.player');
    const playerSize = $player.width(); // 飞船的尺寸（假设是正方形）
    
    // 计算飞船要移动到的绝对坐标（在大地图里的位置）
    // 让点击位置对应飞船的中心，所以要减去一半的飞船尺寸
    const targetPlayerX = clickX - playerSize/2;
    const targetPlayerY = clickY - playerSize/2;
    
    // 先让飞船移动到目标位置
    $player.animate({left: targetPlayerX, top: targetPlayerY}, 1000, function(){
      // 飞船移动完成后，调整大地图的位置，让飞船保持在视口中心
      const playerCenterX = $player.offset().left + playerSize/2;
      const playerCenterY = $player.offset().top + playerSize/2;
      
      // 计算大地图需要偏移的量：让飞船中心和视口中心对齐
      const mapOffsetX = (screenWidth/2 - playerCenterX);
      const mapOffsetY = (screenHeight/2 - playerCenterY);
      
      $('.map').animate({left: mapOffsetX, top: mapOffsetY}, 1000);
    });
  });
});

把.map放到.screen里面，这样视口才能正确隐藏超出的地图内容：

<body>
  <div class="screen">
    <div class="map">
      <div class="player">
        <img class="ship" src="https://vignette.wikia.nocookie.net/darkorbit/images/a/a9/Neuergoli.jpg/revision/latest?cb=20120819231510">
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 把上面的JS代码放在这里 -->
</body>

• .screen用fixed定位占满屏幕，overflow: hidden就像一个“取景框”，只显示大地图在框里的部分。
• 我们通过移动大地图（.map）的位置，让飞船始终处于取景框的中心，看起来就像是视口在跟着飞船移动。
• 点击事件里先移动飞船，再调整地图位置，这样动画会更流畅。

内容的提问来源于stack exchange，提问作者Martijn Ebbens