JavaScriptを使用して矢印キーを使用してオブジェクトを移動する方法

矢印キーを使用して（JavaScriptを使用して作成した）四角形を移動したいと考えています。また、私はキャンバスの終わりに当たったときにそれを止めたい。それ、どうやったら出来るの？私はこれで全く新しいものであり、全く手がかりを持っていません。JavaScriptを使用して矢印キーを使用してオブジェクトを移動する方法

function fillRect() { 
 

 
var canvas = document.getElementById("myCanvas"); 
 
var context = canvas.getContext("2d"); 
 

 
var rectX=10; 
 
var rectY=10; 
 

 
context.rect(rectX,rectY,50,50);   
 
context.fillStyle = "#666666"; 
 
context.fill(); 
 
} 
 

 
    function onkeydown(e) { 
 
    if(e.keyCode==39) {rectX++;} //right arrow 
 
    elseif(e.keyCode==37) {rectX--;} //left arrow 
 
    elseif(e.keyCode==38) {rectY--;} //up arrow 
 
    elseif(e.keyCode==40) {rectY++;} //down arrow 
 
    fillRect(); 
 
} 
 
window.addEventListener("keydown", onkeydown);

#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.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-20 Jessie.J

コードgdrosとあなた自身提供：

フィドル： https://jsfiddle.net/k3akqz3c/1/

// Basic variables 
var canvas; 
var context; 
var rectX = 10; 
var rectY = 10; 

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

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

    // Check if the rect isn't out of bounds, if so: place it back. 
    if (rectX < 0) { 
     rectX = 0; 
    } else if (rectX > 250) { 
     rectX = 250; 
    } 
    if (rectY < 0) { 
     rectY = 0; 
    } else if (rectX > 100) { 
     rectX = 100; 
    } 

    context.fillRect(rectX, rectY, 50, 50); 
} 

function onkeydown(e) { 
    if (e.keyCode == 39) { 
     rectX++; 
    } //right arrow 
    else if (e.keyCode == 37) { 
     rectX--; 
    } //left arrow 
    else if (e.keyCode == 38) { 
     rectY--; 
    } //up arrow 
    else if (e.keyCode == 40) { 
     rectY++; 
    } //down arrow 
    fillRect(); 
} 
window.addEventListener("keydown", onkeydown);

は基本的に、あなたは別の位置に、長方形は、矢印キーのいずれかを押すたびに再作成しています。

出典

2016-09-20 14:45:13 Roberrrt

まず第一に、あなたの四角形の位置を保持する変数を宣言します。たとえば、次のようにcontext.rect(0,0,50,50);で次に

var rectX=0; 
var rectY=0;

このような上記の変数と0,0を置き換える：

context.rect(rectX,rectY,50,50);

は、最後にあなたのウィンドウにキーハンドラを追加します。

を介さ

function onkeydown(e) { 
    if(e.keyCode==39) {rectX++;} //right arrow 
    else if(e.keyCode==37) {rectX--;} //left arrow 
    else if(e.keyCode==38) {rectY--;} //up arrow 
    else if(e.keyCode==40) {rectY++;} //down arrow 
    fillRect(); 
} 
window.addEventListener("keydown", onkeydown);

出典

2016-09-20 13:08:54 gdros

ご協力ありがとうございますが、動作しません。/私の四角形が表示されていません。 –

これをチェックしてくださいhttps://jsfiddle.net/k3akqz3c/ – gdros

ありがとうございます！ –

JavaScriptを使用して矢印キーを使用してオブジェクトを移動する方法

答えて

関連する問題