Question

HTML/Javascript

a.       Make a function that can draw a tree at a specific x, y location

                                                               i.      (It doesn’t have to be fancy, say 64X64 pixels).

b.      Make a function that can draw a square brick wall (64X64). (again doesn't have to be fancy)

c.       Using a 2D array create a mock-up level of mountains, trees and a background.

                                                               i.      Before careful of draw order here.

ii. Use numbers 1 = wall, 2 equals tree, break the level up into a 64X64 pixel grid.

iii. Background can be a single color, however the trees and walls must stand out on it. (Background cannot be white)

Answer 1

a)

I am Creating a new function called draw(). It should take four arguments:

• The starting X-coordinate of a branch
• The starting Y-coordinate of the branch
• The lcength of the branch
• The angle of the branch

It should look like this:

function draw(startX, startY, len, angle) {
    // All code goes here
}

Here I am going to mention the code please follow:

function draw(startX, startY, len, angle) {
  ctx.beginPath();
  ctx.save();
  
  ctx.translate(startX, startY);
  ctx.rotate(angle * Math.PI/180);
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -len);
  ctx.stroke();
  
  if(len < 10) {
    ctx.restore();
    return;
  }
  
  draw(0, -len, len*0.8, -15);
  draw(0, -len, len*0.8, 15);
  
  ctx.restore();
}

At this point, you can add a call to the draw() function to actually draw the tree.

draw(350,600,120,0);

All branches of a real tree don’t have the same thickness. They tend to get thinner as we go higher. Implementing that is simple. Just add an extra parameter to the draw() function called branchWidth. And then, every time you call the draw() function, decrement the branchWidth by a small value, like so:

draw(0, -len, len*0.8, -15, branchWidth*0.8);
draw(0, -len, len*0.8, 15, branchWidth*0.8);

To actually change the thickness, at the beginning of the draw() function, use the lineWidth attribute of the context.

ctx.lineWidth = branchWidth;

Adding color is simple. Just add the following lines right after you initialize your 2D drawing context.

ctx.strokeStyle = "darkgreen";
ctx.fillStyle = "green";

Adding leaves is a little tricky. For now, let’s use the arc() and fill() methods to create slices of a circle that look like leaves. You must, of course, create the leaves only when the branch cannot branch further.

if(len < 10) {
    ctx.beginPath();
    ctx.arc(0, -len, 10, 0, Math.PI/2);
    ctx.fill();
    ctx.restore();
    return;
}

Additionally, let’s increment the angle every time a new branch is drawn. To do so, change the calls to the draw()function to look like this:

draw(0, -len, len*0.8, angle+10, branchWidth*0.8);
draw(0, -len, len*0.8, angle-10, branchWidth*0.8);

Let’s make our tree more realistic by adding shadows! Doing so is easy: just use

lineTo() method in your code, with calls to the bezierCurveTo() method. Here’s how:

if(angle > 0) {
    ctx.bezierCurveTo(10, -len/2, 10, -len/2, 0, -len);
} else {
    ctx.bezierCurveTo(-10, -len/2, -10, -len/2, 0, -len);
}

the shadowBlur and shadowColor attributes of the context.

ctx.shadowBlur = 15;
ctx.shadowColor = "rgba(0,0,0,0.8)";

b)

Now let's create a function to loop through all the bricks in the array and draw them on the screen.

Our code look like this:

function drawBricks() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }
    }
}

style.css contains:-

canvas { background: #eee; }

c)

We can even don't need make funtion for this.We can even create Functional Mockups without code compared using some tools.

Here Iam going to mention one tool: Froont

FROONT Features Pricing Showcase Blog Log In Sign Up Responsive web design tocl for designers Design responsive landing pages and publications, export them as static pages or host them yourself Watch video Sign up FROONT unding peg Expert mode OCEAN Style

Froont is a mockup and development tool that lets you design and build websites without having to write code.

You can simply design the mockup of the website, show it to your clients, make necessary changes, and convert it to a fully functioning website in a matter of minutes using Froont.

Main Features Of Froont:

Visual Drag And Drop Editor: The smooth and powerful editor that comes with Froont allows you to easily design websites however you like and make changes right on the page you’re working on.

Host Your Websites On Froont: After completing a design, you can publish your website with Froont. Or you can export the code.

A Library Full Of Components: Froont comes with a massive library full of different components, including animations and effects, which you can use to experiment and build amazing looking websites.

// If you need help then I will support you

------------------------------------------------------Thank You-------------------------------------------------