Adding a letter to a cell
I am trying to figure out how to add a letter to a cell. I am making an appropriate game, and before I try to get a random randomness injected into a cell, I would like to know how to simply put a letter in the cell when the page loads, even if it is set and not random. Therefore, at the moment I have 12 cells (12 tf), and I want to do this, when you click one of these cells, it will display the letter that is in that cell. Does anyone know how I would get started with this? The code I have so far is in the jsfiddle, although it is a little bit, I just want to show you what I mean. As you can see I am trying to align the letters up
thank
I would like to know how when I click on one of the green cells, I can make a letter in a box from one of the letters in my array that I have provided
var letters = ["A", "A", "B", "B", "C", "C", "D", "D", "E", "E", "F", "F"];
<table>
<tr>
<td id="cell1"></td>
<td id="cell2"></td>
<td id="cell3"></td>
<td id="cell4"></td>
</tr>
<tr>
<td id="cell5"></td>
<td id="cell6"></td>
<td id="cell7"></td>
<td id="cell8"></td>
</tr>
<tr>
<td id="cell9"></td>
<td id="cell10"></td>
<td id="cell11"></td>
<td id="cell12"></td>
</tr>
source to share
First, I recommend specifying the table cell numbers from 0 to 11 to indicate which letter from the array they should receive. To do this, you can use the attribute data-
:
<td data-cell="0"></td>
<td data-cell="1"></td>
Then you can use the shuffle algorithm to shuffle the letter array prior to starting the game:
function swap(array, pos1, pos2) {
var temp = array[pos1];
array[pos1] = array[pos2];
array[pos2] = temp;
}
// Fisher-Yates shuffle
function shuffle(array) {
for (var i = array.length - 1; i >= 0; i -= 1) {
var swapPos = Math.floor(Math.random() * i);
swap(array, i, swapPos);
}
}
shuffle(letters);
Finally, you can provide the table with an ID and set up event delegation to handle click events on table cells:
document.getElementById("board").addEventListener("click", function (e) {
var target = e.target,
cellNo;
if (target && target.tagName === "TD") {
cellNo = target.getAttribute("data-cell");
target.className = "revealed";
target.textContent = letters[cellNo];
}
});
(And also add CSS to vertically center the text and change the cell color when its class changes).
Result:
window.onload = function () {
var letters = ["A", "A", "B", "B", "C", "C", "D", "D", "E", "E", "F", "F"];
function swap(array, pos1, pos2) {
var temp = array[pos1];
array[pos1] = array[pos2];
array[pos2] = temp;
}
// Fisher-Yates shuffle
function shuffle(array) {
for (var i = array.length - 1; i >= 0; i -= 1) {
var swapPos = Math.floor(Math.random() * i);
swap(array, i, swapPos);
}
}
shuffle(letters);
document.getElementById("board").addEventListener("click", function (e) {
var target = e.target,
cellNo;
if (target && target.tagName === "TD") {
cellNo = target.getAttribute("data-cell");
target.className = "revealed";
target.textContent = letters[cellNo];
}
});
};
td {
border: 2px solid black;
width: 100px;
height: 100px;
background-color: green;
text-align: center;
line-height: 100px;
font-size: 24pt;
}
td.revealed {
background-color: white;
}
<table id="board">
<tr>
<td data-cell="0"></td>
<td data-cell="1"></td>
<td data-cell="2"></td>
<td data-cell="3"></td>
</tr>
<tr>
<td data-cell="4"></td>
<td data-cell="5"></td>
<td data-cell="6"></td>
<td data-cell="7"></td>
</tr>
<tr>
<td data-cell="8"></td>
<td data-cell="9"></td>
<td data-cell="10"></td>
<td data-cell="11"></td>
</tr>
</table>
source to share
Not really sure what you are doing, but there seem to be two options that might help:
-
Fiddle HERE - Pick a random letter on every click of the square and show it:
letters = ["A", "A", "B", "B", "C", "C", "D", "D", "E", "E", "F", "F"]; $('td').click(function() { rn = Math.round(Math.random()* 12); $(this).html(letters[rn]); });
-
Fiddle HERE . If the letters are preset but not displayed, you can simply change the opacity or color on click to make the text transparent (opacity 0) or opaque (opacity 1); or its color switches between the same as the background, something else:
$('td').click(function() { $(this).css('color', 'black'); });
source to share
An attempt was made to restore a section of a deleted comment.
Here is the final commented code:
var letters = ["A", "A", "B", "B", "C", "C", "D", "D", "E", "E", "F", "F"];
var tds = document.querySelectorAll('td'); // fetch all td elements
for (var i = 0; i < tds.length; i++) { // loop through them
tds[i].addEventListener('click', function () { // add a click listener to each of them
if (this.textContent == '') { // check if cell is empty
var index = Math.floor(Math.random() * letters.length); // if so, get a random index
this.textContent = letters[index]; // and assign it to the cell
this.className = 'clicked'; // change the class
}
})
}
td {
border: 2px solid black;
width: 100px;
height: 100px;
background-color: green;
text-align: center;
}
td.clicked {
background-color: white;
}
}
<table>
<tr>
<td id="cell1"></td>
<td id="cell2"></td>
<td id="cell3"></td>
<td id="cell4"></td>
</tr>
<tr>
<td id="cell5"></td>
<td id="cell6"></td>
<td id="cell7"></td>
<td id="cell8"></td>
</tr>
<tr>
<td id="cell9"></td>
<td id="cell10"></td>
<td id="cell11"></td>
<td id="cell12"></td>
</tr>
</table>
http://jsfiddle.net/6c9qg845/5/
I remember you mentioned that you want to test for pairs, in which case you need to track each "turn" and compare the values โโof the first and second cells if (t1 === t2)
.
UPDATE
Here's a slightly modified, more realistic version of the game:
var letters = ["A", "A", "B", "B", "C", "C", "D", "D", "E", "E", "F", "F"];
var tds = document.querySelectorAll('td');
for (var i = 0; i < tds.length; i++) {
var t = tds[i];
if (t.textContent == '') {
var index = Math.floor(Math.random() * letters.length);
t.textContent = letters.splice(index, 1);
console.log(letters); // notice how splice modifies the array so that all the elements are used exactly once
}
//})
}
var turn = 0; // can be used better later, for now used just for keeping track of t1 and t2
var t1, t2; // tiles
// setup clicks
for (var i = 0; i < tds.length; i++) {
tds[i].addEventListener('click', function() {
if (this.className != '') {
return false; // it has to be a "playable" cell, refuse clicks otherwise
}
if (turn % 2 == 0) { // first tile
t1 = this;
this.className = 'clicked';
} else { // second tile
t2 = this;
this.className = 'clicked';
setTimeout(function() { // slight timeout, just looks nicer
if (t1.textContent == t2.textContent) { // see if they match
//alert('it\ a match!');
t1.className = t2.className = 'matched'; // assign them this class if they do
} else { // otherwise
//alert('no match...');
t1.className = t2.className = ''; // reset classes
}
}, 1000);
}
turn++; // increment turn number (this could easily be a boolean)
})
}
td {
border: 2px solid black;
width: 100px;
height: 100px;
background-color: green;
text-align: center;
color: green;
transition: all 0.2s linear;
}
td.clicked {
background-color: white;
}
td.matched {
background-color: #0F0;
}
<table>
<tr>
<td id="cell1"></td>
<td id="cell2"></td>
<td id="cell3"></td>
<td id="cell4"></td>
</tr>
<tr>
<td id="cell5"></td>
<td id="cell6"></td>
<td id="cell7"></td>
<td id="cell8"></td>
</tr>
<tr>
<td id="cell9"></td>
<td id="cell10"></td>
<td id="cell11"></td>
<td id="cell12"></td>
</tr>
</table>
There is still a lot of work on this: notion of players, code optimization (moving parts in functions, I gave you a rather crude version, trying to stick with the original code), preventing various hacks (like quick clicking on fragments), etc. All of this should be more than enough to get you started.
source to share