Как сделать в простой игре background в canvas?

Question

Всем привет! Нашел на MDN реализацию простой игры, решил сделать тоже, узнать что то новое. Так вот, я решил немного сделать по своему и добавить фоновую картинку. Вроде бы просто, но я не понимаю как это сделать. Вообщем и целом я узнал как можно добавить картинку и как с помощью метода drawImage() всё это отрисовать но я не знаю как дальше это применить. Нужно написать какую то функцию? И поместить туда?

let canvas = document.querySelector('.myCanvas');
let ctx = canvas.getContext("2d");
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;
let ballRadius = 8;
let paddleHeight = 10;
let paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth) / 2;
let leftPressed = false;
let rightPressed = false;

let background = new Image();
background.src = "img/cat.jpg";
background.onload = function() {
  ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  //метод для очистки canvas элемента
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  drawPaddle();
  x += dx;
  y += dy;

  if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
    dy = -dy;
  }
  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
    dx = -dx;
  }
  if (rightPressed && paddleX < canvas.width - paddleWidth) {
    paddleX += 5;
  } else if (leftPressed && paddleX > 0) {
    paddleX -= 5;
  }

}

function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}


document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

function keyDownHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = true;
  } else if (e.keyCode == 37) {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = false;
  } else if (e.keyCode == 37) {
    leftPressed = false;
  }
}

setInterval(draw, 10);

* {
  padding: 0;
  margin: 0;
}

.myCanvas {
  display: block;
  width: 480px;
  height: 320px;
  margin: 0 auto;
  margin-top: 10vh;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script.js" defer></script>
  <title>Document</title>
</head>

<body>
  <canvas class="myCanvas"></canvas>
</body>

</html>

БЛОГ НА HUSL

Как сделать в простой игре background в canvas?

Ответы (0 шт):