Javascript jquery生命探测游戏

我目前正在做一个小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);


        };

});

$（文档）.ready（函数（）{
var$create_grid=$（“#create_grid”）；
var$run=$（“#run”）；
var$reset=$（“#reset”）；
var$random=$（“#random”）；
var$cells={}；
var$active_cells={}；
$create_grid。单击（函数（）{
var width=$（“[name='width']”）val（）；
var height=$（“[name='height']”）val（）；
var cellsize=$（“[name='cellsize']”）val（）；
var$table=$（“#游戏”）；
if（width.length！=0&&height.length！=0&&cellsize.length！=0）{
对于（i=1；i您分配的ID不是唯一的。所有行和列的ID分别来自
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);

（您可能需要考虑<代码>类< /代码>，因为效率的原因。虽然我不知道这是否有显著的差别。
编辑：

这里有一个关于
数据-
与
类
选择器性能的问题：
在我看来，最好的方法是使用一些附加数据（它在网格中的位置坐标）和函数（例如GetNeights）创建一个单元格对象。似乎您正试图找到一个dom驱动的解决方案，但这不是最简单的方法。您的dom只是用于表示，逻辑应该只是操纵数据。一个简单的数组确实很难找到您的邻居。
$('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)+']');