Expand|Select|Wrap|Line Numbers
- <div class="body">
- <div id="board">
- <div id="bat" class="bat"></div>
- <div id="ball" class="ball"></div>
- </div>
- </div>
I've done CSS For all of them and generated this:
Now, I want the bat to move left and right when I press arrow keys.
Expand|Select|Wrap|Line Numbers
- window.addEventListener("keydown", function (e) {
- switch (e.key) {
- case "ArrowLeft":
- batDir.x = -1;
- batDir.y = 0;
- paintBat(batDir.x, batDir.y);
- break;
- case "ArrowRight":
- batDir.x = 1;
- batDir.y = 0;
- paintBat(batDir.x, batDir.y);
- break;
- }
- })
The logic should be
newBatPosition.x=oldBatPosition.x+batDirection.x
newBatPosition.y=oldBatPosition.y+batDirection.y
But what will do the job of painting newBatPosition.x and newBatPosition.y is what I'm not clear of. I'm not using canvas.
Plus, what'll be the oldBatPosition? I've used CSS to paint them. So, I'm wondering how do I get oldBatPosition coordinates as well.