Question

我正在使用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> 
	<html lang="sv">
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" type="text/css" href="inlämningsuppgift_javascript_jessicaodefjord.css" />
			<script type="text/javascript" src="inlämningsuppgift_javascript_jessicaodefjord_2.js"></script>
			<title>Flytta rektangeln</title>
		</head>
			<body>
				<header>
					<h1>Flytta rektangeln</h1>
					<h2>Flytta runt rektangeln med hjälp av piltangenterna</h2>
				</header>
					<main>
						<section id="firstsection">
							<h3>
							</h3>
						</section>
							<canvas id="myCanvas">
							</canvas>
					</main>
			</body>
	</html>

Answer 1

这可能不是最有效的方法，但您可以检查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();
}

如何使用JavaScript命中画布结束时停止对象？

1 个答案: