How to make a bounce ball in javascript-Javascript project for beginners

Let everyone know that you\'re techy!!!

you may think that i should give a source code of snake game…tetris game…no..no..that is not the way of learning to develop softwares. First learn how basic components are build out and once you will learn it it is just a matter of combining many functions to make a large program…that is it all…

so paste the below code and save it as bounce.html.. then run the program in your favourite browser (google chrome). Do some tweaks and twists in code. This is the hello world program of game programming.

<html>
<head>
    <title>Bouncing Ball with inputs</title>
    <style>
	form {
	width:330px;
	margin:20px;
	background-color:brown;
	padding:20px;
}
	</style>
    <script type="text/javascript">

	var boxx = 20;
	var boxy = 30;
	var boxwidth = 350;
	var boxheight = 250;
	var ballrad = 10;
	var boxboundx = boxwidth+boxx-ballrad;
	var boxboundy = boxheight+boxy-ballrad;
	var inboxboundx = boxx+ballrad;
	var inboxboundy = boxy+ballrad;
	var ballx = 50;
	var bally = 60;
	var ctx;
	var ballvx = 4;
	var ballvy = 8;
	
function init(){  
  ctx = document.getElementById('canvas').getContext('2d'); 
  ctx.lineWidth = ballrad;
    ctx.fillStyle ="rgb(200,0,50)";
  moveball();  
  setInterval(moveball,100);  
}  
function moveball(){  
  ctx.clearRect(boxx,boxy,boxwidth,boxheight);
  moveandcheck();
  ctx.beginPath();

  ctx.arc(ballx, bally, ballrad,0,Math.PI*2,true);
  ctx.fill();
   ctx.strokeRect(boxx,boxy,boxwidth,boxheight);
} 
function moveandcheck() {
	var nballx = ballx + ballvx;
	var nbally = bally +ballvy;
 
  if (nballx > boxboundx) {
	 ballvx =-ballvx;
	 nballx = boxboundx;
  }
  if (nballx < inboxboundx) {
     nballx = inboxboundx
	 ballvx = -ballvx;
  }
  if (nbally > boxboundy) {
	 nbally = boxboundy;
	 ballvy =-ballvy;
  }
  if (nbally < inboxboundy) {
    nbally = inboxboundy;
	 ballvy = -ballvy;
  }
  ballx = nballx;
  bally = nbally;
}
function change() {
	//I am converting to number. 
	//I don't think max or min works.
	ballvx = Number(f.hv.value);
	ballvy = Number(f.vv.value);
	return false;
}
</script>
</head>
<body onLoad="init();">  
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>  
<br/>
<form name="f" id="f" onSubmit="return change();">
  Horizontal velocity <input name="hv" id="hv" value="4" type="number" min="-10" max="10" /> 
<br>
  Vertical velocity <input name="vv" id="vv" value="8" type="number" min="-10" max="10"/>
<input type="submit" value="CHANGE"/>
</form> 
</body>
</html>

<html>

<head>

<title>Bouncing Ball with inputs</title>

<style>

form {

width:330px;

margin:20px;

background-color:brown;

padding:20px;

}

</style>

var boxx = 20;

var boxy = 30;

var boxwidth = 350;

var boxheight = 250;

var ballrad = 10;

var boxboundx = boxwidth+boxx-ballrad;

var boxboundy = boxheight+boxy-ballrad;

var inboxboundx = boxx+ballrad;

var inboxboundy = boxy+ballrad;

var ballx = 50;

var bally = 60;

var ctx;

var ballvx = 4;

var ballvy = 8;

function init(){

ctx = document.getElementById('canvas').getContext('2d');

ctx.lineWidth = ballrad;

ctx.fillStyle ="rgb(200,0,50)";

moveball();

setInterval(moveball,100);

}

function moveball(){

ctx.clearRect(boxx,boxy,boxwidth,boxheight);

moveandcheck();

ctx.beginPath();

ctx.arc(ballx, bally, ballrad,0,Math.PI*2,true);

ctx.fill();

ctx.strokeRect(boxx,boxy,boxwidth,boxheight);

}

function moveandcheck() {

var nballx = ballx + ballvx;

var nbally = bally +ballvy;

if (nballx > boxboundx) {

ballvx =-ballvx;

nballx = boxboundx;

}

if (nballx < inboxboundx) {

nballx = inboxboundx

ballvx = -ballvx;

}

if (nbally > boxboundy) {

nbally = boxboundy;

ballvy =-ballvy;

}

if (nbally < inboxboundy) {

nbally = inboxboundy;

ballvy = -ballvy;

}

ballx = nballx;

bally = nbally;

}

function change() {

//I am converting to number.

//I don't think max or min works.

ballvx = Number(f.hv.value);

ballvy = Number(f.vv.value);

return false;

}

</script>

</head>

Your browser doesn't support the HTML5 element canvas.

</canvas>

<br/>

Horizontal velocity <input name="hv" id="hv" value="4" type="number" min="-10" max="10" />

<br>

Vertical velocity <input name="vv" id="vv" value="8" type="number" min="-10" max="10"/>

</form>

</body>

</html>

Keto Flux Forskolin
February 6, 2019 at 12:03 am

It’s not my first time to visit this site, i am visiting this site
dailly and get good information from here everyday. https://charter.education/scandal/index.php?title=Crash_Through_Weight_Loss

Keto Flux Forskolin
February 6, 2019 at 12:03 am

It’s not my first time to visit this site, i am visiting this site dailly and get good
information from here everyday. https://charter.education/scandal/index.php?title=Crash_Through_Weight_Loss

예스카지노
February 7, 2019 at 6:59 am

The beauty about online for free roulette is the
fact that it provides you with valuable glimpse with the live casino environment and
by time you enter in the live competitive casino foray you’ll have shed off some kind of
intimidation and deficiency of knowledge. One very significant issue to look at heed of is online casinos isn’t just a
source of entertainment but could certainly be a major source of slaughter if
not played with the right mind and also the use of the right
skills and of course the luck factor that not everybody possesses.
Presently mobile poker games can be conveniently played even when you are already out and about. https://www.woocasite.com/yescasino

예스카지노
February 7, 2019 at 6:59 am

The beauty about online for free roulette is the fact that
it provides you with valuable glimpse with the live casino environment and by time you
enter in the live competitive casino foray you’ll have shed off some kind of intimidation and deficiency of
knowledge. One very significant issue to look at heed of is online casinos isn’t
just a source of entertainment but could certainly
be a major source of slaughter if not played with the right mind and
also the use of the right skills and of course the luck factor that not everybody
possesses. Presently mobile poker games can be
conveniently played even when you are already out and about. https://www.woocasite.com/yescasino

http://Hatchsandwich.com/
February 7, 2019 at 11:17 pm

This info iss priceless. How can I find out more?

- Sci-Techtop Reporter
  February 8, 2019 at 2:01 am
  
  follow this blog. you will find what you are running for here.

Sci-Techtop

Where Technology Breathes...

How to make a bounce ball in javascript-Javascript project for beginners

Share this and have a good day!

6 Comments

Leave a Reply Cancel reply