如何使用箭头键在网格中行之间移动图像?(JavaScript)

Question

我正在创建一个玩家使用箭头键在单元格之间移动的游戏。我已经让玩家使用方向键向左/向右移动，但是，向上键;向下箭头键不起作用，当我运行代码时返回此错误:

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="imagestrain-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="imagespigeon.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="imagespigeon.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="imagespigeon.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="imagespigeon.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="imagesrastafari.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: $没有定义at HTMLDocument.detectKey (game.js:19)

我如何让玩家使用方向键垂直移动?

Answer 1

我摆弄了一下代码，得到了一些有用的东西。我最初的建议是，你不应该尝试用普通javaScript做左右，用jQuery做上下。我使用jQuery来完成这个工作，但它当然也可以用普通的javaScript来完成。

我做的第一件事是创建一个全局变量n，它跟踪我们在网格中的位置，所以当你按左或右箭头时，它会从n中添加1或减去1，向上和向下箭头会添加或减去25。

对于我们的每一个小小的if语句，我都使它们更通用一些。首先，它选择玩家所在的当前div，并使用jQuery中的.html()函数获取HTML(作为字符串)，然后我们可以使用它。我注意到，在你的初始代码中，当你试图添加.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="imagestrain-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="imagespigeon.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="imagespigeon.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="imagespigeon.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="imagespigeon.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="imagesrastafari.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>