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>
這是JavaScript代碼(對不起,不能很好地格式化,仍然得到的StackOverflow的格式代碼掛起)
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();
它的工作路徑上的工作。但是,我遇到了另一個問題。每當我再次向左按,它不會再運行?你認爲這是行動/關鍵聽衆的問題嗎? –
這是因爲你沒有相應地更新x座標,它仍然在運行,但新的x沒有更新,所以它看起來像只是保持靜止 – Dummy
是的,我只是發現它仍在運行,謝謝! –