#javascript #html #arrays
Вопрос:
Я создаю базовую игру, в которой игрок перемещается по клеткам, пытаясь избежать атак врагов.
- В настоящее время игрок продолжает выходить из основного контейнера. Как мне ограничить его перемещение в контейнере? Я пытался использовать «дополнительный код if», чтобы проверить его следующую позицию перед перемещением, но это не сработало.
- Всякий раз, когда он вступает в контакт с врагом или любым другим элементом, он подхватывает его, и вместе они вместе проходят оставшуюся часть его пути. Как мне предотвратить это?
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; //check before moving if (ngt;=1 || nlt;=275){ $("#" n).append(player); } else { } } else if (e.keyCode == '40') { // down arrow let player = $("#" n).html(); $("#" n).empty(); n = 25; //check before moving if (ngt;=1 || nlt;=275){ $("#" n).append(player); } else{ } } else if (e.keyCode == '37') { // left arrow let player = $("#" n).html(); $("#" n).empty(); n--; //check before moving if (ngt;=1 || nlt;=275){ $("#" n).append(player); } else{ } } else if (e.keyCode == '39') { // right arrow let player = $("#" n).html(); $("#" n).empty(); // move over one block n ; //check before moving if (ngt;=1 || nlt;=275){ $("#" n).append(player); } else{ } } } 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);} } lt;htmlgt; lt;headgt; lt;!-- Logo Insert, Page title and size orientation--gt; lt;link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAxBqrAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEAARAAEREAEQABEAEREQARABAQAQERABEREBARAAEQEREAEAAAAAAREAAQAAAAABEAABAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AAD//wAAnOEAAJzBAACa0QAAgpwAAIb/AACO/wAAnv8AAP7/AAD//wAA//8AAP//AAD//wAA" rel="icon" type="image/x-icon" /gt; lt;titlegt;New West Fan Artlt;/titlegt; lt;meta name="New West Game" content="Post Your Love For New West"/gt; lt;meta http-equiv="refresh" content="30"/gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/gt; lt;link rel="stylesheet" href="game.css"gt; lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gluten:bold,italic,bold italic|Staatliches:bold|roboto"gt; lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons"gt; lt;script src="https://cdn.lordicon.com/libs/mssddfmo/lord-icon-2.1.0.js"gt;lt;/scriptgt; lt;script src="game.js"gt; lt;/scriptgt; lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;headergt; lt;h1 class="Score"gt;Score: 0lt;/h1gt; lt;/headergt; lt;!--This is the grid. Where: grid = row; grid-no = The position of a row in the interface, where no= rows 1-11 ; cell = Any cell in the grid, cell-no = column or The positon of a cell on row, where no= column from 1-40 --gt; lt;div class="container"gt; lt;div class="grid" class=grid-1gt; lt;div class="cell" id="1"gt;lt;/divgt; lt;div class="cell" id="2"gt;lt;/divgt; lt;div class="cell" id="3"gt;lt;/divgt; lt;div class="cell" id="4"gt;lt;/divgt; lt;div class="cell" id="5"gt;lt;/divgt; lt;div class="cell" id="6"gt;lt;/divgt; lt;div class="cell" id="7"gt;lt;/divgt; lt;div class="cell" id="8"gt;lt;/divgt; lt;div class="cell" id="9"gt;lt;/divgt; lt;div class="cell" id="10"gt;lt;/divgt; lt;div class="cell" id="11"gt;lt;/divgt; lt;div class="train-station" id="12"gt;lt;div class="rail"gt;lt;b gt;.........................lt;/bgt;lt;/divgt;lt;/divgt; lt;div class="train-station" id="13"gt;lt;img class="train" src="imagestrain-2.png"gt;lt;/divgt; lt;div class="train-station" id="-14"gt;lt;div class="rail"gt;lt;b gt;.........................lt;/bgt;lt;/divgt;lt;/divgt; lt;div class="cell" id="15"gt;lt;/divgt; lt;div class="cell" id="16"gt;lt;/divgt; lt;div class="cell" id="17"gt;lt;/divgt; lt;div class="cell" id="18"gt;lt;/divgt; lt;div class="cell" id="19"gt;lt;/divgt; lt;div class="cell" id="20"gt;lt;/divgt; lt;div class="cell" id="21"gt;lt;/divgt; lt;div class="cell" id="22"gt;lt;/divgt; lt;div class="cell" id="23"gt;lt;/divgt; lt;div class="cell" id="24"gt;lt;/divgt; lt;div class="cell" id="25"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class="grid-2"gt; lt;div class="cell" id="26"gt;lt;/divgt; lt;div class="cell" id="27"gt;lt;/divgt; lt;div class="cell" id="28"gt;lt;/divgt; lt;div class="cell" id="29"gt;lt;/divgt; lt;div class="cell" id="30"gt;lt;/divgt; lt;div class="cell" id="31"gt;lt;/divgt; lt;div class="cell" id="32"gt;lt;/divgt; lt;div class="cell" id="33"gt;lt;/divgt; lt;div class="cell" id="34"gt;lt;/divgt; lt;div class="cell" id="35"gt;lt;/divgt; lt;div class="cell" id="36"gt;lt;/divgt; lt;div class="cell" id="37"gt;lt;/divgt; lt;div class="cell" id="38"gt;lt;/divgt; lt;div class="cell" id="39"gt;lt;/divgt; lt;div class="cell" id="40"gt;lt;/divgt; lt;div class="cell" id="41"gt;lt;/divgt; lt;div class="cell" id="42"gt;lt;/divgt; lt;div class="cell" id="43"gt;lt;/divgt; lt;div class="cell" id="44"gt;lt;/divgt; lt;div class="cell" id="45"gt;lt;/divgt; lt;div class="cell" id="46"gt;lt;/divgt; lt;div class="cell" id="47"gt;lt;/divgt; lt;div class="cell" id="48"gt;lt;/divgt; lt;div class="cell" id="49"gt;lt;/divgt; lt;div class="cell" id="50"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class="grid-3"gt; lt;div class="cell" id="51"gt;lt;/divgt; lt;div class="cell" id="52"gt;lt;/divgt; lt;div class="cell" id="53"gt;lt;/divgt; lt;div class="cell" id="54"gt;lt;/divgt; lt;div class="cell" id="55"gt;lt;/divgt; lt;div class="cell" id="56"gt;lt;/divgt; lt;div class="cell" id="57"gt;lt;/divgt; lt;div class="cell" id="58"gt;lt;/divgt; lt;div class="cell" id="59"gt;lt;/divgt; lt;div class="cell" id="60"gt;lt;/divgt; lt;div class="cell" id="61"gt;lt;img class="pigeon" src="imagespigeon.png"gt;lt;/divgt; lt;div class="cell" id="62"gt;lt;/divgt; lt;div class="cell" id="63"gt;lt;/divgt; lt;div class="cell" id="64"gt;lt;/divgt; lt;div class="cell" id="65"gt;lt;/divgt; lt;div class="cell" id="66"gt;lt;/divgt; lt;div class="cell" id="67"gt;lt;/divgt; lt;div class="cell" id="68"gt;lt;/divgt; lt;div class="cell" id="69"gt;lt;/divgt; lt;div class="cell" id="70"gt;lt;/divgt; lt;div class="cell" id="71"gt;lt;/divgt; lt;div class="cell" id="72"gt;lt;/divgt; lt;div class="cell" id="73"gt;lt;/divgt; lt;div class="cell" id="74"gt;lt;/divgt; lt;div class="cell" id="75"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class="grid-4"gt; lt;div class="cell" id="76"gt;lt;img class="pigeon" src="imagespigeon.png"gt;lt;/divgt; lt;div class="cell" id="77"gt;lt;/divgt; lt;div class="cell" id="78"gt;lt;/divgt; lt;div class="cell" id="79"gt;lt;/divgt; lt;div class="cell" id="80"gt;lt;/divgt; lt;div class="cell" id="81"gt;lt;/divgt; lt;div class="cell" id="82"gt;lt;/divgt; lt;div class="cell" id="83"gt;lt;/divgt; lt;div class="cell" id="84"gt;lt;/divgt; lt;div class="cell" id="85"gt;lt;/divgt; lt;div class="cell" id="86"gt;lt;/divgt; lt;div class="cell" id="87"gt;lt;/divgt; lt;div class="cell" id="88"gt;lt;/divgt; lt;div class="cell" id="89"gt;lt;/divgt; lt;div class="cell" id="90"gt;lt;/divgt; lt;div class="cell" id="91"gt;lt;/divgt; lt;div class="cell" id="92"gt;lt;/divgt; lt;div class="cell" id="93"gt;lt;/divgt; lt;div class="cell" id="94"gt;lt;/divgt; lt;div class="cell" id="95"gt;lt;/divgt; lt;div class="cell" id="96"gt;lt;/divgt; lt;div class="cell" id="97"gt;lt;/divgt; lt;div class="cell" id="98"gt;lt;img class="pigeon" src="imagespigeon.png"gt;lt;/divgt; lt;div class="cell" id="99"gt;lt;/divgt; lt;div class="cell" id="100"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class="grid-5"gt; lt;div class="cell" id="101"gt;lt;/divgt; lt;div class="cell" id="102"gt;lt;/divgt; lt;div class="cell" id="103"gt;lt;/divgt; lt;div class="cell" id="104"gt;lt;/divgt; lt;div class="cell" id="105"gt;lt;/divgt; lt;div class="cell" id="106"gt;lt;/divgt; lt;div class="cell" id="107"gt;lt;/divgt; lt;div class="cell" id="108"gt;lt;/divgt; lt;div class="cell" id="109"gt;lt;/divgt; lt;div class="cell" id="110"gt;lt;/divgt; lt;div class="cell" id="111"gt;lt;/divgt; lt;div class="cell" id="112"gt;lt;/divgt; lt;div class="cell" id="113"gt;lt;img class="pigeon" src="imagespigeon.png"gt;lt;/divgt; lt;div class="cell" id="114"gt;lt;/divgt; lt;div class="cell" id="115"gt;lt;/divgt; lt;div class="cell" id="116"gt;lt;/divgt; lt;div class="cell" id="117"gt;lt;/divgt; lt;div class="cell" id="118"gt;lt;/divgt; lt;div class="cell" id="119"gt;lt;/divgt; lt;div class="cell" id="120"gt;lt;/divgt; lt;div class="cell" id="121"gt;lt;/divgt; lt;div class="cell" id="122"gt;lt;div class="block" class="block2"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="123"gt;lt;div class="block" class="block2"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="124"gt;lt;/divgt; lt;div class="cell" id="125"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class="grid-6"gt; lt;div class="cell" id="126"gt;lt;div class="block" class="block3"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="127"gt;lt;/divgt; lt;div class="cell" id="128"gt;lt;/divgt; lt;div class="cell" id="129"gt;lt;/divgt; lt;div class="cell" id="130"gt;lt;/divgt; lt;div class="cell" id="131"gt;lt;/divgt; lt;div class="cell" id="132"gt;lt;/divgt; lt;div class="cell" id="133"gt;lt;/divgt; lt;div class="cell" id="134"gt;lt;/divgt; lt;div class="cell" id="135"gt;lt;/divgt; lt;div class="cell" id="136"gt;lt;/divgt; lt;div class="cell" id="137"gt;lt;/divgt; lt;div class="cell" id="138"gt;lt;/divgt; lt;div class="cell" id="139"gt;lt;/divgt; lt;div class="cell" id="140"gt;lt;/divgt; lt;div class="cell" id="141"gt;lt;/divgt; lt;div class="cell" id="142"gt;lt;/divgt; lt;div class="cell" id="143"gt;lt;/divgt; lt;div class="cell" id="144"gt;lt;/divgt; lt;div class="cell" id="145"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="146"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="147"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="148"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="149"gt;lt;/divgt; lt;div class="cell" id="150"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class="grid-7"gt; lt;div class="cell" id="151"gt;lt;div class="block" class="block2"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="152"gt;lt;div class="block" class="block2"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="153"gt;lt;/divgt; lt;div class="cell" id="154"gt;lt;/divgt; lt;div class="cell" id="155"gt;lt;/divgt; lt;div class="cell" id="156"gt;lt;/divgt; lt;div class="cell" id="157"gt;lt;/divgt; lt;div class="cell" id="158"gt;lt;/divgt; lt;div class="cell" id="159"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="160"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="161"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="162"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="163"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="164"gt;lt;/divgt; lt;div class="cell" id="165"gt;lt;/divgt; lt;div class="cell" id="166"gt;lt;/divgt; lt;div class="cell" id="167"gt;lt;/divgt; lt;div class="cell" id="168"gt;lt;/divgt; lt;div class="cell" id="169"gt;lt;/divgt; lt;div class="cell" id="170"gt;lt;/divgt; lt;div class="cell" id="171"gt;lt;/divgt; lt;div class="cell" id="172"gt;lt;/divgt; lt;div class="cell" id="173"gt;lt;/divgt; lt;div class="cell" id="174"gt;lt;/divgt; lt;div class="cell" id="175"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class="grid-8"gt; lt;div class="cell" id="176"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="177"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="178"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="179"gt;lt;/divgt; lt;div class="cell" id="180"gt;lt;/divgt; lt;div class="cell" id="181"gt;lt;div class="block" class="block2"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="182"gt;lt;/divgt; lt;div class="cell" id="183"gt;lt;/divgt; lt;div class="cell" id="184"gt;lt;/divgt; lt;div class="cell" id="185"gt;lt;/divgt; lt;div class="cell" id="186"gt;lt;/divgt; lt;div class="cell" id="187"gt;lt;/divgt; lt;div class="cell" id="188"gt;lt;/divgt; lt;div class="cell" id="189"gt;lt;/divgt; lt;div class="cell" id="190"gt;lt;/divgt; lt;div class="cell" id="191"gt;lt;/divgt; lt;div class="cell" id="192"gt;lt;/divgt; lt;div class="cell" id="193"gt;lt;/divgt; lt;div class="cell" id="194"gt;lt;/divgt; lt;div class="cell" id="195"gt;lt;/divgt; lt;div class="cell" id="196"gt;lt;/divgt; lt;div class="cell" id="197"gt;lt;/divgt; lt;div class="cell" id="198"gt;lt;/divgt; lt;div class="cell" id="199"gt;lt;/divgt; lt;div class="cell" id="200"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class="grid-9"gt; lt;div class="cell" id="201"gt;lt;/divgt; lt;div class="cell" id="202"gt;lt;/divgt; lt;div class="cell" id="203"gt;lt;/divgt; lt;div class="cell" id="204"gt;lt;/divgt; lt;div class="cell" id="205"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="206"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="207"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="208"gt;lt;/divgt; lt;div class="cell" id="209"gt;lt;/divgt; lt;div class="cell" id="210"gt;lt;/divgt; lt;div class="cell" id="211"gt;lt;/divgt; lt;div class="cell" id="212"gt;lt;/divgt; lt;div class="cell" id="213"gt;lt;/divgt; lt;div class="cell" id="214"gt;lt;/divgt; lt;div class="cell" id="215"gt;lt;/divgt; lt;div class="cell" id="216"gt;lt;div class="block" class="block3"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="217"gt;lt;/divgt; lt;div class="cell" id="218"gt;lt;/divgt; lt;div class="cell" id="219"gt;lt;/divgt; lt;div class="cell" id="220"gt;lt;/divgt; lt;div class="cell" id="221"gt;lt;/divgt; lt;div class="cell" id="222"gt;lt;/divgt; lt;div class="cell" id="223"gt;lt;/divgt; lt;div class="cell" id="224"gt;lt;/divgt; lt;div class="cell" id="225"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class=grid-10gt; lt;div class="cell" id="226"gt;lt;/divgt; lt;div class="cell" id="227"gt;lt;/divgt; lt;div class="cell" id="228"gt;lt;/divgt; lt;div class="cell" id="229"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="230"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="231"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="232"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="233"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="234"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="235"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="236"gt;lt;/divgt; lt;div class="cell" id="237"gt;lt;/divgt; lt;div class="cell" id="238"gt;lt;/divgt; lt;div class="cell" id="239"gt;lt;/divgt; lt;div class="cell" id="240"gt;lt;div class="block" class="block2"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="241"gt;lt;div class="block" class="block2"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="242"gt;lt;/divgt; lt;div class="cell" id="243"gt;lt;/divgt; lt;div class="cell" id="244"gt;lt;/divgt; lt;div class="cell" id="245"gt;lt;/divgt; lt;div class="cell" id="246"gt;lt;/divgt; lt;div class="cell" id="247"gt;lt;/divgt; lt;div class="cell" id="248"gt;lt;/divgt; lt;div class="cell" id="249"gt;lt;/divgt; lt;div class="cell" id="250"gt;lt;/divgt; lt;/divgt; lt;div class="grid" class="grid-11"gt; lt;div class="cell" id="251"gt;lt;/divgt; lt;div class="cell" id="252"gt;lt;/divgt; lt;div class="cell" id="253"gt;lt;/divgt; lt;div class="cell" id="254"gt;lt;/divgt; lt;div class="cell" id="255"gt;lt;/divgt; lt;div class="cell" id="256"gt;lt;/divgt; lt;div class="cell" id="257"gt;lt;/divgt; lt;div class="cell" id="258"gt;lt;/divgt; lt;div class="cell" id="259"gt;lt;/divgt; lt;div class="cell" id="260"gt;lt;/divgt; lt;div class="cell" id="261"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="262"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="263"gt; lt;div id="player"gt; lt;img class="rasta" src="imagesrastafari.png"gt;lt;/divgt; lt;/divgt; lt;div class="cell" id="264"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="265"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="266"gt;lt;div class="block" class="block1"gt;lt;/divgt;lt;/divgt; lt;div class="cell" id="267"gt;lt;/divgt; lt;div class="cell" id="268"gt;lt;/divgt; lt;div class="cell" id="269"gt;lt;/divgt; lt;div class="cell" id="270"gt;lt;/divgt; lt;div class="cell" id="271"gt;lt;/divgt; lt;div class="cell" id="272"gt;lt;/divgt; lt;div class="cell" id="273"gt;lt;/divgt; lt;div class="cell" id="274"gt;lt;/divgt; lt;div class="cell" id="275"gt;lt;/divgt; lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;