如何在使用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击中画布结束时停止对象？

回答

相关问题