Я создаю игру «Пакман» только на Javascript.
Мне нужно решить эту проблему, где я застрял, надеюсь, некоторые из вас, ребята, помогут мне проверить, где я ошибаюсь. Обратите внимание, я могу использовать только Javascript.
Я объединил это в html-файле, чтобы показать, что делает код JS, но мы сосредоточимся на коде javascript, в первую очередь, конечно, мне интересно, чтобы игра работала. Так что, если хотите, игнорируйте html-часть.
Обратите внимание: я новичок в программировании Javascript и могу использовать странные идеи.
Игровая доска
Мне нужно создать «Pacman Game» на массиве игровых досок размером 30x30.
Игровое поле представляет собой двумерный массив, называемый «доской», его длина 30.. Элементы внутри массива «board» - это только элементы «0» и «1». Элемент «1» означает стену, элемент «0» означает путь.
Игрок
Игрок, также являющийся массивом, может перемещаться по карте по пути «0». Он случайным образом появляется на карте. Когда он появляется, он должен иметь случайное правильное направление для движения и иметь возможность управлять нажатием last_keyboard_direction (вверх, вниз, влево, вправо).
Этот массив проигрывателя будет состоять из 4 элементов по порядку: [строка, столбец, направление, last_keyboard_direction].
Призраки
Призраки появляются случайным образом и автоматически перемещаются прямо по допустимому пути (где 0), пока не столкнутся со стеной, а затем случайным образом меняют направление на другое допустимое (вверх, вниз, влево или вправо).
Каждый элемент призрачного массива: [строка, столбец, направление]
Что я сделал до сих пор?
Что я сейчас пытаюсь сделать?
Где я застрял?
Я застрял в функции: checkPosition (). Эта функция будет использоваться, когда призраки появятся и им нужно будет двигаться в первый раз, а затем установить правильное направление. Также он будет использоваться, когда призрак продолжит движение прямо в уже заданном направлении и столкнется, затем он установит новое допустимое направление.
Мне нужно проверить, будет ли действительна следующая позиция их направления, а если нет, то найти новую действительную и выбрать только одну случайным образом. Найденный действительный объект будет временно сохранен в переменной: valid = [];
Когда функция находит действительную следующую позицию, она помещает ее во временный массив «действительный». Например, если призрак, идущий прямо, столкнется с номером «1», он будет проверять, есть ли новое допустимое направление, чтобы двигаться прямо, пока не столкнется снова.
Пример: если он может подниматься и опускаться, он сохранит это в valid [], в конечном итоге будет заполнено следующим образом: valid [вверх, вниз].
Затем новая переменная с именем «direction» будет выбирать ее случайным образом среди всех элементов внутри «действительного» массива: var direccio = valid [Math.floor (Math.random () * valid.length)]; и, наконец, задайте новое действительное направление призраку.
ПОЖАЛУЙСТА, ОБРАТИ ВНИМАНИЕ:
Код комментируется, пожалуйста, проверьте специально массив checkPosition () и то, как обновить массивы призраков с его новыми действительными позициями.
ВСЕ КОД:
<html>
<head>
<title>PACMAN</title>
<meta charset = "UTF-8">
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<table id = "table" cellpadding=4 border = "0" style = "width:50%;text-align:center;vertical-align:middle" style = "align:center">
<tr>
<th> 0</th>
<th> 1</th>
<th> 2</th>
<th> 3</th>
<th> 4</th>
<th> 5</th>
<th> 6</th>
<th> 7</th>
<th> 8</th>
<th> 9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
</tr>
</table>
<script>
var board = [];
//GHOSTS, VALUES: [row, column, direction] //set randomly
var ghost1 = [0, 0, 0];
var ghost2 = [0, 0, 0];
var ghost3 = [0, 0, 0];
//PLAYER, VALUES: [row, column, direction, last_keyboard_direction] //set randomly except last_keyboard_direction
var player = [0, 0, 0, 0];
board[0]= [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
board[1]= [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
board[2]= [1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1];
board[3]= [1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1];
board[4]= [1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1];
board[5]= [1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1];
board[6]= [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, 1];
board[7]= [1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1];
board[8]= [1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1];
board[9]= [1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1];
board[10]= [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1];
board[11]= [1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1];
board[12]= [1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1];
board[13]= [1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1];
board[14]= [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1];
board[15]= [1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1];
board[16]= [1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1];
board[17]= [1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1];
board[18]= [1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1];
board[19]= [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
board[20]= [1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1];
board[21]= [1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1];
board[22]= [1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1];
board[23]= [1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1];
board[24]= [1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1];
board[25]= [1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1];
board[26]= [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1];
board[27]= [1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1];
board[28]= [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1];
board[29]= [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var row_ghost = [];
var column_ghost = [];
function generateGhosts() {
var comptador = 0;
do {
var row = getRandomInt(0, 29);
var column = getRandomInt(0, 29);
var random_position = board[row][column];
if (random_position === 0) {
board[row][column] = "F" + comptador;
row_ghost.push(row);
column_ghost.push(column);
document.write("GHOST " + (comptador) + " ACTUAL POSITION:: " + "ROW: " + row + " COLUMN: " + column + " VALUE: " + random_position);
document.write(" </br> ");
comptador++;
}
} while (comptador < 3) //creates 3 ghosts on valid positions
}
function generatePlayer() {
player = 0;
do {
var row = getRandomInt(0, 29);
var column = getRandomInt(0, 29);
var random_position = board[row][column];
if (random_position === 0) {
player++;
board[row][column] = "JG";
document.write("PLAYER " + (player) + " ACTUAL POSITION:: " + "ROW: " + row + " COLUMN: " + column + " VALUE: " + random_position);
document.write(" </br> ");
}
} while (player < 1) //creates one player
}
//This next function will need to set a new random valid direction in case the ghost can go straight anymore to it's actual set direction
function checkPosition() {
//Check new next positions
for (i = 0; i < row_ghost.length; i++) {
var valid = [];
//CHECKING NEW VALID POSITIONS IF !== 1 then is valid for a new.
//MY MAIN PROBLEM IS HERE INSIDE THE "IF" CONDITIONALS. YOU CAN TEST document.write("valid");, it just enters all if's all pushes all positions as valid.
//I know I'm comparing the wrong way. Need to take the element inside this row_ghost and column_ghost position but I dont know how.
if (((row_ghost[i]) - 1) && (column_ghost[i]) !== 1){
//It can go up ^
valid.push("up");
}
if (((row_ghost[i]) + 1) && (column_ghost[i]) !== 1){
//It can go down
valid.push("down");
}
if ((row_ghost[i] && ((column_ghost[i]) - 1)) !== 1){
//It can go left <
valid.push("left");
}
if ((row_ghost[i] && ((column_ghost[i]) + 1)) !== 1){
//It can go right >
valid.push("right");
}
//Once we checked the possible new valid positions, with the array direction we choose only ONE ELEMENT RANDOMLY
var direction = valid[Math.floor(Math.random() * valid.length)];
rowValid = []; //Set a new array to save the next row valid position for each player
columnValid = []; //Set a new array to save the next column valid position for each player
//ONLY ONE "direction" WILL BE SENDED BELOW, chosed randomly
if (direction === "up") {
//up ^
rowValid = (row_ghost[i] - 1);
columnValid = column_ghost[i];
}
if (direction === "down"){
//down v
rowValid = (row_ghost[i] + 1);
columnValid = column_ghost[i];
}
if (direction === "left"){
//left <
rowValid = row_ghost[i];
columnValid = (column_ghost[i] - 1);
}
if (direction === "right"){
//right >
rowValid = row_ghost[i];
columnValid = (column_ghost[i] + 1);
}
document.write("NEXT POSITION OF GHOST:::: " + i + ":::: ROW " + rowValid + " - COLUMN " + columnValid);document.write(" Next direction is: " +direction + " ///");
document.write("/// Next valid positions taken from this gost were: " + valid + ")"); //As you can see it pushes all positions as valid
document.write("</br>");
valid = []; //We empty the array for future checkings
}
}
generateGhosts(); //Generate 3 ghosts on valid positions.
generatePlayer(); //Generate one player on a valid position.
document.write("</br>");
document.write("FUTURE PATHS:");
document.write("</br></br>");
checkPosition();
//==============PRINT TABLE HTML==============//
table = document.getElementById("table");
for(var i = 0; i < board.length; i++)
{
// create a new row
var newRow = table.insertRow(table.length);
for(var j = 0; j < board[i].length; j++)
{
// create a new cell
var cell = newRow.insertCell(j);
// add value to the cell
cell.innerHTML = board[i][j];
}
}
//==============TABLE PRINTED==============//
</script>
ОСНОВНОЙ ПРОБЛЕМНЫЙ КОД:
Обратите внимание на: row_ghost.push (row); и column_ghost.push (столбец); Он будет использоваться в другой функции checkPosition ();
function generateGhosts() {
var comptador = 0;
do {
var row = getRandomInt(0, 29);
var column = getRandomInt(0, 29);
var random_position = board[row][column];
if (random_position === 0) {
board[row][column] = "F" + comptador;
row_ghost.push(row);
column_ghost.push(column);
comptador++;
}
} while (comptador < 3) //creates 3 ghosts on valid positions
}
//This next function will need to set a new random valid direction in case the ghost can go straight anymore to it's actual set direction
function checkPosition() {
//Check new next positions
for (i = 0; i < row_ghost.length; i++) {
var valid = [];
if (((row_ghost[i]) - 1) && (column_ghost[i]) !== 1){
//It can go up ^
valid.push("up");
}
if (((row_ghost[i]) + 1) && (column_ghost[i]) !== 1){
//It can go down
valid.push("down");
}
if ((row_ghost[i] && ((column_ghost[i]) - 1)) !== 1){
//It can go left <
valid.push("left");
}
if ((row_ghost[i] && ((column_ghost[i]) + 1)) !== 1){
//It can go right >
valid.push("right");
}
//Once we checked the possible new valid positions, with the array direction we choose only ONE ELEMENT RANDOMLY
var direction = valid[Math.floor(Math.random() * valid.length)];
rowValid = []; //Set a new array to save the next row valid position for each player
columnValid = []; //Set a new array to save the next column valid position for each player
//ONLY ONE "direction" WILL BE SENDED BELOW, chosed randomly
if (direction === "up") {
//up ^
rowValid = (row_ghost[i] - 1);
columnValid = column_ghost[i];
}
if (direction === "down"){
//down v
rowValid = (row_ghost[i] + 1);
columnValid = column_ghost[i];
}
if (direction === "left"){
//left <
rowValid = row_ghost[i];
columnValid = (column_ghost[i] - 1);
}
if (direction === "right"){
//right >
rowValid = row_ghost[i];
columnValid = (column_ghost[i] + 1);
}
valid = []; //We empty the array for future checkings
}
}
Не совсем связано, но вы не можете вызвать document.write в функции обработчика событий. Вызов функции откроет новый документ и сотрет все из текущего документа. Используйте консоль для отладки.
@Teemu да, это только для того, чтобы понять, что происходит с кодом и какие значения переменных используются в функциях. Не для окончательного использования, примите это только для справки. Спасибо!
Конечно, только эта консоль намного удобнее при попытке "чтобы понять, что происходит".
Или отладчик. Это довольно большая стена текста - я бы порекомендовал сократить ее до самого необходимого.
Отметил, @Teemu и Дэйв Спасибо за ваш совет :)



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Возможно, вы захотите узнать о Минимальные, полные и проверяемые примеры.