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

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>

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.
  
Prudential annuities
February 26, 2019 at 6:35 pm

This is very interesting, You’re an excessively skilled blogger.
I’ve joined your rss feed and look ahead to in quest of more of your magnificent post.
Additionally, I’ve shared your website in my social networks

- Sci-Techtop Reporter
  February 27, 2019 at 6:15 am
  
  even better contents than this are on the way..stay conscious.
  One request-:
  if u are really loving my work, then please go and buy through my amazon affiliate links
  
inhouse
March 6, 2019 at 1:18 pm

I’ve been surfing online ցreater thawn 3 һours these dɑys, yеt
I nevеr discovered аny attention-grabbing article ⅼike үours.
Ӏt’ѕ pretty ρrice sufficient fߋr me. Personally, if all website owners and
bloggers made ցood cοntent аs you did,
thе interfnet wiill pгobably be much mоre helpful tһan eѵeг
before.

- Sci-Techtop Reporter
  March 6, 2019 at 2:58 pm
  
  thanku thanku thanku!!! (it’s scitechtop way 🙂 )
  I JUST LOVE U!!
  keep visiting this website whenever you feel learning sth.
  I am happy that you liked it…
  Would u mind sharing this article to all of your friends? It will make me even more happy!

Sci-Techtop

Where Technology Breathes...

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

6 Comments

Leave a Reply Cancel reply