hawaii.js

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var alert = document.getElementById("alert");

var pollX = 90;

var rocket = {
	x: pollX,
  y: canvas.height-100,
  lastx: 0,
  lasty: 0,
  r: 0,
  wat: false,
  xvel: 0,
  yvel: 0,
  speed: 10,
  decayX: 1,
  decayY: 0.1,
  
  isFlying: function() {
  	return this.wat;
  }
}

var blast = {
	timer: 0,
  radius: 0,
  x: 0,
  y: 0
}

var target = {
	size: Math.floor(Math.random() * (100 - 40) + 40 ),
  x: Math.floor(Math.random() * (canvas.width - 300) + 300)
}

var movingAllowed = true;
var fireOnRelease = false;

var Mouse = {
	_pressed: {},
	X: 0,
	Y: 0,

	LMB: 0,
	MMB: 1,
	RMB: 2,
	isDown: function(button) {
		return this._pressed[button];
	},
	onMouseDown: function(event) {
		this._pressed[event.button] = true;
	},
	onMouseUp: function(event) {
		delete this._pressed[event.button];
	},
	onMouseMove: function(event) {
		this.X = event.clientX;
		this.Y = event.clientY;
	}
};
// event listeners for mouse buttons
canvas.addEventListener("mousedown", function(event) {Mouse.onMouseDown(event);}, false);
canvas.addEventListener("mouseup", function(event) {Mouse.onMouseUp(event);}, false);
canvas.addEventListener("mousemove", function(event) {Mouse.onMouseMove(event);}, false);
// we dont want rightclicking
canvas.addEventListener('contextmenu', event => event.preventDefault());

alert.addEventListener("mouseup", function() {
	 alert.style.display = "none";
}, false);


var prevTime = 0;
function updater(time) {
	var dt = (time - prevTime)/1000
  prevTime = time;
  
	update(dt);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // sky
  ctx.fillStyle = "#AACCFF";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // ground
  ctx.fillStyle = "#22AA22";
  ctx.fillRect(0, canvas.height-50, canvas.width, canvas.height-50);
  
  // target
  ctx.fillStyle = "#FF2222";
  ctx.fillRect(target.x, canvas.height-52, target.size, 20);
  ctx.fillStyle = "#FFFFFF";
  ctx.fillRect(target.x+4, canvas.height-48, target.size-8, 12);
  ctx.fillStyle = "#FF2222";
  ctx.fillRect(target.x+5, canvas.height-47, target.size-10, 10);
  ctx.fillStyle = "#FFFFFF";
  ctx.fillRect(target.x+8, canvas.height-44, target.size-16, 3);
  
  var flying = rocket.isFlying();
  ctx.save();
  ctx.translate(rocket.x, rocket.y);
  ctx.rotate(rocket.r * (Math.PI / 180));
  // rocket
  {
    // wings
    ctx.fillStyle = "#FF2222";
    ctx.beginPath();
    ctx.moveTo(-10, 20);
    ctx.lineTo(10, 20);
    ctx.lineTo(0, 12);
    ctx.closePath();
    ctx.fill();
    
    // body
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(-5, -20, 10, 40);

    // nose
    ctx.fillStyle = "#FF2222";
    ctx.beginPath();
    ctx.moveTo(-5, -20);
    ctx.lineTo(5, -20);
    ctx.lineTo(0, -28);
    ctx.closePath();
    ctx.fill();
    
    // letters
    ctx.fillStyle = "#222222";
    ctx.textAlign = "center";
    ctx.font = "8px sans-serif";
    ctx.fillText("D", 0, -8);
    ctx.fillText("P", 0, 0);
    ctx.fillText("R", 0, 8);
    ctx.fillText("K", 0, 16);
    
        // rocket fire
    if (flying) {
      ctx.fillStyle = "#FFFF22";
      ctx.beginPath();
      ctx.moveTo(-5, 22);
      ctx.lineTo(0, 20);
      ctx.lineTo(5, 22);
      ctx.lineTo(0, Math.floor(Math.random() * (40 - 32)) + 32 );
      ctx.closePath();
      ctx.fill();
    }
	}
  ctx.restore();
  
  //slingshot
  ctx.fillStyle = "#111111";
  ctx.fillRect(pollX, canvas.height-100, 5, 50);
  if (!flying) {
  	ctx.beginPath();
    ctx.moveTo(pollX+2, canvas.height-100);
    ctx.lineTo(rocket.x, rocket.y)
    ctx.stroke();
  }
  
  // blast 
  if (blast.timer > 0) {
  	blast.timer = blast.timer - dt;
    blast.radius = blast.radius + 100*dt;
    ctx.fillStyle = "#FFAA00";
    ctx.beginPath();
    ctx.arc(blast.x, blast.y, blast.radius, 0, 2 * Math.PI, false);
    ctx.fill();
    if (blast.timer <= 0) {
    	blast.timer = 0;
      blast.radius = 0;
    }
  }
  
  
  // Instructions
  ctx.fillStyle = "#222222";
  ctx.textAlign = "center";
  ctx.font = "18px sans-serif";
  ctx.fillText("Hit the target for test alert", canvas.width/2, 20);
  ctx.fillText("anywhere else for real alert", canvas.width/2, 38);
  
	requestAnimationFrame(updater);
}
requestAnimationFrame(updater);

function update(dt) {
	var flying = rocket.isFlying();
	if (pointDist(Mouse.X, Mouse.Y, pollX+2, canvas.height-100) < 50 && !flying) {
  	if (Mouse.isDown(Mouse.LMB)){
    	if (pointDist(Mouse.X, Mouse.Y, rocket.x, rocket.y) <= 20) {
        rocket.x = Mouse.X;
        rocket.y = Mouse.Y;
       }
       fireOnRelease = true;
    }
  }
  
  if (fireOnRelease && !Mouse.isDown(Mouse.LMB)) {
  	fireOnRelease = false;
  	rocket.wat = true;
    rocket.xvel = 
    	pointDist(rocket.x, rocket.y, pollX+2, canvas.height-100) * Math.sin(rocket.r * Math.PI/180);
    rocket.yvel = 
    	pointDist(rocket.x, rocket.y, pollX+2, canvas.height-100) * Math.cos(rocket.r * Math.PI/180);
  }
  
  if (flying) {
  	rocket.x = rocket.x + rocket.xvel * dt * rocket.speed;
    rocket.y = rocket.y - rocket.yvel * dt * rocket.speed;
    rocket.r = getAngle(rocket.y, rocket.lastx, rocket.lasty, rocket.x);
    rocket.lastx = rocket.x;
    rocket.lasty = rocket.y;
    
    rocket.yvel = rocket.yvel - rocket.decayY;
    
    if (rocket.x > canvas.width+300 || rocket.x < -100 || rocket.y > canvas.height ) {
    	  alert.innerHTML = "REAL ALERT SENT. SEEK SHELTER!";
        alert.style.display = "block";
			resetRocket();
    }
    
    if (rocket.x >= target.x && rocket.x <= target.x+target.size 
    		&& rocket.y >= canvas.height-52 && rocket.y >= canvas.height-44 ) {
        alert.innerHTML = "Test alert sent!";
        alert.style.display = "block";
        resetRocket();
    }
    
  } else {
  	rocket.r = getAngle(canvas.height-100, rocket.x, rocket.y, pollX+2);
  }
}

function pointDist(x1,y1, x2,y2) {
	return Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );
}

// origin and target
function getAngle(ox,oy, tx, ty) {

	let angleDeg = Math.atan2(ty - oy, tx - ox) * 180 / Math.PI;
	return angleDeg
}

function resetRocket() {
  rocket.wat = false;
  blast.x = rocket.x;
  blast.y = rocket.y;
  blast.timer = 0.5;
  rocket.x = pollX;
  rocket.y = canvas.height-100;
}