How to move a circle from the bottom of the page up every time you click a button.

Question

I am having trouble trying to get a red circle to move up the page every time a user clicks a "Jump" button in my Game Development class using Java Script. I waas able to ge the canvas to show a current count each time the ""Jump" button is clicked but the red circle does not even show on the page. This is the code I am currently using:

window.onload = function() {
let btn = document.getElementById("jump");
let count = 0;

btn.onclick = function() {
count += 1;

context.clearRect(0,0,600, 400);

context.font = '25px Arial';
context.fillStyle = 'white';
context.fillText("Count: " + count, 20, 30);
}
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = 300;
var y = 350;

function draw(){
context.beginPath();
context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle="red";
context.fill();
y -= 25;
}
btn.onclick(draw, 50);
}

This is the code example given to get the circle to move and to get the current count on the canvas:
btn.onclick = function() {
count += 1;
//changing the y position
y -= 25;
//clearing the canvas
context.clearRect(0, 0, 600, 400);

//redrawing the circle
context.beginPath();
context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle="red";
context.fill();

//drawing the count value
context.font = '25px Arial';
context.fillStyle = 'white';
context.fillText("Count: " + count, 20, 30);
}

The steps they give for doing animation go as follows:
1. clear the canvas.
2. draw the objects in their new position.
3. update the positions based on the logic.
4. repeat the process.

Can anyoine please let me know what I am doing or not doing in order to get the desired result? To recap, I am tasked with making a red ball or circle move from its current position a the bottom of the canvas, up on the y axis in incements of -25 everytime the user clicks the "Jump" button

Answer 1

Robert Haugland
Can you attach your full code so we can see it in action.

Answer 2

Robert Haugland
Found your problem

// Created by Robert Haugland

window.onload = function() {
let btn = document.getElementById("jump");
let count = 0;

btn.onclick = function() {
count += 1;
y -= 25;

context.clearRect(0,0,600, 400);
draw();

context.font = '25px Arial';
context.fillStyle = 'white';
context.fillText("Count: " + count, 20, 30);
}
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = 300;
var y = 350;

function draw(){
context.beginPath();
context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle="red";
context.fill();

}
draw();
}

Answer 3

Robert Haugland
Lesson 16.1 of your course shows the implementation of a draw() function.

The example shows it used in the setInterval function, but I believe you could embed this functionality inside your btn.onclick function.

you will need to alter the y variable of your ball with each click, & redraw your canvas each time also

Answer 4

Robert Haugland
Your onClick function does the following.

It adds count by 1
It clears the page
it then writes on the page the value of count

You have not changed the y value of your ball, & you have not redrawn it in the new position.

Keep going, you are making inroads.

OS: I can't give you a quick fix code because like you, I am still learning

Answer 5

Rik Wittkopp,

Okay I had a feeling the solution was easier than I was making it out to be. I thought I had tried this at the onset of the project, but apparently I did something. All that was needed was to take their given example code and paste it into the onclick function and have it all included between the curly brackets. It just seemed backwards to me, but here's what I ended up with:
https://code.sololearn.com/WsfbI0r2p12D/?ref=app

Once again, thanks for your assistance and attention to this matter as it is always greatly appreciated.

Answer 6

Giving circle position fixed and playing with top and left attributes might be suitable

Answer 7

Rik Wittkopp,

This is the link to my original code for this project that includes the red ball at the bottom and a “Jump” button that tracks the number of clicks to the console:

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

This is the link to the altered code with my attempt to move the red ball upward with each click of the “Jump” button:

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

I was able to get the clicking the “Jump” activate a current “Count” text to the canvas, but the red ball is not displayed. In previous lessons we are given an example of animating a red ball using the setInterval function and then calking the draw function, but we weren’t shown how to move the ball with each click. I imagine it would entail the same as the setInerval deal except with some version of an onClick. I just don’t know how to write that code.

Answer 8

Rik Wottkopp,

I was able bring back my red ball and keep the concurrent Jump count on the canva!. Unfortunately, whem you click the Jump button once, thw red ball dissappears instead of moving up on the y axis. This the Java Script code:
window.onload = function() {
let btn = document.getElementById("jump");
let count = 0;

btn.onclick = function() {
count += 1;

context.clearRect(0,0,600, 400);

context.font = '25px Arial';
context.fillStyle = 'white';
context.fillText("Count: " + count, 20, 30);
}
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = 300;
var y = 350;

function draw(){
context.beginPath();
context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle="red";
context.fill();
y -= 25;
}
draw();
}

Still confused as to why this is not working.