Game project issue - Githubissues

KenGibb commented 1 year ago

What's the problem you're trying to solve?

Getting the canvas to draw/render players and setting up a holding/inside container div and format it using grid - and "putting" my canvas INSIDE of it, but not use the grid inside the canvas.

Post any code you think might be relevant (one fenced block per file)

HTML
<div id="container">
        <aside id="top-left"><h2 id="clock">30</h2></aside>
        <aside id="btm-left"><h2 id="health">100</h2></aside>
            <main>
                <button id="button">Start</button>
                <button id="button2">How to Play</button>
                <canvas id="canvas"></canvas>
            </main>
    </div>

CSS
#canvas {
    position: absolute;
    top: 25%;
     left: 100px; 
    /*background-color: white;*/
    border: 5px solid white;
    width: 65em;
    height: 100;
  */  padding: 1em;
 /* display: grid;
  grid-gap: 1em;
  grid-template-rows: .25fr .5fr .25fr;
  grid-template-columns: .25fr .5fr .25fr;
  grid-template-areas: "top-left top-left top-right"
                      "game game game"
                      "btm-left btm-right btm-right";

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

The canvas isn't rendering my player or monster.

What is your best guess as to the source of the problem?

My grid was inside of canvas and I found out you can't put a grid in there.

What things have you already tried to solve the problem?

I tried to move my css grid to a container and it still isn't rendering. And I tried renaming my css.

Paste a link to your repository here

https://github.com/KenGibb/Savethem.git

asands94 commented 1 year ago

I would set up the canvas as shown in the canvas crawler example, to get started with displaying the monster and then go back and do styling in the CSS