Игра Pacman: проверка и обновление действительных позиций 2d-массива - Javascript

Я создаю игру «Пакман» только на 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), пока не столкнутся со стеной, а затем случайным образом меняют направление на другое допустимое (вверх, вниз, влево или вправо).

Каждый элемент призрачного массива: [строка, столбец, направление]

Что я сделал до сих пор?

  • Создан двухмерный массив boardgame: board [30] [30]
  • Случайным образом порождает игрока «JG» и 3 призраков «F0», «F1», «F2» на правильных позициях.

Что я сейчас пытаюсь сделать?

  • Создайте функцию для проверки (после столкновения со стеной), можно ли перемещать позиции рядом с призраками.
  • Затем с помощью этих допустимых следующих позиций заполните временной массив этими действительными позициями и выберите из них случайным образом (вверх, вниз, влево или вправо).
  • Если действительная позиция найдена, установите это новое значение и продолжайте двигаться прямо, пока снова не столкнетесь.

Где я застрял?

Я застрял в функции: checkPosition (). Эта функция будет использоваться, когда призраки появятся и им нужно будет двигаться в первый раз, а затем установить правильное направление. Также он будет использоваться, когда призрак продолжит движение прямо в уже заданном направлении и столкнется, затем он установит новое допустимое направление.

Мне нужно проверить, будет ли действительна следующая позиция их направления, а если нет, то найти новую действительную и выбрать только одну случайным образом. Найденный действительный объект будет временно сохранен в переменной: valid = [];

  • Когда функция находит действительную следующую позицию, она помещает ее во временный массив «действительный». Например, если призрак, идущий прямо, столкнется с номером «1», он будет проверять, есть ли новое допустимое направление, чтобы двигаться прямо, пока не столкнется снова.

  • Пример: если он может подниматься и опускаться, он сохранит это в valid [], в конечном итоге будет заполнено следующим образом: valid [вверх, вниз].

  • Затем новая переменная с именем «direction» будет выбирать ее случайным образом среди всех элементов внутри «действительного» массива: var direccio = valid [Math.floor (Math.random () * valid.length)]; и, наконец, задайте новое действительное направление призраку.

ПОЖАЛУЙСТА, ОБРАТИ ВНИМАНИЕ:

  • Скорость движения игры будет каждые 1 секунду. (скорость в этом коде еще не задана)
  • Код еще не пытается записать последнюю нажатую клавишу со стрелкой.
  • Путь - это номер «0», стены - номер «1».
  • Создавайте призраков и игрока в случайных позициях, не обязательно в центре.
  • HTML-код не важен, только для вашего понимания кода

Код комментируется, пожалуйста, проверьте специально массив 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
            }
        }

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

Federico klez Culloca 09.11.2018 12:32

Не совсем связано, но вы не можете вызвать document.write в функции обработчика событий. Вызов функции откроет новый документ и сотрет все из текущего документа. Используйте консоль для отладки.

Teemu 09.11.2018 12:41

@Teemu да, это только для того, чтобы понять, что происходит с кодом и какие значения переменных используются в функциях. Не для окончательного использования, примите это только для справки. Спасибо!

AFS18 09.11.2018 12:44

Конечно, только эта консоль намного удобнее при попытке "чтобы понять, что происходит".

Teemu 09.11.2018 12:58

Или отладчик. Это довольно большая стена текста - я бы порекомендовал сократить ее до самого необходимого.

Dave Newton 09.11.2018 13:05

Отметил, @Teemu и Дэйв Спасибо за ваш совет :)

AFS18 09.11.2018 13:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
6
356
0

Другие вопросы по теме