1
私はいくつかのHTML/Javascriptコードを作成しています。私が起こしたい主なことは、矢印キー、その方向。HTMLキャンバス上の正方形をクリアして再描画するプロセス
私がしなければならないことについての私の一般的な考え方は、キーをクリックすると、最初にキャンバスをクリアし、その関数に基づいて異なるx値とy値で再描画します。
私はそれを試しましたが、何が起こっているのは正方形がちょうど消えてしまったからです。私は理由が分かりません。
私はこれをしばらくの間デバッグしようとしています。もし誰かがポインタを持っていれば、私は彼らに愛するでしょう！
<!DOCTYPE html>
<html>
<head>
<title> HTML </title>
<style>
canvas {
border: 1px solid #000000;
}
</style>
</head>
<body>
<center>
<canvas width = "620" height = "620" id = "myCanvas" ></canvas>
</center>
<script src = "script.js" > </script>
</body>
</html>
これは、代わりにこの
context.rect(newX, newY, squareSizeX, squareSizeY);
context.fill(newX, newY, squareSizeX, squareSizeY);
ドゥのごmoveLeftで
document.addEventListener('keydown', function(event) {
if(event.keyCode == 37)
moveLeft();
if(event.keyCode == 39)
moveRight();
if(event.keyCode == 38)
moveUp();
if(event.keyCode == 40)
moveDown();
});
function moveLeft() {
context.clearRect(0, 0, canvas.width, canvas.height);
//Edit X and Y Values
var newX, newY;
newX = squareX + 1;
newY = squareY;
context.rect(newX, newY, squareSizeX, squareSizeY);
context.fill(newX, newY, squareSizeX, squareSizeY);
}
function moveRight() {/* Needs to be Finished */}
function moveUp() {/* Needs to be Finished */}
function moveDown() {/* Needs to be Finished */}
var canvas;
var context;
var squareX, squareY;
var squareSizeX = 75;
var squareSizeY = 75;
function renderToCanvas() {
var didRender = false;
try {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
/* INPUT DRAWING HERE */
//Drawing Square
squareX = canvas.width/2;
squareY = canvas.height/2;
context.rect(squareX, squareY, squareSizeX, squareSizeY);
context.fillRect(squareX, squareY, squareSizeX, squareSizeY);
context.stroke();
/* END DRAWING HERE */
didRender = true;
console.log("Rendered Drawing: " + didRender);
}
catch(err) {
console.log("Rendered Drawing: " + didRender);
console.log(err.message);
}
}
renderToCanvas();
を使用して、パスに取り組んでいるときだけ
context.rect()またはcontext.fill()を使用しています。しかし、別の問題が発生しました。私がもう一度左を押すと、再び動かない？あなたはそれがアクション/キーリスナーに問題があると思いますか？ –これは、それに応じてx座標を更新していないため、まだ実行中ですが、新しいxは更新されていないので、まだそのままのようです。 – Dummy
ええ、それはまだ実行中です。 –