I have encountered a problem with the positioning of elements, specifically with the 'left' property. I've designed a rectangular block using CSS and rotated it by 0.17 radians in JavaScript. Now, my aim is to make the block move diagonally across the screen at a rate of 3 pixels every 20 milliseconds. Using trigonometry and Pythagorean theorem, I calculated that it should move 0.5075470472px to the left and 2.956754301px upwards every 20ms.
This is how I structured my code:
<html lang='en'>
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='.css'>
</head>
<body>
<div id='block'></div>
<script src='.js'></script>
</body>
</html>
CSS:
#block {
width: 19px;
height: 31px;
position: absolute;
background-color: grey;
}
JavaScript:
var block = document.getElementById('block');
block.style.left = '0px';
block.style.top = '500px';
block.style.transform = 'rotate(0.17rad)';
setInterval(function() {
block.style.left = (parseInt(block.style.left) + 0.5075470472) + 'px';
block.style.top = (parseInt(block.style.top) - 2.956754301) + 'px';
}, 20);
Although the block successfully moves upward, it fails to move horizontally. Any suggestions on what might be causing this issue?