자바 스크립트를 사용하여 만든이 사각형이 있고 화살표 키로 이동할 수 있습니다. 여태까지는 그런대로 잘됐다. 이제 내 문제는 캔버스 끝을 칠 때 멈추기를 원한다는 것입니다. 캔버스 밖에서 사라지는 것을 원하지 않습니다. 어떻게하나요?
내 코드는 다음과 같습니다.
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>이것은 아마도 가장 효율적인 방법은 아니지만 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();
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다