TheOrtus TheOrtus - 7 months ago 20
Javascript Question

Using JavaScript Animation to Move Rectangle With Arrow Keys

I'm trying to move a rectangle in a canvas element, and haven't had any luck. This is my code so far. I want to do it in PURE JavaScript, not jQuery or any other library.

My JavaScript:

window.onload = beginningMovement; // load beginning movement

function beginningMovement() {
var elem = document.getElementById("rectangle");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 203) {
clearInterval(id);

//Color funcs
setTimeout(black, 0);
setTimeout(lightgray, 500);
setTimeout(black, 1000);
setTimeout(lightgray, 1500);
setTimeout(black, 2000);
setTimeout(lightgray, 2500);

function black() {
var color = document.getElementById('container').style.backgroundColor = "black";
}

function lightgray() {
var color = document.getElementById('container').style.backgroundColor = "lightgray";
}
//End of color funcs


} else {
pos++;
elem.style.top = pos + 'px';
elem.style.middle = pos + 'px';
}
}
}

//Arrow switching
var X = 40;
var Y = 20;

function switchKey(event) {
Key = event.keyCode;

myCanvas.fillstyle = "white";
myCanvas.filRect(X, Y, 50, 50);
}

switch(key) {
case 37: X -=5;
break;
case 37: Y -=5;
break;
case 37: X +=5;
break;
case 37: Y +=5;
}

myCanvas.fillstyle = "blue";
myCanvas.filRect(X, Y, 50, 50);


HTML:

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">

#container {
width: 450px;
height: 400px;
border: 5px solid black;
background: lightgray;
}

#rectangle {
height: 50px;
width: 150px;
background: cyan;
margin-left: 150px;
margin-top: 160px;
position: absolute;
}

</style>
</head>
<body onkeyup="switchKey(event)">
<div id="container">
<div id="rectangle">

</div>
</div>
</body>
</html>


I've been at this for hours and haven't had any luck. I would appreciate it if someone could help me, and get this done soon.

Answer

There were a lot of issues with you code and I eventually thought it would be easier to remake a simple version for you to look at. If you really want to stick with your version, please check any browser console for errors and you'll see the issues I'm seeing. Some functions aren't yet available onload, there is no key variable, yet there is a Key variable. There were other issues, too, regarding variable and function scope.

Here's a new version for you to look at: http://codepen.io/antibland/pen/ONwEBE

It's not my finest work, but it's a step in the right direction for you. Instead of setInterval, you should be using requestAnimationFrame to do the redraw. It's much more performant (more on that here if you're interested).

In my demo, a real <canvas> element is used. The smaller rectangle is added to it. I figured you intended to use the real canvas since you included a myCanvas variable in your code. If not, apologies. Either way, you'll probably want to add bounds checking in there, to keep the small rectangle from moving beyond the walls.

Good luck!

Comments