Can you help me with this code?

Question

The circle that I made doesn't move from it's actual position which I want to but actually extends on the right side of screen
I tried running it on my PC and it ran without any error!
So I want help for that!
https://code.sololearn.com/WT817VZk5cdW/?ref=app

Answer 1

Okay check it once again. 😊

https://code.sololearn.com/WsTpKzNITIWz/?ref=app

Answer 2

Yep . Here is the solution .

https://code.sololearn.com/WsTpKzNITIWz/?ref=app

Answer 3

Harsh Tyagi

Is this code the exact same code your ran on your pc? And when say pc were you using Sololearn Website playground or
some sort of text editor/ ide?

As for the second question, when movement is equal to or greater than 375 the value on movement becomes negative thus putting the circle to the left off-screen.

Answer 4

Harsh Tyagi

Well if that is the case then it appears that I can not help you. But maybe JaseemAkhtar can.

Answer 5

You need to redraw you the context image before you move the circle for every frame to get the amination effect.
https://code.sololearn.com/Wk6OxeoVN2SH/#js

Answer 6

I don’t know wheather this is corect but this is working:

var canvas;
var canvasContext;
var FPS = 60;
var movement = 5;

window.onload = function draw(){
canvas = document.getElementById('game_canvas');

canvasContext = canvas.getContext('2d');
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
canvasContext.fillStyle = "black";
canvasContext.fillRect(0,0,canvas.width,canvas.height);
canvasContext.fillStyle = "white";
canvasContext.fillRect(10,100,10,200);
canvasContext.fillStyle = "white";
canvasContext.fillRect(330,100,10,200);
move();
setInterval(draw, 1000/FPS);
}
function move(){
movement++;
canvasContext.fillStyle = "white";
canvasContext.beginPath();
canvasContext.arc(movement,150,5,0,Math.PI*2,true);
canvasContext.fill();

if (movement >= 375)
{
movement = - movement;
}

}

Im clearing the canvas now

Answer 7

ODLNT Thanks!
But I didn't call draw() function in move() function to redraw on my PC but still it worked the same.
Can you help me with it?
And also why it is not moving backwards when it reaches position 375 i.e. near the white rect on right side of screen!

Answer 8

ODLNT YES I wrote the exact same code on my PC
AND I use Sublime Text 3, notepad and notepad++ and I worked the same using all three of them

Answer 9

JaseemAkhtar Can you help me with this?

Answer 10

JaseemAkhtar I figured that out but I want the ball to have a to and fro motion when it strikes those two white rects on both sides

Answer 11

How can use keyboard key in Java script