如何使用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

與經歷：

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

最後你的窗口上添加一鍵處理程序代碼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

首先申報，將握住你的矩形的位置變量。例如：

var rectX=0; 
var rectY=0;

然後在context.rect(0,0,50,50);有這樣的上述變量代替0,0：

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使用箭頭鍵移動對象

回答

相關問題