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畫布：如何設置邊框限制？

回答

相關問題