如何在使用JavaScript擊中畫布結束時停止對象？

我有使用javascript創建的這個矩形，我可以用箭頭鍵移動它。到現在爲止還挺好。現在我的問題是，我想讓它停止在畫布的結尾處。我不希望它能夠在畫布外消失。我怎麼做？如何在使用JavaScript擊中畫布結束時停止對象？

這裏是我的代碼：

var canvas; 
 
var context; 
 
var rectX=10; 
 
var rectY=10; 
 

 
function fillRect() { 
 
context.beginPath(); 
 
context.fillStyle = "#ffffff"; 
 
context.fillRect(0,0,1000+canvas.width,1000+canvas.height); 
 

 
context.beginPath(); 
 
context.fillStyle = "#666666"; 
 
context.fillRect(rectX,rectY,50,50);   
 
} 
 

 

 
function onkeydown(e) { 
 
if(e.keyCode==39) {rectX++;} //höger pil 
 
else if(e.keyCode==37) {rectX--;} //vänster pil 
 
else if(e.keyCode==38) {rectY--;} //uppåt pil 
 
else if(e.keyCode==40) {rectY++;} //nedåt pil 
 
fillRect(); 
 
} 
 

 
window.addEventListener("keydown", onkeydown); 
 

 

 
window.onload = function() { 
 
canvas = document.getElementById("myCanvas"); 
 
context = canvas.getContext("2d"); 
 
fillRect(); 
 

 
}

#myCanvas { 
 
margin: auto; 
 
display: block; 
 
width: 80%; 
 
height: 400px; 
 
background-color: white; 
 
border: 3px solid black; 
 
}

<!-- Jessica Odefjord --> 
 
<!DOCTYPE HTML> 
 
\t <html lang="sv"> 
 
\t \t <head> 
 
\t \t \t <meta charset="utf-8"> 
 
\t \t \t <link rel="stylesheet" type="text/css" href="inlämningsuppgift_javascript_jessicaodefjord.css" /> 
 
\t \t \t <script type="text/javascript" src="inlämningsuppgift_javascript_jessicaodefjord_2.js"></script> 
 
\t \t \t <title>Flytta rektangeln</title> 
 
\t \t </head> 
 
\t \t \t <body> 
 
\t \t \t \t <header> 
 
\t \t \t \t \t <h1>Flytta rektangeln</h1> 
 
\t \t \t \t \t <h2>Flytta runt rektangeln med hjälp av piltangenterna</h2> 
 
\t \t \t \t </header> 
 
\t \t \t \t \t <main> 
 
\t \t \t \t \t \t <section id="firstsection"> 
 
\t \t \t \t \t \t \t <h3> 
 
\t \t \t \t \t \t \t </h3> 
 
\t \t \t \t \t \t </section> 
 
\t \t \t \t \t \t \t <canvas id="myCanvas"> 
 
\t \t \t \t \t \t \t </canvas> 
 
\t \t \t \t \t </main> 
 
\t \t \t </body> 
 
\t </html>

來源

2016-09-21 Jessie.J

邊注：您的代碼段不會（至少對我來說...）工作。它顯示'TypeError：畫布是空':( – Daneel

感謝您指出了！也許它現在的作品？:) –

是的它的確如此！ :) – Daneel

這可能不是最有效的方式做到這一點，但你可以在onkeydown檢查動作會或不會把你的矩形遠，然後只在安全的情況下移動它。

編輯：這樣的事情應該做的伎倆:)

function onkeydown(e) { 
    if(e.keyCode==39 && rectX+50 < canvas.width) {rectX++;} //höger pil 
    else if(e.keyCode==37 && rectX > 0) {rectX--;} //vänster pil 
    else if(e.keyCode==38 && rectY > 0) {rectY--;} //uppåt pil 
    else if(e.keyCode==40 && rectY+50 < canvas.height) {rectY++;} //nedåt pil 
    fillRect(); 
}

來源

2016-09-21 06:34:21 Daneel

感謝您的幫助！ :)但是我必須承認，我對這個都很陌生。那麼你能幫我展示一下你的意思嗎？ :) –

此代碼將字符在畫布上的位置以及畫布的邊界作爲結束參數。當您按下任何設計的按鍵時，字符將移動，而位置不是最終的像素。 –

對不起，我不明白你的意思？「角色會移動，而位置不是最後一個像素」？ – Daneel

如何在使用JavaScript擊中畫布結束時停止對象？

回答

相關問題