CODEWITHSUNDEEP
javascripthtmlcanvas
apple
apple

Reputation: 35

Bouncing Ball doesn't appear on page

I would like to point out that I'm a beginner at this. So please, I hope you don't mind me asking questions to your solutions.

What I'm trying to construct here is a graphical animation of a ball falling to the ground from a height and then slowly, after several subsequent bounces, the ball just rolls on the base of the canvas.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>JavaScript examples</title>

<!-- As a shortcut, I included style information here rather than a separate file -->
<style>
canvas { 
  border: 1px solid gray;
}
</style>

<!-- incorporate jQuery  -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- now my written script -->
<script>

$(function(){

// initialise canvas and context
var canvas = document.getElementById('canvas');

// physical variables
var g = 0.1; // gravity
var fac = 0.8; // velocity reduction factor per bounce
var radius = 20; // ball radius
var color = "#0000ff"; // ball color
var intervalId

function initBall() { 
// initialise position and velocity of ball
var x = 50;
var y = 50;
var horizontalvelocity = 2;
var verticalvelocity = 0;
}

function drawBall() {
with (context){
    clearRect(0, 0, canvas.width, canvas.height); // clear canvas
    fillStyle = color;
    beginPath();
    arc(x, y, radius, 0, 2*Math.PI, true);
    closePath();
    fill();
};
};

function render() {
// update velocity
verticalvelocity += g; // gravity

// update position
x += horizontalvelocity;
y += verticalvelocity; 

// handle bouncing
if (y > canvas.height - radius){
y = canvas.height - radius;
verticalvelocity *= -fac;
}

// wrap around
if (x > canvas.width + radius){
x = -radius;
}

// update the ball
drawBall();
};

function init() {
  <!-- get the rendering area for the canvas -->
  context = $('#canvas')[0].getContext("2d");
  WIDTH = $('#canvas').width();
  HEIGHT = $('#canvas').height();
  setInterval(update, 1000/60); // 60 frames per second

  initBall();

  <!-- start animation -->
  intervalId = setInterval(render, 10);
}

$(document).ready(init);

</script>

</head>

<body>

<canvas id="canvas" width="700" height="500"></canvas>

</body>
</html>

I can't seem to detect the errors I made. Your ideas and solutions would be greatly appreciated. :)

Upvotes: 0

Views: 103

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

Your issue relates to a scope issue : you are using x,y variables through all your code, so they should be global variables. But your issues are 1) is that you didn't declare them as global variable and 2) when you initialize x,y in initBall, you declare 2 local vars that are x,y, that will hide x,y global vars.

--> add with global scope : 

var x,y ;

(by the way declare also 

var horizontalvelocity = 2;
var verticalvelocity = 0;

)

--> remove the var declaration in 

function initBall() { 
  // initialise position and velocity of ball
  x = 50;
  y = 50;
  horizontalvelocity = 2;
  verticalvelocity = 0;
}

Upvotes: 3

Related Questions