如何使用箭头键在网格中的行之间移动图像 Up/Down？ (JavaScript)
How do I move an image Up/Down between rows in a grid using arrow keys? (JavaScript)
我正在创建一个游戏，玩家可以使用箭头键在单元格之间移动 View Game Here。
我已经让玩家使用箭头键移动 left/right 但是，向上和向下箭头键不起作用并且 return 当我 运行 代码时出现此错误：
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>
未捕获的引用错误：$ 未定义
在 HTMLDocument.detectKey (game.js:19)
如何使用箭头键让玩家垂直移动？
我试了一下代码，得到了一些有用的东西。我最初的建议是你不应该尝试用普通的 javaScript 做左和右，用 jQuery 做上和下。我用 jQuery 来让它工作，但它当然也可以用香草 javaScript 来完成。
我做的第一件事是创建一个全局变量 n 来跟踪我们在网格中的位置，因此当您按向左或向右箭头时，它会从 [= 中加 1 或减 1 15=]，向上和向下箭头加或减 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="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>
我正在创建一个游戏，玩家可以使用箭头键在单元格之间移动 View Game Here。 我已经让玩家使用箭头键移动 left/right 但是，向上和向下箭头键不起作用并且 return 当我 运行 代码时出现此错误：
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>
未捕获的引用错误：$ 未定义 在 HTMLDocument.detectKey (game.js:19)
如何使用箭头键让玩家垂直移动？
我试了一下代码，得到了一些有用的东西。我最初的建议是你不应该尝试用普通的 javaScript 做左和右，用 jQuery 做上和下。我用 jQuery 来让它工作，但它当然也可以用香草 javaScript 来完成。
我做的第一件事是创建一个全局变量 n 来跟踪我们在网格中的位置，因此当您按向左或向右箭头时，它会从 [= 中加 1 或减 1 15=]，向上和向下箭头加或减 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="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>