Bouncing ball javascript

So I have an html page that has buttons for bouncing the ball, I want to ball to start in the middle when the page is loaded which is what it does. Then i want it to bounce when I push the button called bounce yet, when i click it it only moves 1 frame. Id like it to just keep bouncing.

html code

 <button type="button" onclick="bounce()">Bounce</button>

javascript function for the ball when button is clicked

var canvas;

var ctx;

var ballX = 250;

var ballY = 250;

var xVelocity = 2;

var yVelocity = 3;

var ballWidth = 50;



 //Gets Canvas + Sets Framerate

 window.onload = function() {

  canvas = document.getElementById("test");

 ctx = canvas.getContext("2d");

 setInterval(draw,1000/60);

}



//Draw EVERYTHING

function draw() {



//Color The Canvas white

ctx.fillStyle = "white";

ctx.fillRect(0,0,canvas.width,canvas.height);



//Draw The Ball

ctx.beginPath();

ctx.fillStyle = color;

ctx.strokeStyle = "black";

ctx.lineWidth = 2;

ctx.arc(ballX,ballY,ballWidth,0,Math.PI*2, true);

ctx.fill();

ctx.stroke();

ctx.closePath();



}



//Change Ball Position

function bounce()

{



 ballX += xVelocity;

 ballY += yVelocity;



 if(ballX - ballWidth <= 0) {

  xVelocity = -xVelocity;



}



//Bounce Ball Off Right 

if(ballX + ballWidth >= canvas.width) {

xVelocity = -xVelocity;



}



 //Bounce Ball Off Top

if(ballY - ballWidth <= 0) {

 yVelocity = -yVelocity;



}



//Bounce Ball Off Bottom 

if(ballY + ballWidth >= canvas.height) {

  yVelocity = -yVelocity;



}



}

asked Nov 28 '18 at 23:56

Xonics

164

1

Your bounce() is what moves the ball. Calling it once will move the ball by a few pixels. It sounds like you want the ball to start moving when you click the button? In that case you need to a) set the initial velocities to zero b) bounce() the ball every frame, like draw() c) set the velocities to something other than zero when you click the button: jsfiddle.net/khrismuc/w2km0x47

– Chris G
Nov 29 '18 at 0:05

add a comment |

html code

 <button type="button" onclick="bounce()">Bounce</button>

javascript function for the ball when button is clicked

var canvas;

var ctx;

var ballX = 250;

var ballY = 250;

var xVelocity = 2;

var yVelocity = 3;

var ballWidth = 50;



 //Gets Canvas + Sets Framerate

 window.onload = function() {

  canvas = document.getElementById("test");

 ctx = canvas.getContext("2d");

 setInterval(draw,1000/60);

}



//Draw EVERYTHING

function draw() {



//Color The Canvas white

ctx.fillStyle = "white";

ctx.fillRect(0,0,canvas.width,canvas.height);



//Draw The Ball

ctx.beginPath();

ctx.fillStyle = color;

ctx.strokeStyle = "black";

ctx.lineWidth = 2;

ctx.arc(ballX,ballY,ballWidth,0,Math.PI*2, true);

ctx.fill();

ctx.stroke();

ctx.closePath();



}



//Change Ball Position

function bounce()

{



 ballX += xVelocity;

 ballY += yVelocity;



 if(ballX - ballWidth <= 0) {

  xVelocity = -xVelocity;



}



//Bounce Ball Off Right 

if(ballX + ballWidth >= canvas.width) {

xVelocity = -xVelocity;



}



 //Bounce Ball Off Top

if(ballY - ballWidth <= 0) {

 yVelocity = -yVelocity;



}



//Bounce Ball Off Bottom 

if(ballY + ballWidth >= canvas.height) {

  yVelocity = -yVelocity;



}



}

asked Nov 28 '18 at 23:56

Xonics

164

1

Your bounce() is what moves the ball. Calling it once will move the ball by a few pixels. It sounds like you want the ball to start moving when you click the button? In that case you need to a) set the initial velocities to zero b) bounce() the ball every frame, like draw() c) set the velocities to something other than zero when you click the button: jsfiddle.net/khrismuc/w2km0x47

– Chris G
Nov 29 '18 at 0:05

add a comment |

html code

 <button type="button" onclick="bounce()">Bounce</button>

javascript function for the ball when button is clicked

var canvas;

var ctx;

var ballX = 250;

var ballY = 250;

var xVelocity = 2;

var yVelocity = 3;

var ballWidth = 50;



 //Gets Canvas + Sets Framerate

 window.onload = function() {

  canvas = document.getElementById("test");

 ctx = canvas.getContext("2d");

 setInterval(draw,1000/60);

}



//Draw EVERYTHING

function draw() {



//Color The Canvas white

ctx.fillStyle = "white";

ctx.fillRect(0,0,canvas.width,canvas.height);



//Draw The Ball

ctx.beginPath();

ctx.fillStyle = color;

ctx.strokeStyle = "black";

ctx.lineWidth = 2;

ctx.arc(ballX,ballY,ballWidth,0,Math.PI*2, true);

ctx.fill();

ctx.stroke();

ctx.closePath();



}



//Change Ball Position

function bounce()

{



 ballX += xVelocity;

 ballY += yVelocity;



 if(ballX - ballWidth <= 0) {

  xVelocity = -xVelocity;



}



//Bounce Ball Off Right 

if(ballX + ballWidth >= canvas.width) {

xVelocity = -xVelocity;



}



 //Bounce Ball Off Top

if(ballY - ballWidth <= 0) {

 yVelocity = -yVelocity;



}



//Bounce Ball Off Bottom 

if(ballY + ballWidth >= canvas.height) {

  yVelocity = -yVelocity;



}



}

asked Nov 28 '18 at 23:56

Xonics

164

html code

 <button type="button" onclick="bounce()">Bounce</button>

javascript function for the ball when button is clicked

var canvas;

var ctx;

var ballX = 250;

var ballY = 250;

var xVelocity = 2;

var yVelocity = 3;

var ballWidth = 50;



 //Gets Canvas + Sets Framerate

 window.onload = function() {

  canvas = document.getElementById("test");

 ctx = canvas.getContext("2d");

 setInterval(draw,1000/60);

}



//Draw EVERYTHING

function draw() {



//Color The Canvas white

ctx.fillStyle = "white";

ctx.fillRect(0,0,canvas.width,canvas.height);



//Draw The Ball

ctx.beginPath();

ctx.fillStyle = color;

ctx.strokeStyle = "black";

ctx.lineWidth = 2;

ctx.arc(ballX,ballY,ballWidth,0,Math.PI*2, true);

ctx.fill();

ctx.stroke();

ctx.closePath();



}



//Change Ball Position

function bounce()

{



 ballX += xVelocity;

 ballY += yVelocity;



 if(ballX - ballWidth <= 0) {

  xVelocity = -xVelocity;



}



//Bounce Ball Off Right 

if(ballX + ballWidth >= canvas.width) {

xVelocity = -xVelocity;



}



 //Bounce Ball Off Top

if(ballY - ballWidth <= 0) {

 yVelocity = -yVelocity;



}



//Bounce Ball Off Bottom 

if(ballY + ballWidth >= canvas.height) {

  yVelocity = -yVelocity;



}



}

javascript html

asked Nov 28 '18 at 23:56

Xonics

164

asked Nov 28 '18 at 23:56

Xonics

164

asked Nov 28 '18 at 23:56

Xonics

164

asked Nov 28 '18 at 23:56

Xonics

164

asked Nov 28 '18 at 23:56

Xonics

164

1

Your bounce() is what moves the ball. Calling it once will move the ball by a few pixels. It sounds like you want the ball to start moving when you click the button? In that case you need to a) set the initial velocities to zero b) bounce() the ball every frame, like draw() c) set the velocities to something other than zero when you click the button: jsfiddle.net/khrismuc/w2km0x47

– Chris G
Nov 29 '18 at 0:05

add a comment |

1

Your bounce() is what moves the ball. Calling it once will move the ball by a few pixels. It sounds like you want the ball to start moving when you click the button? In that case you need to a) set the initial velocities to zero b) bounce() the ball every frame, like draw() c) set the velocities to something other than zero when you click the button: jsfiddle.net/khrismuc/w2km0x47

– Chris G
Nov 29 '18 at 0:05

Your bounce() is what moves the ball. Calling it once will move the ball by a few pixels. It sounds like you want the ball to start moving when you click the button? In that case you need to a) set the initial velocities to zero b) bounce() the ball every frame, like draw() c) set the velocities to something other than zero when you click the button: jsfiddle.net/khrismuc/w2km0x47

– Chris G
Nov 29 '18 at 0:05

add a comment |

1 Answer
1

active

oldest

votes

your problem is because you need run bounce inside draw function, you need a flag to activate this function.

<button type="button" onclick="bounceFlag= true;">Bounce</button>



var bounceFlag = false;

and inside of draw

if(bounceFlag) {

    bounce()

}

you can see your example working here [https://codepen.io/anon/pen/jQeRxM?editors=1010][

answered Nov 29 '18 at 0:22

Gustavo Flores

111

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53529907%2fbouncing-ball-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

your problem is because you need run bounce inside draw function, you need a flag to activate this function.

<button type="button" onclick="bounceFlag= true;">Bounce</button>



var bounceFlag = false;

and inside of draw

if(bounceFlag) {

    bounce()

}

you can see your example working here [https://codepen.io/anon/pen/jQeRxM?editors=1010][

answered Nov 29 '18 at 0:22

Gustavo Flores

111

add a comment |

your problem is because you need run bounce inside draw function, you need a flag to activate this function.

<button type="button" onclick="bounceFlag= true;">Bounce</button>



var bounceFlag = false;

and inside of draw

if(bounceFlag) {

    bounce()

}

you can see your example working here [https://codepen.io/anon/pen/jQeRxM?editors=1010][

answered Nov 29 '18 at 0:22

Gustavo Flores

111

add a comment |

your problem is because you need run bounce inside draw function, you need a flag to activate this function.

<button type="button" onclick="bounceFlag= true;">Bounce</button>



var bounceFlag = false;

and inside of draw

if(bounceFlag) {

    bounce()

}

you can see your example working here [https://codepen.io/anon/pen/jQeRxM?editors=1010][

answered Nov 29 '18 at 0:22

Gustavo Flores

111

your problem is because you need run bounce inside draw function, you need a flag to activate this function.

<button type="button" onclick="bounceFlag= true;">Bounce</button>



var bounceFlag = false;

and inside of draw

if(bounceFlag) {

    bounce()

}

you can see your example working here [https://codepen.io/anon/pen/jQeRxM?editors=1010][

answered Nov 29 '18 at 0:22

Gustavo Flores

111

answered Nov 29 '18 at 0:22

Gustavo Flores

111

answered Nov 29 '18 at 0:22

Gustavo Flores

111

answered Nov 29 '18 at 0:22

Gustavo Flores

111

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl