时间戳

首页 > 解决方案 > 如何获得 4by4 网格来显示我所有的拼图？

javascript - 如何获得 4by4 网格来显示我所有的拼图？

问题描述

我正在尝试制作一个图像益智游戏，其中有一个 4by4 网格来尝试解决洗牌的谜题。我尝试创建一个 4by4 网格，但没有运气，更不用说数组中的每个元素都对应于板上的一块拼图。我尝试为每个图像制作 div，但无法找到一种在板上正确显示它们的方法。如何完成可以对应于数组中元素的 4by4 网格？

注意：我知道我的图像无法正确显示，因为文件尚未转换为堆栈溢出的服务器，暂时忽略它。

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>

标签： javascripthtmlcss

解决方案

你有 HTML 错误弄乱了网格 -</div>错误的地方有标签 - 并且缺少<div>标签

正确的 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>

存在 Javascript 错误 - 它不影响网格

循环控制语句中的增量表达式后面不能有分号

也更喜欢使用let而不是var

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

推荐阅读