2016-04-28 3 views
0

Я создаю маленькую игру, в которой я создаю таблицу квадратов, и первая, которая нажимает нижнюю левую часть, теряет.Выбор последнего элемента в таблице

У меня возникла проблема с редактированием нижней левой части [point: (1,1)] в моей программе. Моя цель состоит в том, чтобы иметь зеленый цветной квадрат, маркированный #poison в моей .CSS

#poison { 
    width: 5em; 
    height: 5em; 
    padding: 0; 
    background-size: 5em 5em; 
    background-image: url("http://imgur.com/6Apk8Rk"); 
    } 

появляется вместо обычных коричневых цветных квадратов, я выводя в настоящее время.

Я не уверен, как заменить нижний левый квадрат квадратом #poison.

Вот функция JS, которую я использую для создания таблицы.

function makeTable(x, y) { 
    var gameTable = document.getElementById('gameTable'), 
    poison = document.getElementById('poison'); 

    gameTable.innerHTML = null; 
    var table = []; 
    //creates rows 
    for (let i = 0; i < x; i += 1) { 
     var row = document.createElement('tr'); 
     //appends each row to the table 
     gameTable.appendChild(row); 
     //store the amount of iterations in array trow 
     var tRow = []; 
     table[i] = tRow; 
     //create columns (cells) 
     for (let j = 0; j < y; j += 1) { 
      let cell = document.createElement('td'); //td defines a cell 
      //set x,y coordinates 
      cell.pos = { x: i, y: j }; 
      //stores table values into cell 
      table[i][j] = cell; 

      //if you click the bottom left piece of chocolate.. 
      if (i === x - 1 && j === 0) { 
       cell.onclick = function() { 
       //..restart the game 
       restartGame(); 
       } 
      //else, behave normally 
      } else { 
      cell.onclick = function() { 
      cellClick(cell); 
      } 
      } 
      //append cells to the table 
      row.appendChild(cell); 
     } 
    } 
} 

Здесь уместно HTML по запросу:

<fieldset id="RowColbox"> 

<label> 
    <span>Rows:</span> 
    <input name="Cols" id="cols" type="number" value="3"/> 
</label> 

    <label> 
    <span>Columns:</span> 
    <input name="Rows" id="rows" type="number" value="4"/> 
    </label> 



    <button id="addDimensions" type="button">create</button> 
</fieldset> 


<table id="gameTable"> 

</table> 

Here мой код в полном комплекте.

+0

Пожалуйста, добавьте HTML –

+0

добавил соответствующий HTML, полноту можно найти в моей ссылке в исходном сообщении – user3335607

ответ

0

Вот способ, чтобы добавить «яд» в нижний левого столбец

if(cell.pos.x === (x-1) && cell.pos.y === 0){ 
    cell.id = "poison"; 
} 
1

Предполагая, что ваш код еще не завершен, вот способ, которым Вы можете назначить ИД «яд» в определенную ячейку (например: {x:1, y:1}):

//set x,y coordinates 
cell.pos = { x: i, y: j }; 
if(cell.pos.x === 1 && cell.pos.y === 1){ 
    cell.id = "poison"; 
} 
+0

кода далек от завершения! Спасибо за предложение, я попробую это, когда вернусь домой. – user3335607

Смежные вопросы