skatenerd · October 20, 2016 17:50
diff --git a/spaceship.html b/spaceship.html
 <html>
  <head>
    <script type="text/javascript" src="https://rawgit.com/bjwbell/canvas-geolib/master/geometry.js"></script>
    <script type="text/javascript" src="utilities.js"></script>
    <script type="text/javascript">
      var healthyShip = function() {return document.getElementById('ship');}
      var explosion = function() {return document.getElementById('explosion');}
      var astronaut = function() {return document.getElementById('astronaut');}

      var getShipImage = function() {
        return healthyShip();
      }

      var main = function() {
        var keyboardState = getKeyboardView();
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var shipPosition = {
          altitude: 400,
          lateral: 300
        }
        var shipVelocity = {
          upwards: 0,
          sideways: 0
        }
        var fuel = 50;
        var earthSegments = [
          { from: {lateral: 0, height: 20}, to: {lateral: 40, height: 50} },
          { from: {lateral: 40, height: 50}, to: {lateral: 200, height: 20} },
          { from: {lateral: 200, height: 20}, to: {lateral: 400, height: 100}, },
          { from: {lateral: 400, height: 100}, to: {lateral: 600, height: 20} }
        ]
        var landed = false;
        var crashed = false;
        setInterval(function() {
            if (landed) {
              return;
            }

            if (keyboardState.leftIsPressed) {
              shipVelocity.sideways -= 2;
              fuel -= 1;
            }
            if (keyboardState.rightIsPressed) {
              shipVelocity.sideways += 2;
              fuel -= 1;
            }
            if (keyboardState.upIsPressed) {
              shipVelocity.upwards += 2;
              fuel -= 1;
            }

            //gravity always is working
            shipVelocity.upwards -= 1;

            shipPosition.altitude += shipVelocity.upwards;
            shipPosition.lateral += shipVelocity.sideways;

            shipMovingTooFast = shipVelocity.upwards < -5;

            ctx.fillStyle="blue";
            ctx.fillRect(0,0,canvas.width,canvas.height)

            landed = didShipLand(shipPosition, earthSegments);
            if(landed) {
              crashed = shipMovingTooFast;
            }

            drawTerrain(ctx, earthSegments);
            drawShip(getShipImage(), shipPosition, ctx)
        }, 100)
      }

      window.onload = main;
    </script>
  </head>
  <body>
    <canvas id=canvas width="600" height="400">
    </canvas>
    <img src="https://d13yacurqjgara.cloudfront.net/users/23569/screenshots/1830987/8bit_rocket_logo.png" id=ship style='display: none'/>
    <img src="https://thumbs.dreamstime.com/z/bit-pixel-art-explosion-red-background-32874679.jpg" id=explosion style='display: none'/>
    <img src="https://d13yacurqjgara.cloudfront.net/users/65416/screenshots/845764/meetminimus.gif" id=astronaut style='display: none'/>
  </body>
 </html>
diff --git a/utilities.js b/utilities.js
 var drawShip = function(shipImage, shipPosition, drawing)  {
  var canvas = drawing.canvas;
  drawing.drawImage(
    shipImage,
    shipPosition.lateral,
    (canvas.height - shipPosition.altitude),
    30,
    20
  );
 }

 var getKeyboardView = function() {
  var state = {
    downIsPressed: false,
    upIsPressed: false,
    leftIsPressed: false,
    rightIsPressed: false
  };

  window.onkeydown = function(e) {
    var keyCode = e.keyCode;
    if (keyCode == 37) {
      state.leftIsPressed = true;
    }
    if (keyCode == 38) {
      state.upIsPressed = true;
    }
    if (keyCode == 39) {
      state.rightIsPressed = true;
    }
    if (keyCode == 40) {
      state.downIsPressed = true;
    }
  };

  window.onkeyup = function(e) {
    var keyCode = e.keyCode;
    if (keyCode == 37) {
      state.leftIsPressed = false;
    }
    if (keyCode == 38) {
      state.upIsPressed = false;
    }
    if (keyCode == 39) {
      state.rightIsPressed = false;
    }
    if (keyCode == 40) {
      state.downIsPressed = false;
    }
  };
  return state;
 }

 var drawTerrain = function(ctx, segments) {
  for (var i=0; i < segments.length; i++){
    drawSegment(ctx, segments[i]);
  }
 }

 var drawSegment = function(ctx, segment) {
  ctx.beginPath();
  ctx.lineWidth="5";
  ctx.strokeStyle="green";
  var canvasHeight = ctx.canvas.height
  ctx.moveTo(segment.from.lateral, (canvasHeight - segment.from.height));
  ctx.lineTo(segment.to.lateral, (canvasHeight - segment.to.height));
  ctx.stroke(); // Draw it
 }

 var didShipLand = function(shipPosition, earthSegments) {
  var center = new Vector(shipPosition.lateral + 15, shipPosition.altitude - 10);
  var bottom = new Segment(center.add(new Vector(-20, -15)), center.add(new Vector(20, -15)));
  var left = new Segment(center.add(new Vector(-20, 100)), center.add(new Vector(-20, -15)));
  var top = new Segment(center.add(new Vector(-20, 100)), center.add(new Vector(20, 100)));
  var right = new Segment(center.add(new Vector(20, 100)), center.add(new Vector(20, -15)));

  var sides = [
    bottom,
    top,
    left,
    right
  ]
  for (var i = 0; i < sides.length; i++) {
    for (var j = 0; j < earthSegments.length; j++) {
      var side = sides[i];
      var earthSegment = new Segment(
        new Vector(earthSegments[j].from.lateral, earthSegments[j].from.height),
        new Vector(earthSegments[j].to.lateral, earthSegments[j].to.height)
      )
      if (intersect(side, earthSegment, {}) > 1){
        return true;
      }
    }
  }
  return false;
 }
	<html>
	<head>
	<script type="text/javascript" src="https://rawgit.com/bjwbell/canvas-geolib/master/geometry.js"></script>
	<script type="text/javascript" src="utilities.js"></script>
	<script type="text/javascript">
	var healthyShip = function() {return document.getElementById('ship');}
	var explosion = function() {return document.getElementById('explosion');}
	var astronaut = function() {return document.getElementById('astronaut');}

	var getShipImage = function() {
	return healthyShip();
	}

	var main = function() {
	var keyboardState = getKeyboardView();
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var shipPosition = {
	altitude: 400,
	lateral: 300
	}
	var shipVelocity = {
	upwards: 0,
	sideways: 0
	}
	var fuel = 50;
	var earthSegments = [
	{ from: {lateral: 0, height: 20}, to: {lateral: 40, height: 50} },
	{ from: {lateral: 40, height: 50}, to: {lateral: 200, height: 20} },
	{ from: {lateral: 200, height: 20}, to: {lateral: 400, height: 100}, },
	{ from: {lateral: 400, height: 100}, to: {lateral: 600, height: 20} }
	]
	var landed = false;
	var crashed = false;
	setInterval(function() {
	if (landed) {
	return;
	}

	if (keyboardState.leftIsPressed) {
	shipVelocity.sideways -= 2;
	fuel -= 1;
	}
	if (keyboardState.rightIsPressed) {
	shipVelocity.sideways += 2;
	fuel -= 1;
	}
	if (keyboardState.upIsPressed) {
	shipVelocity.upwards += 2;
	fuel -= 1;
	}

	//gravity always is working
	shipVelocity.upwards -= 1;

	shipPosition.altitude += shipVelocity.upwards;
	shipPosition.lateral += shipVelocity.sideways;

	shipMovingTooFast = shipVelocity.upwards < -5;

	ctx.fillStyle="blue";
	ctx.fillRect(0,0,canvas.width,canvas.height)

	landed = didShipLand(shipPosition, earthSegments);
	if(landed) {
	crashed = shipMovingTooFast;
	}

	drawTerrain(ctx, earthSegments);
	drawShip(getShipImage(), shipPosition, ctx)
	}, 100)
	}

	window.onload = main;
	</script>
	</head>
	<body>
	<canvas id=canvas width="600" height="400">
	</canvas>
	<img src="https://d13yacurqjgara.cloudfront.net/users/23569/screenshots/1830987/8bit_rocket_logo.png" id=ship style='display: none'/>
	<img src="https://thumbs.dreamstime.com/z/bit-pixel-art-explosion-red-background-32874679.jpg" id=explosion style='display: none'/>
	<img src="https://d13yacurqjgara.cloudfront.net/users/65416/screenshots/845764/meetminimus.gif" id=astronaut style='display: none'/>
	</body>
	</html>
	var drawShip = function(shipImage, shipPosition, drawing) {
	var canvas = drawing.canvas;
	drawing.drawImage(
	shipImage,
	shipPosition.lateral,
	(canvas.height - shipPosition.altitude),
	30,
	20
	);
	}

	var getKeyboardView = function() {
	var state = {
	downIsPressed: false,
	upIsPressed: false,
	leftIsPressed: false,
	rightIsPressed: false
	};

	window.onkeydown = function(e) {
	var keyCode = e.keyCode;
	if (keyCode == 37) {
	state.leftIsPressed = true;
	}
	if (keyCode == 38) {
	state.upIsPressed = true;
	}
	if (keyCode == 39) {
	state.rightIsPressed = true;
	}
	if (keyCode == 40) {
	state.downIsPressed = true;
	}
	};

	window.onkeyup = function(e) {
	var keyCode = e.keyCode;
	if (keyCode == 37) {
	state.leftIsPressed = false;
	}
	if (keyCode == 38) {
	state.upIsPressed = false;
	}
	if (keyCode == 39) {
	state.rightIsPressed = false;
	}
	if (keyCode == 40) {
	state.downIsPressed = false;
	}
	};
	return state;
	}

	var drawTerrain = function(ctx, segments) {
	for (var i=0; i < segments.length; i++){
	drawSegment(ctx, segments[i]);
	}
	}

	var drawSegment = function(ctx, segment) {
	ctx.beginPath();
	ctx.lineWidth="5";
	ctx.strokeStyle="green";
	var canvasHeight = ctx.canvas.height
	ctx.moveTo(segment.from.lateral, (canvasHeight - segment.from.height));
	ctx.lineTo(segment.to.lateral, (canvasHeight - segment.to.height));
	ctx.stroke(); // Draw it
	}

	var didShipLand = function(shipPosition, earthSegments) {
	var center = new Vector(shipPosition.lateral + 15, shipPosition.altitude - 10);
	var bottom = new Segment(center.add(new Vector(-20, -15)), center.add(new Vector(20, -15)));
	var left = new Segment(center.add(new Vector(-20, 100)), center.add(new Vector(-20, -15)));
	var top = new Segment(center.add(new Vector(-20, 100)), center.add(new Vector(20, 100)));
	var right = new Segment(center.add(new Vector(20, 100)), center.add(new Vector(20, -15)));

	var sides = [
	bottom,
	top,
	left,
	right
	]
	for (var i = 0; i < sides.length; i++) {
	for (var j = 0; j < earthSegments.length; j++) {
	var side = sides[i];
	var earthSegment = new Segment(
	new Vector(earthSegments[j].from.lateral, earthSegments[j].from.height),
	new Vector(earthSegments[j].to.lateral, earthSegments[j].to.height)
	)
	if (intersect(side, earthSegment, {}) > 1){
	return true;
	}
	}
	}
	return false;
	}