Setting backgroundImage in a simple Javascript video game

Question

So I am trying to build a video game based on js. However I encountered an issue: how do I make a background-image as Game Area?

PS: The backgroundImage has specified CSS conditions:

body {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Here is the code:

<body onload="startGame()">
    <script>
        var myGamePiece;
        function startGame() {
            myGameArea.start();
            myGamePiece = new component(30, 30, "red", 10, 120)}
    </script>

Source: https://www.w3schools.com/graphics/tryit.asp?filename=trygame_controllers_keys

score 0 · Answer 1 · edited Aug 24 '20 at 18:22

0

As you are using canvas you can do this:

Load image:

const background = new Image();
const onload = startGame;
background.src = "bg.jpg";

Draw background:

context.drawImage(background, 0, 0, canvas.width, canvas.height);

Demo

edited Aug 24 '20 at 18:22

Brian Lee

17,904
3
41
52

answered Aug 01 '20 at 07:09

Naszos

260
1
10

Thanks Naszos but where do I incorporate this? Ps: please check the source because full code is shown – Aug 01 '20 at 07:18
Okay, so step by step: 1) remove onload="startGame()" from html body element 2) at the end of the js file add loading image 3) in updateGameArea add this: ``` myGameArea.clear(); // after calling clear myGameArea.drawBackground(); ``` 4) add drawBackground method to myGameArea ``` drawBackground: function() { this.context.drawImage(background, 0, 0, this.canvas.width, this.canvas.height); }, clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } ``` – Naszos Aug 01 '20 at 07:24
https://www.w3schools.com/code/tryit.asp?filename=GHBCNI9OTFOS – Naszos Aug 01 '20 at 07:37
As game area you mean whole canvas? If so you need to set canvas size to window size, like here: https://www.w3schools.com/code/tryit.asp?filename=GHBEGL3RJFC3 You can also take a look at my template for creating games/animations on codepen: https://codepen.io/Naszos/pen/VbNGxM?editors=0010 – Naszos Aug 01 '20 at 08:40
If you want to have other html elements on top of your canvas you should probably set "position: absolute;" for canvas in your css so it acts as a background for UI and make UI z-index higher than canvas z-index("z-index: 1;" for UI container in css) – Naszos Aug 01 '20 at 08:50
So basically, the red block moves on the canva section (which is what I call gameArea). Is it possible to make the red block move on the body section instead of canvas? – Aug 01 '20 at 09:03
Depends on what you're trying to accomplish. You can have a html element that shows as rectangle with position absolute and change its left and top style from js and skip canvas stuff completly. You can also make canvas transparent with position absolute and draw only rectangle with rest of body elements on top. Or you can draw everything inside that canvas. You need to specify what you are trying to accomplish exactly. Hard to help not knowing end goal – Naszos Aug 01 '20 at 09:10
Yes! Thanks the first option ("You can have a html element that shows as rectangle with position absolute and change its left and top style from js and skip canvas stuff completly. ") is perfect! Can you please show me how to do this? – Aug 01 '20 at 09:22
1

Here you go: https://codesandbox.io/s/winter-sun-xq83n?file=/src/index.js – Naszos Aug 01 '20 at 09:36
Do you mean package.json? It's mainly for managing dependencies(external libraries), not needed in that case, it's a default template from codesandbox – Naszos Aug 01 '20 at 10:16

Ihor Vyspiansky · Accepted Answer · 2020-08-01T07:16:10.427

0

The following style will specify a background image for canvas ("game area"):

canvas {
  background-image: url(https://some-image-here.jpg);
  /*...*/
}

Demo - https://jsfiddle.net/vyspiansky/qae1jk8p/

edited Aug 01 '20 at 07:16

answered Aug 01 '20 at 07:12

Ihor Vyspiansky

918
1
6
11

Maybe it's your case "Resize HTML5 canvas to fit window" - https://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window – Ihor Vyspiansky Aug 01 '20 at 07:19

Setting backgroundImage in a simple Javascript video game

2 Answers2