如何使用箭頭鍵在網格中的行之間向上/向下移動影像？(JavaScript)-有解無憂

我正在創建一個游戲，其中玩家使用箭頭鍵在單元格之間移動View Game Here。我已經讓玩家使用箭頭鍵向左/向右移動，但是，向上和向下箭頭鍵不起作用并在我運行代碼時回傳此錯誤：

const cells= Array.from(document.querySelectorAll(".cell"));
const pigeoncells= cells.slice(23,122);
const rastacell=cells.slice(0,272);
let ScoreDisplay=document.querySelector(".score");



document.onkeydown = detectKey;

function detectKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
        let player =  document.getElementById('player');
       let n= player.parentElement.getAttribute("id");
       n  = 25;
       $("#n").append("player");
       
    }
    else if (e.keyCode == '40') {
        // down arrow
        let player =  document.getElementById('player');
        let n= player.parentElement.getAttribute("id");
        n -= 25;
        $("#n").append("player");
    }
    else if (e.keyCode == '37') {
       // left arrow
      let player =  document.getElementById('player');
        player.parentElement.previousElementSibling.appendChild(player);
    }
    else if (e.keyCode == '39') {
       // right arrow
       let player =  document.getElementById('player');
       player.parentElement.nextElementSibling.appendChild(player);
    }

}

body{
    margin:0px;
    background-color: black;
}

header{
    text-align: center;
    font-family: Staatliches,roboto,Gluten,Arial Black;
    color: yellowgreen;                                      /*Header and Scoreboard stylng*/
    padding-top:15px;
}

.container{
   
    padding-right:20px;
    padding-left:40px;
    padding-top: 40px;
    width:0vw;
    height: 0vh;
}


.grid{
    
    display: inline-grid;
    grid-template-columns: repeat(25,60px);
    padding: 0px;
    gap:0px;
}

.cell{
    height: 60px;
    border: 1px dotted violet;
    background-color: rgba(44, 44, 44, 0.39);
}

.train-station{
  border-top: 1px dotted violet;
  background-color:lightgray;
}

.train{
  height:58px;
  width:58px;
}

.rail{
  padding-top: 43px;
}

/*Blocks*/
.block{
  background-color:darkgreen;
  height: 60px;
  width: 60px;

}

/* Insert Pigeon*/

.pigeon{
  height:58px;
  width: 58px;
}

/*Animate Rasta*/

.rasta{
  padding-top:0px;
  padding-left: 1px;
  height:50px;
  width: 50px;
  animation: bounce 0.3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);}
  to { transform: translate3d(0, 10px, 0);}
}

<div class="container">
    <div class="grid" class=grid-1>
        <div class="cell" id="1"></div>
        <div class="cell" id="2"></div>
        <div class="cell" id="3"></div>
        <div class="cell" id="4"></div>
        <div class="cell" id="5"></div>
        <div class="cell" id="6"></div>
        <div class="cell" id="7"></div>
        <div class="cell" id="8"></div>
        <div class="cell" id="9"></div>
        <div class="cell" id="10"></div>
        <div class="cell" id="11"></div>
        <div class="train-station" id="12"><div class="rail"><b >.........................</b></div></div>
        <div class="train-station" id="13"><img class="train" src="images\train-2.png"></div>
        <div class="train-station" id="-14"><div class="rail"><b >.........................</b></div></div>
        <div class="cell" id="15"></div>
        <div class="cell" id="16"></div>
        <div class="cell" id="17"></div>
        <div class="cell" id="18"></div>
        <div class="cell" id="19"></div>
        <div class="cell" id="20"></div>
        <div class="cell" id="21"></div>
        <div class="cell" id="22"></div>
        <div class="cell" id="23"></div>
        <div class="cell" id="24"></div>
        <div class="cell" id="25"></div>    
    </div>
    <div class="grid" class="grid-2">
        <div class="cell" id="26"></div>
        <div class="cell" id="27"></div>
        <div class="cell" id="28"></div>
        <div class="cell" id="29"></div>
        <div class="cell" id="30"></div>
        <div class="cell" id="31"></div>
        <div class="cell" id="32"></div>
        <div class="cell" id="33"></div>
        <div class="cell" id="34"></div>
        <div class="cell" id="35"></div>
        <div class="cell" id="36"></div>
        <div class="cell" id="37"></div>
        <div class="cell" id="38"></div>
        <div class="cell" id="39"></div>
        <div class="cell" id="40"></div>
        <div class="cell" id="41"></div>
        <div class="cell" id="42"></div>
        <div class="cell" id="43"></div>
        <div class="cell" id="44"></div>
        <div class="cell" id="45"></div>
        <div class="cell" id="46"></div>
        <div class="cell" id="47"></div>
        <div class="cell" id="48"></div>
        <div class="cell" id="49"></div>
        <div class="cell" id="50"></div>
    </div>
    <div class="grid" class="grid-3">
        <div class="cell" id="51"></div>
        <div class="cell" id="52"></div>
        <div class="cell" id="53"></div>
        <div class="cell" id="54"></div>
        <div class="cell" id="55"></div>
        <div class="cell" id="56"></div>
        <div class="cell" id="57"></div>
        <div class="cell" id="58"></div>
        <div class="cell" id="59"></div>
        <div class="cell" id="60"></div>
        <div class="cell" id="61"><img class="pigeon" src="images\pigeon.png"></div>
        <div class="cell" id="62"></div>
        <div class="cell" id="63"></div>
        <div class="cell" id="64"></div>
        <div class="cell" id="65"></div>
        <div class="cell" id="66"></div>
        <div class="cell" id="67"></div>
        <div class="cell" id="68"></div>
        <div class="cell" id="69"></div>
        <div class="cell" id="70"></div>
        <div class="cell" id="71"></div>
        <div class="cell" id="72"></div>
        <div class="cell" id="73"></div>
        <div class="cell" id="74"></div>
        <div class="cell" id="75"></div>     
    </div>
    <div class="grid" class="grid-4">
        <div class="cell" id="76"><img class="pigeon" src="images\pigeon.png"></div>
        <div class="cell" id="77"></div>
        <div class="cell" id="78"></div>
        <div class="cell" id="79"></div>
        <div class="cell" id="80"></div>
        <div class="cell" id="81"></div>
        <div class="cell" id="82"></div>
        <div class="cell" id="83"></div>
        <div class="cell" id="84"></div>
        <div class="cell" id="85"></div>
        <div class="cell" id="86"></div>
        <div class="cell" id="87"></div>
        <div class="cell" id="88"></div>
        <div class="cell" id="89"></div>
        <div class="cell" id="90"></div>
        <div class="cell" id="91"></div>
        <div class="cell" id="92"></div>
        <div class="cell" id="93"></div>
        <div class="cell" id="94"></div>
        <div class="cell" id="95"></div>
        <div class="cell" id="96"></div>
        <div class="cell" id="97"></div>
        <div class="cell" id="98"><img class="pigeon" src="images\pigeon.png"></div>
        <div class="cell" id="99"></div>
        <div class="cell" id="100"></div>
    </div>
    <div class="grid" class="grid-5">
        <div class="cell" id="101"></div>
        <div class="cell" id="102"></div>
        <div class="cell" id="103"></div>
        <div class="cell" id="104"></div>
        <div class="cell" id="105"></div>
        <div class="cell" id="106"></div>
        <div class="cell" id="107"></div>
        <div class="cell" id="108"></div>
        <div class="cell" id="109"></div>
        <div class="cell" id="110"></div>
        <div class="cell" id="111"></div>
        <div class="cell" id="112"></div>
        <div class="cell" id="113"><img class="pigeon" src="images\pigeon.png"></div>
        <div class="cell" id="114"></div>
        <div class="cell" id="115"></div>
        <div class="cell" id="116"></div>
        <div class="cell" id="117"></div>
        <div class="cell" id="118"></div>
        <div class="cell" id="119"></div>
        <div class="cell" id="120"></div>
        <div class="cell" id="121"></div>
        <div class="cell" id="122"><div  class="block"  class="block2"></div></div>
        <div class="cell" id="123"><div  class="block"  class="block2"></div></div>
        <div class="cell" id="124"></div>
        <div class="cell" id="125"></div>   
    </div>
    <div class="grid" class="grid-6">
        <div class="cell" id="126"><div class="block" class="block3"></div></div>
        <div class="cell" id="127"></div>
        <div class="cell" id="128"></div>
        <div class="cell" id="129"></div>
        <div class="cell" id="130"></div>
        <div class="cell" id="131"></div>
        <div class="cell" id="132"></div>
        <div class="cell" id="133"></div>
        <div class="cell" id="134"></div>
        <div class="cell" id="135"></div>
        <div class="cell" id="136"></div>
        <div class="cell" id="137"></div>
        <div class="cell" id="138"></div>
        <div class="cell" id="139"></div>
        <div class="cell" id="140"></div>
        <div class="cell" id="141"></div>
        <div class="cell" id="142"></div>
        <div class="cell" id="143"></div>
        <div class="cell" id="144"></div>
        <div class="cell" id="145"><div class="block"  class="block1"></div></div>
        <div class="cell" id="146"><div class="block"  class="block1"></div></div>
        <div class="cell" id="147"><div class="block"  class="block1"></div></div>
        <div class="cell" id="148"><div class="block"  class="block1"></div></div>
        <div class="cell" id="149"></div>
        <div class="cell" id="150"></div>   
    </div>
    <div class="grid" class="grid-7">
        <div class="cell" id="151"><div class="block" class="block2"></div></div>
        <div class="cell" id="152"><div class="block" class="block2"></div></div>
        <div class="cell" id="153"></div>
        <div class="cell" id="154"></div>
        <div class="cell" id="155"></div>
        <div class="cell" id="156"></div>
        <div class="cell" id="157"></div>
        <div class="cell" id="158"></div>
        <div class="cell" id="159"><div class="block" class="block1"></div></div>
        <div class="cell" id="160"><div class="block" class="block1"></div></div>
        <div class="cell" id="161"><div class="block" class="block1"></div></div>
        <div class="cell" id="162"><div class="block" class="block1"></div></div>
        <div class="cell" id="163"><div class="block" class="block1"></div></div>
        <div class="cell" id="164"></div>
        <div class="cell" id="165"></div>
        <div class="cell" id="166"></div>
        <div class="cell" id="167"></div>
        <div class="cell" id="168"></div>
        <div class="cell" id="169"></div>
        <div class="cell" id="170"></div>
        <div class="cell" id="171"></div>
        <div class="cell" id="172"></div>
        <div class="cell" id="173"></div>
        <div class="cell" id="174"></div>
        <div class="cell" id="175"></div> 
    </div>
    <div class="grid" class="grid-8">
        <div class="cell" id="176"><div class="block" class="block1"></div></div>
        <div class="cell" id="177"><div class="block" class="block1"></div></div>
        <div class="cell" id="178"><div class="block" class="block1"></div></div>
        <div class="cell" id="179"></div>
        <div class="cell" id="180"></div>
        <div class="cell" id="181"><div class="block"  class="block2"></div></div>
        <div class="cell" id="182"></div>
        <div class="cell" id="183"></div>
        <div class="cell" id="184"></div>
        <div class="cell" id="185"></div>
        <div class="cell" id="186"></div>
        <div class="cell" id="187"></div>
        <div class="cell" id="188"></div>
        <div class="cell" id="189"></div>
        <div class="cell" id="190"></div>
        <div class="cell" id="191"></div>
        <div class="cell" id="192"></div>
        <div class="cell" id="193"></div>
        <div class="cell" id="194"></div>
        <div class="cell" id="195"></div>
        <div class="cell" id="196"></div>
        <div class="cell" id="197"></div>
        <div class="cell" id="198"></div>
        <div class="cell" id="199"></div>
        <div class="cell" id="200"></div>
    </div>  
    <div class="grid" class="grid-9">
        <div class="cell" id="201"></div>
        <div class="cell" id="202"></div>
        <div class="cell" id="203"></div>
        <div class="cell" id="204"></div>
        <div class="cell" id="205"><div class="block"  class="block1"></div></div>
        <div class="cell" id="206"><div class="block"  class="block1"></div></div>
        <div class="cell" id="207"><div class="block"  class="block1"></div></div>
        <div class="cell" id="208"></div>
        <div class="cell" id="209"></div>
        <div class="cell" id="210"></div>
        <div class="cell" id="211"></div>
        <div class="cell" id="212"></div>
        <div class="cell" id="213"></div>
        <div class="cell" id="214"></div>
        <div class="cell" id="215"></div>
        <div class="cell" id="216"><div class="block" class="block3"></div></div>
        <div class="cell" id="217"></div>
        <div class="cell" id="218"></div>
        <div class="cell" id="219"></div>
        <div class="cell" id="220"></div>
        <div class="cell" id="221"></div>
        <div class="cell" id="222"></div>
        <div class="cell" id="223"></div>
        <div class="cell" id="224"></div>
        <div class="cell" id="225"></div>
    </div>  
    <div class="grid" class=grid-10>
        <div class="cell" id="226"></div>
        <div class="cell" id="227"></div>
        <div class="cell" id="228"></div>
        <div class="cell" id="229"><div class="block"  class="block1"></div></div>
        <div class="cell" id="230"><div class="block"  class="block1"></div></div>
        <div class="cell" id="231"><div class="block"  class="block1"></div></div>
        <div class="cell" id="232"><div class="block"  class="block1"></div></div>
        <div class="cell" id="233"><div class="block"  class="block1"></div></div>
        <div class="cell" id="234"><div class="block"  class="block1"></div></div>
        <div class="cell" id="235"><div class="block"  class="block1"></div></div>
        <div class="cell" id="236"></div>
        <div class="cell" id="237"></div>
        <div class="cell" id="238"></div>
        <div class="cell" id="239"></div>
        <div class="cell" id="240"><div  class="block"  class="block2"></div></div>
        <div class="cell" id="241"><div  class="block"  class="block2"></div></div>
        <div class="cell" id="242"></div>
        <div class="cell" id="243"></div>
        <div class="cell" id="244"></div>
        <div class="cell" id="245"></div>
        <div class="cell" id="246"></div>
        <div class="cell" id="247"></div>
        <div class="cell" id="248"></div>
        <div class="cell" id="249"></div>
        <div class="cell" id="250"></div>
    </div>  
    <div class="grid" class="grid-11">
        <div class="cell" id="251"></div>
        <div class="cell" id="252"></div>
        <div class="cell" id="253"></div>
        <div class="cell" id="254"></div>
        <div class="cell" id="255"></div>
        <div class="cell" id="256"></div>
        <div class="cell" id="257"></div>
        <div class="cell" id="258"></div>
        <div class="cell" id="259"></div>
        <div class="cell" id="260"></div>
        <div class="cell" id="261"><div class="block"  class="block1"></div></div>
        <div class="cell" id="262"><div class="block"  class="block1"></div></div>
        <div class="cell" id="263">
      <div id="player"> <img class="rasta" src="images\rastafari.png"></div> 
         </div>
        <div class="cell" id="264"><div class="block"  class="block1"></div></div>
        <div class="cell" id="265"><div class="block"  class="block1"></div></div>
        <div class="cell" id="266"><div class="block"  class="block1"></div></div>
        <div class="cell" id="267"></div>
        <div class="cell" id="268"></div>
        <div class="cell" id="269"></div>
        <div class="cell" id="270"></div>
        <div class="cell" id="271"></div>
        <div class="cell" id="272"></div>
        <div class="cell" id="273"></div>
        <div class="cell" id="274"></div>
        <div class="cell" id="275"></div>   
    </div>  
</div>

Uncaught ReferenceError: $ is not defined at HTMLDocument.detectKey (game.js:19)

如何使用箭頭鍵讓玩家垂直移動？

uj5u.com熱心網友回復：

我玩了一會兒代碼，得到了一些有用的東西。我最初的建議是，您不應該嘗試使用 vanilla javaScript 進行左右操作，而使用 jQuery 進行上下操作。我使用 jQuery 來實作它，但它當然也可以使用 vanilla javaScript 來完成。

我做的第一件事是創建一個全域變數n來跟蹤我們在網格中的位置，所以當你按下向左或向右箭頭時，它要么加 1 要么減 1 n，向上和向下箭頭要么加要么減 25。

對于我們的每個小 if 陳述句，我都使它們更通用一些。首先它選擇播放器所在的當前 div，然后使用.html()jQuery 中的函式獲取 HTML（作為字串），然后我們可以使用它。我注意到在您嘗試添加 player 變數時的初始代碼中，.append()您收到了有關字串文字的錯誤。由于播放器的選擇是一個 jQuery 物件，因此無法附加它，因為.append()它接受一個字串（又名“Hello, World！”）。其次，當我們從.html()（它是一個字串）得到回應時，我們就可以將它附加到網格中的一個新位置。這樣做意味著我們正在移動位置，因此n需要像我上面所說的那樣進行更改。請注意，我還用于.empty()清除前一個塊中的播放器。最后，我們可以追加player看起來像

<div id="player"><img src="some_img_url.jpg"></div>

進入我們的新位置（將在n）。

在查看代碼片段之前，還值得一提的是，為了確保玩家不會穿過方塊（我認為這是游戲的一部分），我們需要檢查我們試圖移動的方塊不是充滿了一些東西。這最好放在一個函式中（因為我們需要為所有函式做這件事。像下面這樣的東西將是一般要點：

function isClear(newN) { // as in the n we're trying to move to
  let children = $("#"   newN).children(".block");
  
  // if there is a child with the class block (the green squares)
  // then we can return true (which assumedly means we can't move there)
  
  if (children.length)
    return true;
  else
    return false;
}

如果這是一個不正確的假設，您可以忽略該片段。這是帶有更正代碼的主要片段（我只更改了 JS）：

const cells= Array.from(document.querySelectorAll(".cell"));
const pigeoncells= cells.slice(23,122);
const rastacell=cells.slice(0,272);
let ScoreDisplay=document.querySelector(".score");
let n = 263;

document.onkeydown = detectKey;

function detectKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
        let player =  $("#"   n).html();
        $("#"   n).empty();
      
        n -= 25;

        $("#"   n).append(player);
      
    }
    else if (e.keyCode == '40') {
        // down arrow
        let player = $("#"   n).html();
        $("#"   n).empty();
      
        n  = 25;
        $("#"   n).append(player);
    }
    else if (e.keyCode == '37') {
        // left arrow
        let player =  $("#"   n).html();
        $("#"   n).empty();
      
        n--;
        $("#"   n).append(player);
    }
    else if (e.keyCode == '39') {
        // right arrow
        let player =  $("#"   n).html();
        $("#"   n).empty();
      
        // move over one block
        n  ;
        $("#"   n).append(player);
    }

}

body{
    margin:0px;
    background-color: black;
}

header{
    text-align: center;
    font-family: Staatliches,roboto,Gluten,Arial Black;
    color: yellowgreen;                                      /*Header and Scoreboard stylng*/
    padding-top:15px;
}

.container{
   
    padding-right:20px;
    padding-left:40px;
    padding-top: 40px;
    width:0vw;
    height: 0vh;
}


.grid{
    
    display: inline-grid;
    grid-template-columns: repeat(25,60px);
    padding: 0px;
    gap:0px;
}

.cell{
    height: 60px;
    border: 1px dotted violet;
    background-color: rgba(44, 44, 44, 0.39);
}

.train-station{
  border-top: 1px dotted violet;
  background-color:lightgray;
}

.train{
  height:58px;
  width:58px;
}

.rail{
  padding-top: 43px;
}

/*Blocks*/
.block{
  background-color:darkgreen;
  height: 60px;
  width: 60px;

}

/* Insert Pigeon*/

.pigeon{
  height:58px;
  width: 58px;
}

/*Animate Rasta*/

.rasta{
  padding-top:0px;
  padding-left: 1px;
  height:50px;
  width: 50px;
  animation: bounce 0.3s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);}
  to { transform: translate3d(0, 10px, 0);}
}

<html>
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
<div class="container">
    <div class="grid" class=grid-1>
        <div class="cell" id="1"></div>
        <div class="cell" id="2"></div>
        <div class="cell" id="3"></div>
        <div class="cell" id="4"></div>
        <div class="cell" id="5"></div>
        <div class="cell" id="6"></div>
        <div class="cell" id="7"></div>
        <div class="cell" id="8"></div>
        <div class="cell" id="9"></div>
        <div class="cell" id="10"></div>
        <div class="cell" id="11"></div>
        <div class="train-station" id="12"><div class="rail"><b >.........................</b></div></div>
        <div class="train-station" id="13"><img class="train" src="images\train-2.png"></div>
        <div class="train-station" id="-14"><div class="rail"><b >.........................</b></div></div>
        <div class="cell" id="15"></div>
        <div class="cell" id="16"></div>
        <div class="cell" id="17"></div>
        <div class="cell" id="18"></div>
        <div class="cell" id="19"></div>
        <div class="cell" id="20"></div>
        <div class="cell" id="21"></div>
        <div class="cell" id="22"></div>
        <div class="cell" id="23"></div>
        <div class="cell" id="24"></div>
        <div class="cell" id="25"></div>    
    </div>
    <div class="grid" class="grid-2">
        <div class="cell" id="26"></div>
        <div class="cell" id="27"></div>
        <div class="cell" id="28"></div>
        <div class="cell" id="29"></div>
        <div class="cell" id="30"></div>
        <div class="cell" id="31"></div>
        <div class="cell" id="32"></div>
        <div class="cell" id="33"></div>
        <div class="cell" id="34"></div>
        <div class="cell" id="35"></div>
        <div class="cell" id="36"></div>
        <div class="cell" id="37"></div>
        <div class="cell" id="38"></div>
        <div class="cell" id="39"></div>
        <div class="cell" id="40"></div>
        <div class="cell" id="41"></div>
        <div class="cell" id="42"></div>
        <div class="cell" id="43"></div>
        <div class="cell" id="44"></div>
        <div class="cell" id="45"></div>
        <div class="cell" id="46"></div>
        <div class="cell" id="47"></div>
        <div class="cell" id="48"></div>
        <div class="cell" id="49"></div>
        <div class="cell" id="50"></div>
    </div>
    <div class="grid" class="grid-3">
        <div class="cell" id="51"></div>
        <div class="cell" id="52"></div>
        <div class="cell" id="53"></div>
        <div class="cell" id="54"></div>
        <div class="cell" id="55"></div>
        <div class="cell" id="56"></div>
        <div class="cell" id="57"></div>
        <div class="cell" id="58"></div>
        <div class="cell" id="59"></div>
        <div class="cell" id="60"></div>
        <div class="cell" id="61"><img class="pigeon" src="images\pigeon.png"></div>
        <div class="cell" id="62"></div>
        <div class="cell" id="63"></div>
        <div class="cell" id="64"></div>
        <div class="cell" id="65"></div>
        <div class="cell" id="66"></div>
        <div class="cell" id="67"></div>
        <div class="cell" id="68"></div>
        <div class="cell" id="69"></div>
        <div class="cell" id="70"></div>
        <div class="cell" id="71"></div>
        <div class="cell" id="72"></div>
        <div class="cell" id="73"></div>
        <div class="cell" id="74"></div>
        <div class="cell" id="75"></div>     
    </div>
    <div class="grid" class="grid-4">
        <div class="cell" id="76"><img class="pigeon" src="images\pigeon.png"></div>
        <div class="cell" id="77"></div>
        <div class="cell" id="78"></div>
        <div class="cell" id="79"></div>
        <div class="cell" id="80"></div>
        <div class="cell" id="81"></div>
        <div class="cell" id="82"></div>
        <div class="cell" id="83"></div>
        <div class="cell" id="84"></div>
        <div class="cell" id="85"></div>
        <div class="cell" id="86"></div>
        <div class="cell" id="87"></div>
        <div class="cell" id="88"></div>
        <div class="cell" id="89"></div>
        <div class="cell" id="90"></div>
        <div class="cell" id="91"></div>
        <div class="cell" id="92"></div>
        <div class="cell" id="93"></div>
        <div class="cell" id="94"></div>
        <div class="cell" id="95"></div>
        <div class="cell" id="96"></div>
        <div class="cell" id="97"></div>
        <div class="cell" id="98"><img class="pigeon" src="images\pigeon.png"></div>
        <div class="cell" id="99"></div>
        <div class="cell" id="100"></div>
    </div>
    <div class="grid" class="grid-5">
        <div class="cell" id="101"></div>
        <div class="cell" id="102"></div>
        <div class="cell" id="103"></div>
        <div class="cell" id="104"></div>
        <div class="cell" id="105"></div>
        <div class="cell" id="106"></div>
        <div class="cell" id="107"></div>
        <div class="cell" id="108"></div>
        <div class="cell" id="109"></div>
        <div class="cell" id="110"></div>
        <div class="cell" id="111"></div>
        <div class="cell" id="112"></div>
        <div class="cell" id="113"><img class="pigeon" src="images\pigeon.png"></div>
        <div class="cell" id="114"></div>
        <div class="cell" id="115"></div>
        <div class="cell" id="116"></div>
        <div class="cell" id="117"></div>
        <div class="cell" id="118"></div>
        <div class="cell" id="119"></div>
        <div class="cell" id="120"></div>
        <div class="cell" id="121"></div>
        <div class="cell" id="122"><div  class="block"  class="block2"></div></div>
        <div class="cell" id="123"><div  class="block"  class="block2"></div></div>
        <div class="cell" id="124"></div>
        <div class="cell" id="125"></div>   
    </div>
    <div class="grid" class="grid-6">
        <div class="cell" id="126"><div class="block" class="block3"></div></div>
        <div class="cell" id="127"></div>
        <div class="cell" id="128"></div>
        <div class="cell" id="129"></div>
        <div class="cell" id="130"></div>
        <div class="cell" id="131"></div>
        <div class="cell" id="132"></div>
        <div class="cell" id="133"></div>
        <div class="cell" id="134"></div>
        <div class="cell" id="135"></div>
        <div class="cell" id="136"></div>
        <div class="cell" id="137"></div>
        <div class="cell" id="138"></div>
        <div class="cell" id="139"></div>
        <div class="cell" id="140"></div>
        <div class="cell" id="141"></div>
        <div class="cell" id="142"></div>
        <div class="cell" id="143"></div>
        <div class="cell" id="144"></div>
        <div class="cell" id="145"><div class="block"  class="block1"></div></div>
        <div class="cell" id="146"><div class="block"  class="block1"></div></div>
        <div class="cell" id="147"><div class="block"  class="block1"></div></div>
        <div class="cell" id="148"><div class="block"  class="block1"></div></div>
        <div class="cell" id="149"></div>
        <div class="cell" id="150"></div>   
    </div>
    <div class="grid" class="grid-7">
        <div class="cell" id="151"><div class="block" class="block2"></div></div>
        <div class="cell" id="152"><div class="block" class="block2"></div></div>
        <div class="cell" id="153"></div>
        <div class="cell" id="154"></div>
        <div class="cell" id="155"></div>
        <div class="cell" id="156"></div>
        <div class="cell" id="157"></div>
        <div class="cell" id="158"></div>
        <div class="cell" id="159"><div class="block" class="block1"></div></div>
        <div class="cell" id="160"><div class="block" class="block1"></div></div>
        <div class="cell" id="161"><div class="block" class="block1"></div></div>
        <div class="cell" id="162"><div class="block" class="block1"></div></div>
        <div class="cell" id="163"><div class="block" class="block1"></div></div>
        <div class="cell" id="164"></div>
        <div class="cell" id="165"></div>
        <div class="cell" id="166"></div>
        <div class="cell" id="167"></div>
        <div class="cell" id="168"></div>
        <div class="cell" id="169"></div>
        <div class="cell" id="170"></div>
        <div class="cell" id="171"></div>
        <div class="cell" id="172"></div>
        <div class="cell" id="173"></div>
        <div class="cell" id="174"></div>
        <div class="cell" id="175"></div> 
    </div>
    <div class="grid" class="grid-8">
        <div class="cell" id="176"><div class="block" class="block1"></div></div>
        <div class="cell" id="177"><div class="block" class="block1"></div></div>
        <div class="cell" id="178"><div class="block" class="block1"></div></div>
        <div class="cell" id="179"></div>
        <div class="cell" id="180"></div>
        <div class="cell" id="181"><div class="block"  class="block2"></div></div>
        <div class="cell" id="182"></div>
        <div class="cell" id="183"></div>
        <div class="cell" id="184"></div>
        <div class="cell" id="185"></div>
        <div class="cell" id="186"></div>
        <div class="cell" id="187"></div>
        <div class="cell" id="188"></div>
        <div class="cell" id="189"></div>
        <div class="cell" id="190"></div>
        <div class="cell" id="191"></div>
        <div class="cell" id="192"></div>
        <div class="cell" id="193"></div>
        <div class="cell" id="194"></div>
        <div class="cell" id="195"></div>
        <div class="cell" id="196"></div>
        <div class="cell" id="197"></div>
        <div class="cell" id="198"></div>
        <div class="cell" id="199"></div>
        <div class="cell" id="200"></div>
    </div>  
    <div class="grid" class="grid-9">
        <div class="cell" id="201"></div>
        <div class="cell" id="202"></div>
        <div class="cell" id="203"></div>
        <div class="cell" id="204"></div>
        <div class="cell" id="205"><div class="block"  class="block1"></div></div>
        <div class="cell" id="206"><div class="block"  class="block1"></div></div>
        <div class="cell" id="207"><div class="block"  class="block1"></div></div>
        <div class="cell" id="208"></div>
        <div class="cell" id="209"></div>
        <div class="cell" id="210"></div>
        <div class="cell" id="211"></div>
        <div class="cell" id="212"></div>
        <div class="cell" id="213"></div>
        <div class="cell" id="214"></div>
        <div class="cell" id="215"></div>
        <div class="cell" id="216"><div class="block" class="block3"></div></div>
        <div class="cell" id="217"></div>
        <div class="cell" id="218"></div>
        <div class="cell" id="219"></div>
        <div class="cell" id="220"></div>
        <div class="cell" id="221"></div>
        <div class="cell" id="222"></div>
        <div class="cell" id="223"></div>
        <div class="cell" id="224"></div>
        <div class="cell" id="225"></div>
    </div>  
    <div class="grid" class=grid-10>
        <div class="cell" id="226"></div>
        <div class="cell" id="227"></div>
        <div class="cell" id="228"></div>
        <div class="cell" id="229"><div class="block"  class="block1"></div></div>
        <div class="cell" id="230"><div class="block"  class="block1"></div></div>
        <div class="cell" id="231"><div class="block"  class="block1"></div></div>
        <div class="cell" id="232"><div class="block"  class="block1"></div></div>
        <div class="cell" id="233"><div class="block"  class="block1"></div></div>
        <div class="cell" id="234"><div class="block"  class="block1"></div></div>
        <div class="cell" id="235"><div class="block"  class="block1"></div></div>
        <div class="cell" id="236"></div>
        <div class="cell" id="237"></div>
        <div class="cell" id="238"></div>
        <div class="cell" id="239"></div>
        <div class="cell" id="240"><div  class="block"  class="block2"></div></div>
        <div class="cell" id="241"><div  class="block"  class="block2"></div></div>
        <div class="cell" id="242"></div>
        <div class="cell" id="243"></div>
        <div class="cell" id="244"></div>
        <div class="cell" id="245"></div>
        <div class="cell" id="246"></div>
        <div class="cell" id="247"></div>
        <div class="cell" id="248"></div>
        <div class="cell" id="249"></div>
        <div class="cell" id="250"></div>
    </div>  
    <div class="grid" class="grid-11">
        <div class="cell" id="251"></div>
        <div class="cell" id="252"></div>
        <div class="cell" id="253"></div>
        <div class="cell" id="254"></div>
        <div class="cell" id="255"></div>
        <div class="cell" id="256"></div>
        <div class="cell" id="257"></div>
        <div class="cell" id="258"></div>
        <div class="cell" id="259"></div>
        <div class="cell" id="260"></div>
        <div class="cell" id="261"><div class="block"  class="block1"></div></div>
        <div class="cell" id="262"><div class="block"  class="block1"></div></div>
        <div class="cell" id="263">
      <div id="player"> <img class="rasta" src="images\rastafari.png"></div> 
         </div>
        <div class="cell" id="264"><div class="block"  class="block1"></div></div>
        <div class="cell" id="265"><div class="block"  class="block1"></div></div>
        <div class="cell" id="266"><div class="block"  class="block1"></div></div>
        <div class="cell" id="267"></div>
        <div class="cell" id="268"></div>
        <div class="cell" id="269"></div>
        <div class="cell" id="270"></div>
        <div class="cell" id="271"></div>
        <div class="cell" id="272"></div>
        <div class="cell" id="273"></div>
        <div class="cell" id="274"></div>
        <div class="cell" id="275"></div>   
    </div>  
</div>
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/334618.html

標籤：javascript html 查询 css 细胞

上一篇：使用標題和相關標題值對json資料進行排序

下一篇：隱藏div是孩子是空的