CODEWITHSUNDEEP
javascripthtmlcss
hgyicfy chfcfy
hgyicfy chfcfy

Reputation: 39

How do I get a 4by4 grid to display all my puzzle pieces?

I'm trying to make an image puzzle game where there is a 4by4 grid to try to solve a shuffled puzzle. I tried creating a 4by4 grid but had no luck let alone have each element in the array correspond to a puzzle piece on the board. I tried making divs for each image but couldn't figure out a way to display them properly on the board. How do I accomplish a 4by4 grid that can correspond to elements in my array?

Note: I know that my images don't display properly because the files haven't been converted to stack overflow's server, ignore it for now.

var pieces = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,];


function initialize()
{
    for( var i = pieces.length; i<16; i++;){}
}
function shuffle()
{

}
* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background: radial-gradient(#9D5900, #3D2200);
  }
  .game-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    margin: 50px;
    justify-content: center;
    perspective: 500px;
  }
  
  .card {
   
    height: 225px;
    width: 175px;
  }
<!DOCTYPE html>
<html>
    <title></title>
    <link rel="stylesheet" type="text/css" href="PicturePuzzle.css" />
    <script src="PicturePuzzle.js" type="text/javascript"></script>
    <head>
        <body onload = "initialize()">
            <div class="game-container">
            <div class="card">
                  <img src="char1.jpg">
            </div>
                <div class="card">    
        
                  <img src ="char2.jpg">
                </div>

              <div class="card">

                  <img src ="char3.jpg">
                </div>
                <div class="card">
        
                  <img src="char4.jpg">
                </div>
      
              <div class="card">
    
          
                  <img src="char5.jpg">
                </div>
     
                <div class="card">
  
          </div>

                <img src="char6.jpg">
                </div>
  
              <div class="card">
      
          
                  <img src="char7.jpg" >
                
                  <div class="card">
                  <img src="char8.jpg" >
                </div>
      
              <div class="card">
         
          
                  <img src="char9.jpg" >
                </div>
                <div class="card">
         
          
                  <img src="char10.jpg">
                </div>

              <div class="card">
 
          
                  <img src="char11.jpg">
                </div>
         
                <div class="card">

                  <img src="char12.jpg">
                </div>
     
              <div class="card">
         
          
                  <img src="char13.jpg">
                </div>
         
             
          
                  <img src="char14.jpg">
                </div>

              <div class="card">
       
          
                  <img src="char15.jpg">
                </div>
    
              
          
                  <img src="char16.jpg">
                </div>
         
              </div>
            <button onclick = "shuffle()">Shuffle</button>
        </body>
    </head>
</html>

Upvotes: 0

Views: 110

Answers (1)

Zartaj Majeed
Zartaj Majeed

Reputation: 510

You have HTML errors messing up the grid - there are </div> tags in the wrong places - and missing <div> tags

Correct HTML:

<div class=game-container>
  <div class=card>
    <img src=char1.jpg>
  </div>
  <div class=card>    
    <img src=char2.jpg>
  </div>
  <div class=card>
    <img src=char3.jpg>
  </div>
  <div class=card>
    <img src=char4.jpg>
  </div>
  <div class=card>
    <img src=char5.jpg>
  </div>
  <div class=card>
    <img src=char6.jpg>
  </div>
  <div class=card>
    <img src=char7.jpg>
  </div>
  <div class=card>
    <img src=char8.jpg>
  </div>

  <div class=card>
    <img src=char9.jpg>
  </div>
  <div class=card>
    <img src=char10.jpg>
  </div>
  <div class=card>
    <img src=char11.jpg>
  </div>
  <div class=card>
    <img src=char12.jpg>
  </div>
  <div class=card>
    <img src=char13.jpg>
  </div>
  <div class=card>
    <img src=char14.jpg>
  </div>
  <div class=card>
    <img src=char15.jpg>
  </div>
  <div class=card>
    <img src=char16.jpg>
  </div>
</div>

There is a Javascript error - it doesn't affect the grid

There should be no semicolon after the increment expression in loop control statement

Also prefer to use let instead of var

for(let i=pieces.length; i<16; i++) {}

Upvotes: 2

Related Questions