Jquery Game of Life обнаруживает соседние ячейки

В настоящее время я работаю над небольшим проектом jquery. Я хочу построить игру жизни Конвея с помощью javascript/jquery/html. Но я не могу понять, как определить, есть ли у ячейки живые соседи. Но я знаю, что должен использовать массивы.

Вот что я придумал до сих пор:

$(document).ready(function () {

var $create_grid = $('#create_grid');
var $run = $('#run');
var $reset = $('#reset');
var $random = $('#random');
var $cells = {};
var $active_cells = {};

$create_grid.click(function () {

    var width = $("[name='width']").val();
    var height = $("[name='height']").val();
    var cellsize = $("[name='cellsize']").val();
    var $table = $('#game');

    if (width.length != 0 && height.length != 0 && cellsize.length != 0) {

        for (i = 1; i <= height; i++) {
            $('table').append('<tr id="' + i + '"></tr>');
        }

        for (i = 1; i <= width; i++) {
            $('table tr').append('<td class="test" id="' + i + '"></td>');
        }
        $cells = $('table#game td');

        $cells.css('width', cellsize);
        $cells.css('height', cellsize);

    } else { alert("Please fill out all the fields!"); }

    $create_grid.hide('fast');
    $('ul.parameters').hide('fast');
    $random.css('display', 'block');
    $reset.css('display', 'block');

    //RESET CELLS
    $reset.click(function () {
        $cells.removeClass('alive');
    });

    //DRAW CELLS
    var isDown = false;

    $cells.mousedown(function () {
        isDown = true;
    })
        .mouseup(function () {
            isDown = false;
        });

    $cells.mouseover(function () {
        if (isDown) {
            $(this).toggleClass('alive');
        }
    });

    $cells.click(function () {
        $(this).toggleClass('alive');
    });
});

//RANDOM PATTERN
function shuffle(array) {
    var m = array.length, t, i;

    // While there remain elements to shuffle…
    while (m) {

        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }
    return array;
}

$random.click(function () {
    $(shuffle($cells).slice(0, 30)).addClass("alive");
});


//RUN SIMULATION
$run.click(function simulate() {


    //GET NEIGHBOUR CELLS
    $cells_alive = $('#game td.alive').length;


    for (var c = 1; c <= $cells_alive; c++) {

            alert(c);


        };

});

});


javascript jquery conways-game-of-life
person forkdestroyer    schedule 11.03.2014    source источник
comment
На мой взгляд, лучший способ приблизиться к этому — создать объект-ячейку с некоторыми дополнительными данными (координаты того места, где он находится в сетке) и функциями (например, getNeighbors). Кажется, вы пытаетесь найти решение, основанное на dom, что не самый простой способ. Ваш DOM предназначен только для представления, логика должна просто манипулировать данными. Простой массив действительно очень затрудняет поиск ваших соседей.   -  person Hans Roerdinkholder    schedule 11.03.2014

Ответы (1)


arrow_upward
1
arrow_downward

Ваши назначенные идентификаторы не уникальны. Все строки и все столбцы имеют идентификаторы от 1..n соответственно 1..m. Таким образом, каждое число из 1..min(n,m) используется дважды. Вы должны изменить это.

Вы также можете назначить некоторые классы или атрибуты данных или что-то еще, что позволяет фактически выбрать любой из создаваемых вами HTML-элементов.

Это, например, устанавливает некоторые атрибуты данных для всех тегов tr и td.

    for (i = 1; i <= height; i++) {
        var elem = $('<tr></tr>');
        elem.data('column', i);
        $('table').append(elem);
    }

    for (i = 1; i <= width; i++) {
        var elem = $('<td></td>');
        elem.data('row', i);
        $('table tr').append();
    }
    $cells = $('table#game td');

    $cells.css('width', cellsize);
    $cells.css('height', cellsize);

Если у вас есть координаты (x, y), вы можете выбрать всех соседей, например

$('tr[data-column='+(x-1)+'] td[data-row='+y+'], 
   tr[data-column='+(x+1)+'] td[data-row='+y+'], 
   tr[data-column='+x+'] td[data-row='+(y-1)+'], 
   tr[data-column='+x+'] td[data-row='+(y+1)+']');

(Вместо этого вы можете рассмотреть class из соображений эффективности. Хотя я не знаю, имеет ли это заметное значение.)

ИЗМЕНИТЬ:

Вот вопрос о производительности селекторов data- и class: атрибутировать селекторы css быстрее, чем селекторы классов?

person Ulrich Thomas Gabor    schedule 11.03.2014