HTML画布：如何设置边框限制？

我已经创建了一个程序，它可以移动的矩形块上，下，右，和画布内使用瓦特，一个，小号和d键左。我很难弄清楚如何使块不超出画布的边界，并且只能限制在画布的边界内。HTML画布：如何设置边框限制？

这里是我的代码为画布的一部分：

<html> 
<head> 
    <script> 
    var positionX=0; 
    var positionY=0; 

    window.addEventListener("keydown", onKeyPress, true); 

    function draw(){ 
     var canvas=document.getElementById("canvas_c"); 
     var context=canvas.getContext("2d"); 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     context.fillStyle="green"; 
     context.fillRect(positionX, positionY, 100, 100); 
     context.strokeStyle = 'black'; 
     context.stroke(); 
    } 
    function onKeyPress(e){ 
     if (e.keyCode==87){ 
      positionY-=15; 
     } 
     if (e.keyCode==83){ 
      positionY+=15; 
     } 
     if (e.keyCode==68){ 
      positionX+=50; 
     } 
     if (e.keyCode==65){ 
      positionX-=50; 
     } 
     draw(); 
     } 
    </script> 
</head> 
<body> 
    <div id="firstDiv"> 
     <canvas id="canvas_c" width="1000" height="500" style="border: 1px solid black;"> </canvas> 

    </div> 
</body>

来源

2016-01-22 user1049876

通过消除你的标题，或以其他方式编辑问题，我们不知道你的问题是，这会张贴，或者应该是，删除，除非你解决这个问题。 – Rob

你为什么删除JavaScript代码？你所做的破坏性编辑导致这个问题变得毫无用处。您提出的问题旨在成为其他人发布后的参考和资源。通过删除内容和上下文，您正在对您的帖子**和**造成伤害，导致您错过了潜在的声誉。请放回代码，以便您的问题有意义。 – zero298

下面是基本的边界尊重运动功能的伪代码：

// assuming this block object: var block={x:10,y:10,width:20,y:20}; 
function goLeft(){ if(block.x>0){block.x--;} } 
function goUp(){ if(block.y>0){block.y--;} } 
function goRight(){ if(block.x<(canvas.width-block.width)){block.x++;} } 
function goDown(){ if(block.y<(canvas.height-block.height)){block.y++;} }

[加法：这里的代码基于你添加到你的问题的代码]

警告：未经测试的代码...可能需要调整！ :-)

// save the canvas width & height at the top of the app 
var canvas=document.getElementById("canvas1"); 
var cw=canvas.width; 
var ch=canvas.height; 

function onKeyPress(e){ 
    if (e.keyCode==87){ 
     positionY=Math.max(0,positionY-15); 
    } 
    if (e.keyCode==83){ 
     positionY=Math.min(cw-100,positionY+15); 
    } 
    if (e.keyCode==68){ 
     positionX=Math.min(ch-100,positionX+50); 
    } 
    if (e.keyCode==65){ 
     positionX=Math.max(0,positionX-50); 
    } 
    draw(); 
}

来源

2016-01-22 03:35:11 markE

在我的代码中，我使用'function draw（）'来创建矩形块。我如何能够将伪代码实现到我已有的代码中？我只是把我的完整的HTML代码放在我的问题中进行澄清。 – user1049876

我已附加到我的答案，以显示如何重构您的代码。我离开了测试和调试给你......祝你的项目顺利！ – markE

我很感激你的帮助！我只是有一个问题与代码。变量cw和ch的意义是什么？它们为代码做了什么？该块不再能够移动，所以我只是想澄清。谢谢！ – user1049876

HTML画布：如何设置边框限制？

回答

相关问题