Objects & Physics

objects

gravity

trigonometry

mouse events

1

Which function repeats code on a timer?

2

How does the ball bounce off a wall?

3

What does Number() do?

4

What does drawImage need?

The ball keeps a constant horizontal speed while gravity changes its vertical speed, so it flies in an arc.

Three versions: a cannonball with speeds typed in; a cannon rotated to an angle, where a hit swaps the target image; a slingshot you drag with the mouse. Hit the chicken and only feathers remain.

FROM THE BOOK

Chapter 4 · Cannonball and Slingshot
pp. 97–140

YOU WILL BUILD

• cannball1.html
• cannBall2.html
• slingshot.html

01

Create objects with constructor functions and new.

02

Give objects their own data and methods: draw(), moveit().

03

Keep every object in an array and redraw them all in one loop.

04

Handle mousedown, mousemove and mouseup.

05

Hit-test a click against a circle using squared distance.

06

Turn a drag into a velocity with atan2, cos and sin.

07

Simulate projectile motion with gravity.

08

Detect collisions with the target and the ground.

Timed animation

The same interval technique as the bouncing ball.

Gravity

Change the vertical speed by a constant amount on every step.

A scene of objects

Ball, target, ground and cannon are kept in one list and redrawn together.

Mouse drag

Press, drag and release to set the launch speed and angle.

1

Constructor

Ball(sx, sy, rad, style) describes a ball.

2

new

new Ball(…) makes one ball.

3

List

everything holds every object to draw.

CODE · script · canvas 400 × 200

function Ball(x, y, r, color) {
  this.x = x;  this.y = y;  this.r = r;
  this.color = color;
  this.draw = function () {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
    ctx.fill();
  };
}
var things = [new Ball(60, 100, 30, "crimson"),
  new Ball(180, 80, 20, "teal"),
  new Ball(300, 120, 40, "gold")];
things.forEach(function (b) { b.draw(); });

function Ball(x, y, r, color)

this.x = x;

this.draw = function () {…}

new Ball(60, 100, 30, "crimson")

things.forEach(… b.draw() …)

Two balls appear, but only cball flies when you fire.

1

dx

Stays the same every tick.

2

Vertical speed

Gains gravity every tick.

3

Result

The path bends into an arc.

CODE · script · canvas 400 × 200

var x = 20, y = 180, vx = 4, vy = -9;
var gravity = 0.3;
function step() {
  vy = vy + gravity;          // pull down
  x = x + vx;
  y = y + vy;
  ctx.beginPath();
  ctx.arc(x, y, 4, 0, 2 * Math.PI);
  ctx.fill();                 // leave a trail
  if (y > 190) clearInterval(timer);  // ground
}
var timer = setInterval(step, 30);

vx = 4, vy = -9

vy = vy + gravity;

x = x + vx;

ctx.fill();

if (y > 190) clearInterval(timer);

Double: a short, steep arc. Zero: a straight line. Negative: the ball floats upward.

1

Radians

Degrees × π / 180.

2

cos

cos(angle) × speed is the sideways part.

3

sin

sin(angle) × speed is the upward part; minus, because y grows down.

CODE · script · canvas 400 × 200

var deg = 40;
var angle = deg * Math.PI / 180;    // radians
ctx.save();
ctx.translate(60, 170);             // pivot
ctx.rotate(-angle);                 // turn
ctx.fillRect(0, -10, 120, 20);      // barrel
ctx.restore();
var vx = 10 * Math.cos(angle);
var vy = -10 * Math.sin(angle);
ctx.fillText("vx = " + vx.toFixed(1), 220, 70);
ctx.fillText("vy = " + vy.toFixed(1), 220, 110);

deg * Math.PI / 180

ctx.translate(60, 170);

ctx.rotate(-angle);

ctx.save(); … ctx.restore();

10 * Math.cos(angle)

In simple physics, 45° goes furthest on flat ground, and 30° and 60° land close together.

1

mousedown

Is the click on the ball?

2

mousemove

Drag the ball and the sling while inmotion.

3

mouseup

Launch: the pull distance sets the speed.

CODE · script · c = canvas 760 × 380

var dragging = false;
c.addEventListener("mousedown", function () {
  dragging = true;
});
c.addEventListener("mousemove", function (e) {
  if (dragging) {
    ctx.beginPath();
    ctx.arc(e.offsetX, e.offsetY, 6, 0, 2*Math.PI);
    ctx.fill();          // paint while dragging
  }
});
c.addEventListener("mouseup", function () {
  dragging = false; });

addEventListener("mousedown", …)

dragging = true;

if (dragging) { … }

e.offsetX, e.offsetY

dragging = false;

350 doubles the launch speed; 1400 halves it.

Fix: Inside a constructor write this.sx = sx, not sx = sx.

Fix: Push it into everything, then call drawall().

Fix: Convert degrees to radians before cos/sin, and keep the minus on the vertical part.

Fix: Attach the listeners to the canvas, and read the mouse position the way slingshot.html does (layerX / offsetX).

A

Draws a ball

B

Creates a ball object

C

Deletes a ball

D

Loads an image

A

Horizontal speed

B

Vertical speed

C

Ball radius

D

Cannon angle

A

JavaScript trig uses radians

B

To make it bigger

C

To round it

D

To rotate the canvas

A

mouseup

B

mousemove

C

mousedown

D

click

1

Folder

Create a folder named Week4.

2

Copy

Copy the example files and their images, audio or video into it.

3

Open

Open the folder in VS Code or Sublime Text.

4

Save

Edit, then save with Ctrl+S.

5

Check

Refresh the browser (F5). Open the console (F12).

Add console.log(horvelocity, verticalvel1) in fire() to check that your angle maths gives sensible speeds.

NEXT WEEK

Week 5 · Memory Game

Cards as objects, shuffling, click hit-tests, pauses, timing and polygons.