Хочу написать код игры,где есть карта и персонаж
Саму карту сделал но не понял как сделать границу карты и перемещение персонажа,персонаж должен двигаться во все стороны в том числе вверх и вниз,но не должен выходить за карту(в данном случае это квадрат из 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()
}