Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2019, 15:31
Новичок на форуме
Отправить личное сообщение для Guruplayer Посмотреть профиль Найти все сообщения от Guruplayer
 
Регистрация: 12.05.2019
Сообщений: 1

Перемещение объекта/изображения с помощью клавиш
Хочу написать код игры,где есть карта и персонаж
Саму карту сделал но не понял как сделать границу карты и перемещение персонажа,персонаж должен двигаться во все стороны в том числе вверх и вниз,но не должен выходить за карту(в данном случае это квадрат из 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()
}
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2019, 16:33
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,096

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);
}
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2019, 18:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,066

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализовать отправку содержимого из iframe нажатием комбинации клавиш ctrl+enter Naizer Общие вопросы Javascript 4 27.11.2013 15:39
можно ли с помощью js написать код для симуляции нажатия на клавиш. KamalovRadik Мобильный JavaScript 7 17.02.2012 20:27
Как реализовать переход с одной страницы на другую с помощью клавиш "стрелок" bazilio2010 Общие вопросы Javascript 6 13.11.2011 21:58
Прокрутка страницы с помощью клавиш Mirgorod Events/DOM/Window 0 17.06.2010 21:39
Двигать картинку с помощью клавиш и Function slide Naroto Элементы интерфейса 4 30.04.2010 11:21