[英]Selecting the last element in a table
I'm creating a small game where I create a table of squares, and the first one to click the bottom left piece loses. 我正在创建一个小游戏,在其中创建了一个正方形表,并且第一个单击左下角的块会丢失。
I'm having an issue regarding editing the bottom left [point: (1,1)] square in my program. 我在程序中编辑左下角[point:(1,1)]正方形时遇到问题。 My objective is to have a green colored square, labeled #poison in my .CSS
我的目标是在我的.CSS中有一个绿色的正方形,标记为#poison
#poison {
width: 5em;
height: 5em;
padding: 0;
background-size: 5em 5em;
background-image: url("http://imgur.com/6Apk8Rk");
}
appear instead of the regular brown colored squares I am outputting currently. 出现,而不是我当前正在输出的常规棕色正方形。
I'm unsure how to replace the bottom left square with the #poison square. 我不确定如何用#poison广场代替左下角的广场。
Here is the JS function I use to create the table. 这是我用来创建表格的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);
}
}
}
Here is relevant HTML by request: 以下是根据要求提供的相关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>
Assuming that your code is not completed yet, here's a way you can assign id "poison" to a specific cell (ex: {x:1, y:1}
): 假设您的代码尚未完成,您可以通过以下方式为特定单元格分配id“毒药”(例如:
{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";
}
Here is a way to add "poison" to bottom left column 这是在左下栏添加“毒药”的方法
if(cell.pos.x === (x-1) && cell.pos.y === 0){
cell.id = "poison";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.