Skip to main content

cs2010 Notes: 16 Cannon

·1 min

The ram is attacking!

We need to defend against it with a cannon.

We use mouse to point cannon, shoot cannonball at constant velocity.

Grab render.js and defend.html from https://github.com/NatTuck/cs2010-2409-demos

// App.js

function ramX(tick) {
  return 800 - (tick * 4 % 800);
}

function ramFrame(tick) {
  let fno = Math.floor(tick / 3) % 4 + 1;
  return "ram-" + fno + ".png";
}

function onInit() {
  return { tick: 0, ang: 0 };
}

function onDraw(state, {drawImage, drawCircle}) {
  drawImage("cannon.png", 0, 75, 150, 200, 100);
  drawImage(ramFrame(state.tick), 0, ramX(state.tick), 150, 100, 100);
  drawCircle(200, 200, 20, "blue");
}

function onTick(state) {
  let tick = state.tick;
  return { tick: tick + 1, ang: state.ang };
}

function onMove(state, xx, yy) {
  console.log(state, xx, yy);
  return state;
}

function onClick(state, _xx, _yy) {
  let tick = state.tick;
  let py = state.py;
  let vy = state.vy;
  return {tick: tick + 1, ang: state.ang };
}

Today’s lab:

  • Make the sheep run to the mouse and stop.