a border where you can not go through (canvas game)

Question

I have to make a game for school :)

I'am a beginner in Javascript (and English) and I have a question about a canvas.

I made a spaceship in my canvas, and I can fly around with it with my arrowkeys. The problem is that my spaceship can fly trough the border of my canvas.. and thats not way it ment to be.

I hope one of you guys can help me with it! :)

Here is my code..

window.onload = init;
var ctx;
var x = 750;
var y = 400;
var up = false;
var right = false;
var left = false;
var gravity = -1.1;
var horizontalSpeed = 0.1;
function init() {
    document.onkeydown = handleKeyDown;
    document.onkeyup = handleKeyUp;
    var canvas = document.querySelector("canvas");
    ctx = canvas.getContext("2d");
    animate();

}

function animate() {
    moveShip();
    drawScene();
    requestAnimationFrame(animate);
}
function drawScene(){
    ctx.clearRect(0,0,1600,800);
    drawSpaceship();
}
function moveShip() {
    if (left) {
        horizontalSpeed -= 0.1;
    }else if (right){
        horizontalSpeed += 0.1;
    }
    if (up) {
        gravity -=0.4;
    }
    gravity += 0.12;
    y += gravity;
    x += horizontalSpeed;
}
function drawSpaceship () {
    ctx.save();
    ctx.translate(x, y);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -40);
    ctx.lineTo(30,-80);
    ctx.lineTo(60,-40);
    ctx.lineTo(60,0);
    ctx.lineTo(80,30);
    ctx.lineTo(80,90);
    ctx.lineTo(60,50);
    ctx.lineTo(0,50);
    ctx.lineTo(-20,90);
    ctx.lineTo(-20,30);
    ctx.lineTo(0,0);
    ctx.strokeStyle = 'white';
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}
function handleKeyDown (evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            left = true;
            break;
        case 38:
            up = true;
            break;
        case 39:
            right = true;
            break;
    }
}
function handleKeyUp(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            left = false;
            break;
        case 38:
            up = false;
            break;
        case 39:
            right = false;
            break;
    }
}

Answer 1

You need a concept called "clamping".

Clamping is limiting a value within a specified range.

You want to clamp your ship's horizontal position to be no less than 0 and no greater than the canvas width.

You want to clamp your ship's vertical position to be no less than 0 and no greater than the canvas height.

This is code to clamp a value between a min and max value.

clampedValue = Math.min(Math.max(currentValue, min), max);

To keep any [x,y] within the canvas, you can clamp the x,y like this:

clampedX = Math.min(Math.max(x, 0), canvasWidth);
clampedY = Math.min(Math.max(y, 0), canvasHeight);

Now your ship is larger than just a single [x,y] point. So to keep your entire ship inside your canvas you would clamp the [x,y] like this:

y += gravity;
x += horizontalSpeed;
x=Math.min(Math.max(x,0+20),width-80);
y=Math.min(Math.max(y,0+80),height-90);

Also, you're letting gravity increase even if you ship is on the ground. At that point the gravity effect becomes zero because the ship is being entirely supported by the ground against gravity. Therefore, you'll want to set gravity to zero when the ship is on the ground:

if(y==height-90){gravity=0;}

Here's your code refactored to keep your ship inside the canvas:

var x = 200;
var y = 100;
var up = false;
var right = false;
var left = false;
var gravity = -1.1;
var horizontalSpeed = 0.1;

var canvas = document.querySelector("canvas");
var width=canvas.width;
var height=canvas.height;
var ctx = canvas.getContext("2d");


init();

function init() {
  document.onkeydown = handleKeyDown;
  document.onkeyup = handleKeyUp;

  animate();
}

function animate() {
  moveShip();
  drawScene();
  requestAnimationFrame(animate);
}
function drawScene(){
  ctx.clearRect(0,0,1600,800);
  drawSpaceship();
}
function moveShip() {
  if (left) {
    horizontalSpeed -= 0.1;
  }else if (right){
    horizontalSpeed += 0.1;
  }
  if (up) {
    gravity -=0.4;
  }
  gravity += 0.12;
  y += gravity;
  x += horizontalSpeed;
  x=Math.min(Math.max(x,0+20),width-80);
  y=Math.min(Math.max(y,0+80),height-90);
  if(y==height-90){gravity=0;}
}
function drawSpaceship () {
  ctx.save();
  ctx.translate(x, y);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -40);
  ctx.lineTo(30,-80);
  ctx.lineTo(60,-40);
  ctx.lineTo(60,0);
  ctx.lineTo(80,30);
  ctx.lineTo(80,90);
  ctx.lineTo(60,50);
  ctx.lineTo(0,50);
  ctx.lineTo(-20,90);
  ctx.lineTo(-20,30);
  ctx.lineTo(0,0);
  ctx.strokeStyle = 'blue';
  ctx.stroke();
  ctx.closePath();
  ctx.restore();
}
function handleKeyDown (evt) {
  evt = evt || window.event;
  switch (evt.keyCode) {
    case 37:
      left = true;
      break;
    case 38:
      up = true;
      break;
    case 39:
      right = true;
      break;
  }
}
function handleKeyUp(evt) {
  evt = evt || window.event;
  switch (evt.keyCode) {
    case 37:
      left = false;
      break;
    case 38:
      up = false;
      break;
    case 39:
      right = false;
      break;
  }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<h4>Hold down the arrow keys to move the ship.</h4>
<canvas id="canvas" width=500 height=400></canvas>