Java How to paint an element in screen using javascript?

AI Thread Summary
To enable the bat to move left and right using arrow keys in a web-based game, the code provided listens for keydown events and updates the bat's direction based on the pressed key. The logic for updating the bat's position involves calculating the new coordinates by adding the current direction to the old position. However, the challenge lies in determining the old position of the bat, which is not straightforward since the bat is styled with CSS rather than using a canvas. The discussion highlights that to achieve smooth movement, the bat's position should be updated by modifying the CSS properties for 'bottom' and 'left' directly. This requires the bat element to be absolutely positioned within a relatively positioned parent, contrasting with the CSS grid layout used in previous projects, which is not suitable for this type of game mechanics.
shivajikobardan
Messages
637
Reaction score
54
TL;DR Summary
paint element in javascript
JavaScript:
<div class="body">
    <div id="board">
      <div id="bat" class="bat"></div>
      <div id="ball" class="ball"></div>
    </div>
  </div>

This is my HTML.
I've done CSS For all of them and generated this:
pFgfWPrgsTpelep9BMMcp24Uw8Qw0vuKJbvqH_5RBTCLwd7khQ.png

Now, I want the bat to move left and right when I press arrow keys.

JavaScript:
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;

  }
})

My goal is to paint the bat at new position. I'm wondering how to do it.

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.

I just made a similar project using tutorial and it's just disheartening that I can't make this project.

 
Technology news on Phys.org
Normally we would do this by changing the bottom and left CSS styles on the bat element: this relies on the bat and ball being absolutely positioned children of a (relatively positioned) parent element rather than the CSS grid based rendering you used for Snake (which won't work for the smooth motion you need for bat and ball games).
JavaScript:
batElement.style.bottom = batPosition.y;
batElement.style.left = batPosition.x;
 
Thread 'Is this public key encryption?'
I've tried to intuit public key encryption but never quite managed. But this seems to wrap it up in a bow. This seems to be a very elegant way of transmitting a message publicly that only the sender and receiver can decipher. Is this how PKE works? No, it cant be. In the above case, the requester knows the target's "secret" key - because they have his ID, and therefore knows his birthdate.

Similar threads

Replies
11
Views
2K
Replies
5
Views
2K
Replies
3
Views
2K
Replies
21
Views
6K
Replies
13
Views
2K
Replies
10
Views
3K
Replies
9
Views
2K
Back
Top