将矩形对象放置在画布之外

Question

我正在尝试使用JavaScript，HTML和CSS在画布上构建节奏游戏。目前，该代码使它可以使画布适合整个屏幕。

因此，我无法在看不见的画布下方放置矩形（黑色正方形）。如果我尝试在y-value中放置一个矩形，该矩形大于画布的实际高度，则代码会更改矩形的位置，以使其完全可见。

这不符合我的目的，因为我希望矩形从底部和顶部进入屏幕，一旦它们出现，用户可以按 a ， s ， k 或 l 并“销毁”这些块。我有什么办法可以将矩形放置在画布之外，同时仍然保持覆盖屏幕的画布？

var block;
var block2;
var block3;
var musicBlocksOfFirstColumn = [];
var musicBlocksOfSecondColumn = [];
var musicBlocksOfThirdColumn = [];
var musicBlocksOfFourthColumn = [];

function startGame() {
  block = new component(30, 30, "red", 80, 75, .05, 0);
  block2 = new component(30, 30, "blue", 80, 40, .05, 0);
  block3 = new component(30, 30, "green", 80, 5, .05, 0);
  column1MusicBlock = new component(90, 130, "black", (screen.width / 8) - 45, 10, .05, 0);
  column1MusicBlock2 = new component(90, 130, "black", (screen.width / 8) - 45, -190, .05, 0);
  column2MusicBlock = new component(90, 130, "black", ((screen.width / 8) * 3) - 45, (screen.height / 2) + 140, -.05, 0);
  column3MusicBlock = new component(90, 130, "black", ((screen.width / 8) * 5) - 45, 10, .05, 0);
  column4MusicBlock = new component(90, 130, "black", ((screen.width / 8) * 7) - 45, (screen.height / 2) + 290, -.05, 0);
  column4MusicBlock2 = new component(90, 130, "black", ((screen.width / 8) * 7) - 45, (screen.height / 2) + 460, -.05, 0);
  horizon = new component(screen.width, 30, "black", 0, (screen.height / 2) - 30, 0, 0);
  line_1 = new component(1, screen.height, "white", (screen.width / 4) - .5, 0, 0);
  line_2 = new component(1, screen.height, "white", ((screen.width / 4) * 2) - .5, 0, 0);
  line_3 = new component(1, screen.height, "white", ((screen.width / 4) * 3) - .5, 0, 0);
  musicBlocksOfFirstColumn = ["column1MusicBlock", "column1MusicBlock2"];
  musicBlocksOfSecondColumn = ["column2MusicBlock"];
  musicBlocksOfThirdColumn = ["column3MusicBlock"];
  musicBlocksOfFourthColumn = ["column4MusicBlock", "column4MusicBlock2"];
  myGameArea.start();
  myGameArea.play();
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  },
  play: function() {
    this.interval = setInterval(updateGameArea, 20);
  },
  stop: function() {
    clearInterval(this.interval);
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
};

function component(width, height, color, x, y, gravity, gravitySpeed, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.gravity = gravity;
  this.gravitySpeed = gravitySpeed;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
    this.hitBottom();
  };
  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;
    if (this.y > rockbottom) {
      this.y = rockbottom;
    }
  }
}

function updateGameArea() {
  myGameArea.clear();
  block.newPos();
  block2.newPos();
  block3.newPos();
  block.update();
  block2.update();
  block3.update();
  
  for (curBlock in musicBlocksOfFirstColumn) {
    switch (musicBlocksOfFirstColumn[curBlock]) {
      case "column1MusicBlock":
        column1MusicBlock.newPos();
        column1MusicBlock.update();
        break;
      case "column1MusicBlock2":
        column1MusicBlock2.newPos();
        column1MusicBlock2.update();
        break;
      default:
        //alert("game done")
    }
  }  
  for (curBlock in musicBlocksOfSecondColumn) {
    switch (musicBlocksOfSecondColumn[curBlock]) {

      case "column2MusicBlock":
        column2MusicBlock.newPos();
        column2MusicBlock.update();
        break;
      default:
        //alert("game done")
    }
  }
  for (curBlock in musicBlocksOfThirdColumn) {
    switch (musicBlocksOfThirdColumn[curBlock]) {

      case "column3MusicBlock":
        column3MusicBlock.newPos();
        column3MusicBlock.update();
        break;
      default:
        //alert("game done")
    }
  }
  for (curBlock in musicBlocksOfFourthColumn) {
    switch (musicBlocksOfFourthColumn[curBlock]) {

      case "column4MusicBlock":
        column4MusicBlock.newPos();
        column4MusicBlock.update();
        break;
      case "column4MusicBlock2":
        column4MusicBlock2.newPos();
        column4MusicBlock2.update();
        break;
      default:
        //alert("game done")
    }
  }

  line_1.update();
  line_2.update();
  line_3.update();
  horizon.update();
}

//Keypress Event code
$(document).keydown(function(event) { //jQuery code to recognize a keydown event
  var keycode = (event.keyCode ? event.keyCode : event.which);
  //enter
  if (keycode == 65) {
    musicBlocksOfFirstColumn.splice(0, 1);
  }
  if (keycode == 83) {
    musicBlocksOfSecondColumn.splice(0, 1);
  }
  if (keycode == 75) {
    musicBlocksOfThirdColumn.splice(0, 1);
  }
  if (keycode == 76) {
    musicBlocksOfFourthColumn.splice(0, 1);
  }
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

canvas {
  display: block;
}

canvas {
  background-color: #daf1e7;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="JS.js"></script>
</head>
<body onload="startGame()">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="CSS.css">
</body>
</html>