Question

我创建了一个程序，可以使用 w ， a ， s <在画布内向上，向下，向右和向左移动矩形块/ kbd>和 d 键。我很难弄清楚如何让块不超出画布的边界，并且仅限于保留在其中。

以下是我的画布代码的一部分：

<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>

Answer 1

这是关于运动功能的基本边界的伪代码：

// 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();
}

HTML Canvas：如何设置边框限制？

1 个答案: