I am creating a game where the player moves between cells using the arrow keys View Game Here. I've gotten the player to move left/right using the arrow keys however, the Up & Down Arrow keys aren't working and return this error when I run the code:
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)
How do I get the player to move vertically using the arrow keys?
I played around with the code for a bit and got something that worked. My initial suggestion is going to be that you shouldn't try doing left and right with vanilla javaScript and the up and down with jQuery. I used jQuery to get this to work, but it can certainly be done with vanilla javaScript as well.
The first thing that I did was make a global variable n that keeps track of our position in the grid, so when you press the left or right arrow it either adds 1 or subtracts 1 from n, and up and down arrows either adds or subtracts 25.
For each of our little if statements I've made them a bit more generic. First it selects the current div that the player is in, and using the .html() function in jQuery grabs the HTML (as a string) which we can then use. I noticed that in your initial code when you were trying to add the player variable with .append() you got an error about string literals. Since the selection of player was a jQuery object it wasn't able to append that since .append() takes in a string (aka "Hello, World!"). Secondly, when we get the response from .html() (which is a string), we are then able to append it to a new position in the grid. Doing this means we're moving positions so n needs to be changed as I stated above. Note that I also used .empty() to clear the player from the previous block. Finally, we can append player which would look something like
<div id="player"><img src="some_img_url.jpg"></div>
into our new position (which would be at n).
Before looking at the snippet, it's also worth mentioning that for making sure that the player doesn't walk through blocks (I assume that's part of the game) we would need to check that the block we're trying to move into isn't filled with something. This would be best to put in a function (since we need to do it for all of them. Something like the following would be the general gist:
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;
}If that's an incorrect assumption, you can ignore that snippet. Here is the main snippet with the corrected code (I only changed the 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>