HTML5画布平铺滚动仅在屏幕末尾

问题描述

您好，我正在研究基于图块的JavaScript游戏，以了解有关游戏开发的更多信息。

我希望播放器移至屏幕末端以激活滚动功能。

现在，它始终会在播放器位于中间的情况下移动相机。

我搜索了一段时间，但找不到正确方向的路。

        // Get Canvas
        var ctx = document.getElementById('canvas').getContext('2d');
        //Tile Grösse
        var tile = 60;
        //Map-Grösse (in Tiles)
        var mapSize = 20;
        //Map
        var map = [
            1,1,1
        ];
        //Track movement
        var steuerung = {
          moveUp: false,moveRight: false,moveBottom: false,moveLeft: false
          };
        //Player
        var player = {
          x    :300,y    :300
        };
        //Camera
        var kamera = {
          x    :0,y    :0
        }
        // Loop
        function loop() {
          // Clear Canvas
          ctx.clearRect(0,canvas.width,canvas.height);
          // 2d loop
          for(y=0;y<mapSize;y++){
            for(x=0;x<mapSize;x++) {
              // Change color for map field type
              switch(map[((y*mapSize)+x)]) {
                case 0:
                  ctx.fillStyle = 'green';
                  break;
                case 1:
                  ctx.fillStyle = 'gray';
                  break;
              }
              // create tiles
              ctx.fillRect(x*tile-kamera.x,y*tile-kamera.y,tile,tile);
            }
          }
          //Create Player
          ctx.fillStyle = 'black';
          ctx.fillRect(player.x,player.y,25,25);
          //movement
          if(steuerung.moveLeft == true) {
            kamera.x -= 2;
          } else if(steuerung.moveRight == true) {
            kamera.x += 2;
          } else if(steuerung.moveUp == true) {
            kamera.y -= 2;
          } else if(steuerung.moveBottom == true) {
            kamera.y += 2;
          }
          requestAnimationFrame(loop);
      }
        // Setze Game-Funktion in Loop
        requestAnimationFrame(loop);


        // If Keys get pressed
        document.onkeydown = function(evt) {
          switch (evt.keyCode) {
            case 37:
              steuerung.moveLeft = true;
              console.log(player.x);
              break;
            case 38:
              steuerung.moveUp = true;
              break;
            case 39:
              steuerung.moveRight = true;
              console.log(player.x);
              break;
            case 40:
              steuerung.moveBottom = true;
              break;
          }
        }
        //If Keys not pressed
        document.onkeyup = function(evt2) {
          switch (evt2.keyCode) {
            case 37:
              steuerung.moveLeft = false;
              break;
            case 38:
              steuerung.moveUp = false;
              break;
            case 39:
              steuerung.moveRight = false;
              break;
            case 40:
              steuerung.moveBottom = false;
              break;
          }
        }

      body {
        background-color: black;
      }
      #wrapper {
        width: 100%;
        height: 90vh;
        text-align: center;
      }
      #canvas {
        background-color: black;
        border: 1px solid blue;
        margin: 0 auto;
        margin-top: 10vh;
      }

    <div id="wrapper"> <canvas width="600" height="600" id="canvas"></canvas></div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）