New course! Every coder should learn Generative AI!
Try a free lesson0
Backgrounds
i made a background using html but it is only visible after my game runs all it's code and seeing when my game is completed it will have a lot of code to run. Can anyone help me mae my background visible when my game has started
9 Answers
+ 2
Could you paste the code that draws your background here? Could be that you're just implementing it incorrectly. It'll be a lot easier to diagnose the problem with something to reference.
+ 2
There doesn't appear to be anything wrong with the way you're drawing your background. Since I can only take a gander at what the rest of your code is like, I'll do my best to explain a possible solution below.
To have it draw along with the game functions, I would put this in its own separate function. (I typically name my draw functions drawImg();) Note that doing this will make c and ctx local variables, so define these outside the function if you want to use these variables elsewhere in your code. Make sure your game logic is also in its own function. If you've already done this to start, great.
Now, I would put a "play" button that, on click, will launch both your game logic and draw functions back-to-back.. This can be done in basic html like:
<button onclick='drawImg(); gameLogic();'>Play Game</button>
^Notice how we are drawing your game before executing the logic. Be sure to define a loop that will update these functions constantly (I use setInterval) so your game logic and images are constantly being performed.
There are, of course, more creative ways to go about making a play button. Now if you click the play button, you shouldn't have to wait for your game to draw before the entire game is finished.
If this doesn't work or if I'm misunderstanding your question, please clarify some more.
Also, a helpful tip for games, you'll need to refresh the canvas every time something drawn on the screen is going to change. This can be done by simple redefining the canvas width like so:
c.width = c.width; //This will wipe the canvas clean
drawImg(); //This will call your draw function again to update textures
+ 2
Here is the modified code. I did not include the loop in case you really don't need it, but if you do, just ask. I went ahead and commented what I threw in myself so you can see what I changed.
<!DOCTYPE html>
<html>
<body>
<button onclick="drawImg(); gameLogic();">Play Game</button> <!--ADDED-->
<canvas id="myCanvas" width="520" height="440" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
//Please do not scroll down it will just make your "world" look odd
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function gameLogic() { //ADDED
//Your game code here
}
function drawImg() { //ADDED
ctx.beginPath();
ctx.rect(2, 390, 518, 100);
ctx.fillStyle = "green";
ctx.fill();
ctx.beginPath();
ctx.rect(80, 290, 50, 100);
ctx.fillStyle = "brown";
ctx.fill();
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(100, 290, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.rect(270, 290, 50, 100);
ctx.fillStyle = "brown";
ctx.fill();
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(290, 290, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
} //ADDED
</script>
</body>
</html>
0
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="520" height="440" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
//Please do not scroll down it will just make your "world" look odd
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(2, 390, 518, 100);
ctx.fillStyle = "green";
ctx.fill();
ctx.beginPath();
ctx.rect(80, 290, 50, 100);
ctx.fillStyle = "brown";
ctx.fill();
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(100, 290, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.rect(270, 290, 50, 100);
ctx.fillStyle = "brown";
ctx.fill();
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(290, 290, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
Thanks for the help
0
I am sort of comfortable with html javascript and css so it is kind of hard to know my mistakes
0
Could you please explain simpler how to do that like by typing code, I am not that great with html and js
0
Could you please write my code correctly again here with all the things you mentioned if that is ok?
0
Thanks, I really appreciate it. I will put you in the credits for my game as a token of my gratitude
0
could you please put in the loop
Often have questions like this?
Learn more efficiently, for free:
Hot today
Why exception is not handled
1 Votes
Please help
0 Votes
Links of cmy codes
5 Votes
Tips for first app
1 Votes
Link
6 Votes
Ruby
2 Votes
Please help i want some courses.
2 Votes