Ans in JavaScript

Use the "flappy-bird. png" file to create a web page as described below:

1 The page includes a canvas with a solid border of the size 3 .

2 When the page is rendered in the browser, the left-most bird in the file is shown in the centre of the canvas.

3 The bird randomly moves towards up, down, left, and right directions, infinitely.

4 The bird never goes out of the canvas border. For this lab, you may use the first bird for all directions (i.e. the bird is not required to change the head direction or flap his wings). Copy your code in the text area and submit your file(s) in the zipped format.

Sol31:

1. Create a canvas element in HTML with a width and height of 400 pixels and a border of size 3.
2. Load the "flappy-bird.png" image into JavaScript.
3. Set the starting position of the bird to the center of the canvas.
4. Create a loop that runs continuously, updating the position of the bird randomly within the canvas limits, using the following logic:

• Generate a random number between -1 and 1 for the x and y coordinates of the bird's position.
• Check if the new position is within the canvas limits (i.e. not outside the border).
• If the new position is within the canvas limits, update the bird's position.
• If the new position is outside the canvas limits, generate a new random number until a valid position is found.

1. Use the canvas context to draw the bird at its current position on the canvas.

Here's some sample code to get you started:

HTML:

myCanvas" width="400" height="400">

JavaScript:

// Load the bird image

const birdImg = new Image();

birdImg.src = "flappy-bird.png";

// Get the canvas and context

const canvas = document.getElementById("myCanvas");

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

// Set the initial position of the bird

let birdX = canvas.width / 2;

let birdY = canvas.height / 2;

// Main loop to update the bird's position and draw it on the canvas

function draw() {

// Generate random numbers for the bird's position

const newX = Math.random() * 2 - 1;

const newY = Math.random() * 2 - 1;

// Check if the new position is within the canvas limits

if (birdX + newX > 0 && birdX + newX canvas.width && birdY + newY > 0 && birdY + newY canvas.height) {

birdX += newX;

birdY += newY;

}

// Clear the canvas and draw the bird at its new position

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

ctx.drawImage(birdImg, birdX, birdY);

// Call this function again to create an animation loop

requestAnimationFrame(draw);

}

// Start the animation loop

requestAnimationFrame(draw);