HTML5 JavaScript Animation Bouncing Ball Example and Paddle Game

Bouncing Ball Game JavaScript HTML5 Canvas Bouncing Ball Animation and Game with JavaScript

Bouncing Ball using HTML5 Canvas

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Ball Bounce</title>

<style>

canvas {

border: 1px solid black;

}

</style>

</head>

<body>

<canvas id=”canvas” width=”500″ height=”500″></canvas>

<script>

// Get canvas element and context

var canvas = document.getElementById(“canvas”);

var ctx = canvas.getContext(“2d”);

// Set initial ball position and velocity

var x = 250;

var y = 250;

var vx = 5;

var vy = 2;

// Set ball radius and color

var ballRadius = 20;

var ballColor = “red”;

// Draw the ball

function drawBall() {

ctx.beginPath();

ctx.arc(x, y, ballRadius, 0, Math.PI*2);

ctx.fillStyle = ballColor;

ctx.fill();

ctx.closePath();

}

// Update ball position and velocity

function updateBall() {

// Bounce off walls

if (x + vx > canvas.width – ballRadius || x + vx < ballRadius) {

vx = -vx;

}

if (y + vy > canvas.height – ballRadius || y + vy < ballRadius) {

vy = -vy;

}

// Update ball position

x += vx;

y += vy;

}

// Clear canvas and draw ball

function draw() {

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

drawBall();

}

// Main loop

function main() {

updateBall();

draw();

window.requestAnimationFrame(main);

}

// Start animation

window.requestAnimationFrame(main);

</script>

</body>

</html>

In this exercise, we use the canvas element to create a bouncing ball animation. We start by getting the canvas element and its context using JavaScript. We then set the initial position and velocity of the ball, as well as its radius and color.

We create a drawBall() function to draw the ball on the canvas, and an updateBall() function to update its position and velocity. We then create a draw() function to clear the canvas and draw the ball on each frame of the animation.

Finally, we create a main loop using window.requestAnimationFrame(), which repeatedly calls the updateBall() and draw() functions to animate the ball. The requestAnimationFrame() function ensures that the animation runs at the optimal frame rate for the user’s browser.

Overall, this exercise demonstrates how to use JavaScript to create interactive animations on the web using the canvas element.

Bouncing Ball Paddle Game

JavaScript coding exercise that involves creating a basic game using the HTML canvas element. The game is called “Ball Bounce”, and the objective is to keep a bouncing ball within the boundaries of the canvas using a paddle controlled by the user. Here’s the full code and explanation:

HTML:

<!DOCTYPE html>

<html>

  <head>

    <title>Ball Bounce Game</title>

    <style>

      #canvas {

        border: 1px solid black;

      }

    </style>

  </head>

  <body>

    <canvas id=”canvas” width=”500″ height=”500″></canvas>

    <script src=”game.js”></script>

  </body>

</html>

CSS:

#canvas {

  border: 1px solid black;

}

JavaScript (game.js):

// Define canvas

const canvas = document.getElementById(“myCanvas”);

const ctx = canvas.getContext(“2d”);

// Define ball properties

let x = canvas.width / 2;

let y = canvas.height – 30;

let dx = 2;

let dy = -2;

let ballRadius = 10;

// Define paddle properties

let paddleHeight = 10;

let paddleWidth = 75;

let paddleX = (canvas.width – paddleWidth) / 2;

// Define keyboard control variables

let rightPressed = false;

let leftPressed = false;

// Define event listeners for keyboard controls

document.addEventListener(“keydown”, keyDownHandler, false);

document.addEventListener(“keyup”, keyUpHandler, false);

function keyDownHandler(event) {

  if (event.keyCode == 39) {

    rightPressed = true;

  } else if (event.keyCode == 37) {

    leftPressed = true;

  }

}

function keyUpHandler(event) {

  if (event.keyCode == 39) {

    rightPressed = false;

  } else if (event.keyCode == 37) {

    leftPressed = false;

  }

}

// Draw the ball on the canvas

function drawBall() {

  ctx.beginPath();

  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);

  ctx.fillStyle = “#0095DD”;

  ctx.fill();

  ctx.closePath();

}

// Draw the paddle on the canvas

function drawPaddle() {

  ctx.beginPath();

  ctx.rect(paddleX, canvas.height – paddleHeight, paddleWidth, paddleHeight);

  ctx.fillStyle = “#0095DD”;

  ctx.fill();

  ctx.closePath();

}

// Move the ball on the canvas

function moveBall() {

  x += dx;

  y += dy;

}

// Handle ball collision with the walls of the canvas

function wallCollision() {

  if (x + dx > canvas.width – ballRadius || x + dx < ballRadius) {

    dx = -dx;

  }

  if (y + dy < ballRadius) {

    dy = -dy;

  } else if (y + dy > canvas.height – ballRadius) {

    if (x > paddleX && x < paddleX + paddleWidth) {

      dy = -dy;

    } else {

      alert(“GAME OVER”);

      document.location.reload();

    }

  }

}

// Handle paddle movement

function movePaddle() {

  if (rightPressed && paddleX < canvas.width – paddleWidth) {

    paddleX += 7;

  } else if (leftPressed && paddleX > 0) {

    paddleX -= 7;

  }

}

// Clear the canvas for redrawing

function clearCanvas() {

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

}

// Define main game loop

function draw() {

  clearCanvas();

  drawBall();

  drawPaddle();

  moveBall();

  wallCollision();

  movePaddle();

}

setInterval(draw, 10);