Перемещение объекта/изображения с помощью клавиш
Хочу написать код игры,где есть карта и персонаж
Саму карту сделал но не понял как сделать границу карты и перемещение персонажа,персонаж должен двигаться во все стороны в том числе вверх и вниз,но не должен выходить за карту(в данном случае это квадрат из 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() } |
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); } |
Guruplayer,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Часовой пояс GMT +3, время: 02:02. |