Итак, я пытаюсь создать видеоигру на основе js. Однако я столкнулся с проблемой: как мне сделать фоновое изображение в качестве игровой области?
PS: backgroundImage указал CSS условия:
body { background-image: url(bg.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }
Вот код:
<body onload="startGame()"> <script> var myGamePiece; function startGame() { myGameArea.start(); myGamePiece = new component(30, 30, "red", 10, 120)} </script>
Источник: https://www.w3schools.com/graphics/tryit.asp?filename=trygame_controllers_keys
Следующий стиль задает фоновое изображение для canvas («игровая область»):
canvas
canvas { background-image: url(https://some-image-here.jpg); /*...*/ }
Демо - https://jsfiddle.net/vyspiansky/qae1jk8p/
Поскольку вы используете холст, вы можете сделать это:
Загрузить изображение:
const background = new Image(); const onload = startGame; background.src = "bg.jpg";
Нарисовать фон:
context.drawImage(background, 0, 0, canvas.width, canvas.height);
Демо