Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Перемещение объекта/изображения с помощью клавиш (https://javascript.ru/forum/events/77485-peremeshhenie-obekta-izobrazheniya-s-pomoshhyu-klavish.html)

Guruplayer 12.05.2019 15:31

Перемещение объекта/изображения с помощью клавиш
 
Хочу написать код игры,где есть карта и персонаж
Саму карту сделал но не понял как сделать границу карты и перемещение персонажа,персонаж должен двигаться во все стороны в том числе вверх и вниз,но не должен выходить за карту(в данном случае это квадрат из HTML-таблиц),ниже я предоставлю HTML и JS код
1)HTML-код:
<table id="table">
<tr>
<td><img id="mario" src="mario-big.png"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
2)JS-код:
var mario = document.getElementById('mario')
var table = document.getElementById('table')
var marioImg = '<img id="mario" src="mario-big.png">'
var trList = document.getElementsByTagName('tr')
var tdList = document.getElementsByTagName('td')
var cellList = []

for(var i=0; i<trList.length; i++){
cellList.push(trList[i].children)
}

var map = [
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]

function clearMario(){
for(var i=0; i<tdList.length; i++){
var td = tdList[i]
if(td.innerHTML == marioImg){
td.innerHTML = ''
break
}
}
}

function updateMarioPosition(){
var mapRow = 0
var mapColumn = 0
for(var i=0; i<map.length; i++){
for(var j=0; j<map[i].length; j++){
if(map[i][j] != 0){
mapRow = i
mapColumn = j
}
}
}
clearMario()
cellList[mapRow][mapColumn].innerHTML = marioImg
}

document.onkeydown = function(event){
if(event.keyCode == 39){

}else if(event.keyCode == 37){

}else if(event.keyCode == 40){

}else if(event.keyCode == 38){

}

updateMarioPosition()
}

Rise 12.05.2019 16:33

var rows = map.length, columns = map[0].length;
var marioRow = 0, marioColumn = 0;

document.onkeydown = function (event) {
    if (event.keyCode == 37) {
        if (marioColumn > 0) marioColumn--;
    } else if (event.keyCode == 38) {
        if (marioRow > 0) marioRow--;
    } else if (event.keyCode == 39) {
        if (marioColumn < columns - 1) marioColumn++;
    } else if (event.keyCode == 40) {
        if (marioRow < rows - 1) marioRow++;
    }
    cellList[marioRow][marioColumn].appendChild(mario);
}

рони 12.05.2019 18:58

Guruplayer,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.


Часовой пояс GMT +3, время: 02:02.