Question

我一直在搜索，仍然找不到如何将移动的对象保持在画布边界内的解决方法。我们试图在每个箭头键移动函数中添加一个if语句，但这似乎并未完全起作用。我不确定这是否是处理游戏移动的正确方法，因为我们移动的图像是在HTML中定义的，而不是在javascript中定义的变量。

var width = 80;
var height = 40;

function leftArrowPressed() {
  var element = document.getElementById("image1");
    element.style.left = parseInt(element.style.left) - 17+'px';
  }
  
  

  function rightArrowPressed() {
  var element = document.getElementById("image1");
    element.style.left = parseInt(element.style.left) + 25 +'px';
  }

  

  function upArrowPressed() {
  var element = document.getElementById("image1");
  element.style.top = parseInt(element.style.top) - 17 + 'px';
  }

  function downArrowPressed() {

  var element = document.getElementById("image1");
  element.style.top = parseInt(element.style.top) + 17 + 'px';
  }

  function moveSelection(evt) {
      switch (evt.keyCode) {
          case 37:
          leftArrowPressed();
          break;
          case 39:
          rightArrowPressed();
          break;
          case 38:
          upArrowPressed();
          break;
          case 40:
          downArrowPressed();
          break;
          }
      };

function docReady()
{

window.addEventListener('keydown', moveSelection);
}

var canvas = new fabric.Canvas('c', { selection: false });
var grid = 50;

// create grid

for (var i = 0; i < (600 / grid); i++) {
  canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: false }));
  canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
}

// add objects

canvas.add(new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));

canvas.add(new fabric.Circle({ 
  left: 300, 
  top: 300, 
  radius: 50, 
  fill: '#9f9', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));

// snap to grid

canvas.on('object:moving', function(options) { 
  options.target.set({
    left: Math.round(options.target.left / grid) * grid,
    top: Math.round(options.target.top / grid) * grid
  });
});

canvas.on('object:moving', function (e) {
  var obj = document.getElementById("image1");
   // if object is too big ignore
  if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
      return;
  }        
  obj.setCoords();        
  // top-left  corner
  if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
      obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
      obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
  }
  // bot-right corner
  if(obj.getBoundingRect().top+obj.getBoundingRect().height  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width  > obj.canvas.width){
      obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
      obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
  }
});

body::-webkit-scrollbar {
width: 1em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
body {
overflow

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="GridEXEMovement.js"></script>
    <title>Test Move Object</title>
    <link rel="stylesheet" href="dimRoom.css">
  </head>
  
  <body onload="docReady()" onkeydown="" onkeyup="">
    <!-- uncomment this div when you want to implement the green desktop Div -->
    <nav>
        
      <ul>
      
      <li><button id="zeldaDeskTop">deskTop</button></li>
      <span>|</span>
      <li><button id="zeldaBrowser">browser</button></li>
      <span>|</span>
      <li><button id="zeldaExe">.exe</button></li>
      <span>|</span>
      <li><button id="zeldaGrid">grid</button></li>
     
      </ul>
  </nav>
  <div id="screen">
    
    <div id="content"></div>
    <style>
body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}


html {
  height: 100%;
}
 
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
      body {
        overflow-x: hidden;
      }

html {
  height: 100%;
}
#content{
    background-color: transparent;
    background-image:       linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  height:100%;
  background-size:50px 50px;
}

.follow-me {
  position:absolute;
  bottom:10px;
  right:10px;
  text-decoration: none;
  color: #FFFFFF;
}


         </style> 
  </div>
  <img id="image1" src="https://www.bigbluebubble.com/wp-content/uploads/2017/07/PixelDodggers_Classic8-bitExperience.png" style="position: absolute; right: 100; left:980; top:300; z-index: 2; margin:0;" height="50" width="50">
  <img id="DigitalCave" src="http://pixelartmaker.com/art/8fb5394537feede.png" style="position:absolute; left:560; top:146; z-index: 1;" height="30" width="40">
  <img id="DataNode" src="http://pixelart.studio/Gallery/Image/100b0c98-d22d-4ffc-868a-9862aad1da4a?type=png" style="position:absolute; left:360; top:544; z-index: 1;" height="30" width="40">
  <img id="Fire" src="https://cdn.theatlantic.com/assets/media/mt/science/flame-330.png" style="position:absolute; left:510; top:537; z-index: 1;" height="30" width="40">
  <script type="text/javascript" src="dimRoom.js"></script>
</body>

</html>

Answer 1

创建速度变量：

var yspeed = 17;
var xspeed = 25;

顺便说一句，你在那里犯了一个错误。您的横向速度各有不同。

25px的双向速度应该相同。

如果您的画布宽度为50px，则播放器将以17px和25px的速度在画布上快速移动。

然后检查速度是否等于零

if (speed !== 0) { // you are moving your character
    // put your JavaScript you just created for wish and height checking here
}

另外，为了检查是否按过箭头，在按以下方式使用它们时还返回一个布尔值：

function leftArrowPressed() {
  var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - xspeed+'px';
return true;
  }



  function rightArrowPressed() {
  var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + xspeed +'px';
return true;
  }



  function upArrowPressed() {
  var element = document.getElementById("image1");
  element.style.top = parseInt(element.style.top) - yspeed + 'px';

return true;

  }

  function downArrowPressed() {

  var element = document.getElementById("image1");
  element.style.top = parseInt(element.style.top) + yspeed + 'px';
  return true;
  }

我希望这会有所帮助。

Answer 2

我会加快x和y的速度，并为播放器执行以下操作：

player = {
    x: 0,
    y: 0,
    width: 50,
    height: 50,
    xspeed: 0,
    yspeed: 0
};

然后我将执行以下if语句：

if (player.x < 0 || player.x > canvas.width) {
    player.x = 0;
    player.xspeed = 0;
}
if (player.y < 0 || player.y > canvas.height) {
    player.y = 0;
    player.yspeed = 0;
}

这应该使播放器可见。如果我错了请纠正我。

如何使我的游戏角色留在画布中？

2 个答案: