Javascript/Html/jQuery combination question: Make a 8x8 grid and have a \' * \'

ID: 3805147 • Letter: J

Question

Javascript/Html/jQuery combination question:

Make a 8x8 grid and have a ' * ' character at a randomly generated box within the grid

Then make buttons that are able to move the * in a up, down, left, right fashion continuously. For example, clicking on the left button would update the same grid as the following:

Whenever you move, there should also be a status update that says, "You have moved left!" or any other direction you moved. The program should not let the user go out of bounds and instead should alert the user "Oops! Can't go any further!"

Note: The board doesn't have to look exactly like this one, as long as it does the operations stated above.

* Which way would you like to go? UP LEFT RIGHT DOWN

Explanation / Answer

Drawing the grid: We can simply create HTML table with 8 rows and 8 columns to create the grid.

Radom number generation: Math.random() will generate random numbers between 0 and 1. We can use it to generate numbers between 0 and 7 (since our grid size is 8) as follows.

Math.floor(Math.random() * 10) % 8;
Explanation:
Math.random() * 10) - So that we get numbers between 0 and 10.
Math.floor(Math.random() * 10) - round to floor so that we get rid of decimal points
Math.floor(Math.random() * 10) % 8 - Since we want numbers only between 0 and 8.

We can generate random value in the onloadfunction and update the cell.
Accessing the cell via javascript:
var table = document.getElementById('grid');
table.rows[randomRow].cells[randomCol].innerText = "*";

On button clicks: On click on the buttons, we can bind the action to a javascript function and do the work there.

Putting all the above snippets together. Following is the complete code:

<html>
<head>
<script type="text/javascript">
// funtion that runs on page load and adds '*' to the random cell of the grid
function load() {
var table = document.getElementById('grid'); // get reference to the grid
var randomRow = Math.floor(Math.random() * 10) % 8; // generate random no. b/w 0 and 8
var randomCol = Math.floor(Math.random() * 10) % 8; // generate random no. b/w 0 and 8
table.rows[randomRow].cells[randomCol].innerText = "*"; // add '*' to the cell
// Save the position of randomly genrated values
document.getElementById('rowValue').value = randomRow;
document.getElementById('colValue').value = randomCol;
};

// function to update the '*' position based on the button clicks
function updateGrid(button) {
var table = document.getElementById('grid');
var currentRow = document.getElementById('rowValue');
var currentCol = document.getElementById('colValue');
var currentRowVal = parseInt(currentRow.value);
var currentColVal = parseInt(currentCol.value);

if (button == 'UP') {
if (currentRowVal == 0) { alert("Oops! Can't go any further!"); return; }
// move the star, otherwise
table.rows[currentRowVal].cells[currentColVal].innerText = ""; // clear current cell
currentRow.value = --currentRowVal;
table.rows[currentRowVal].cells[currentColVal].innerText = "*"; // update new cell

} else if (button == 'LEFT') {
if (currentColVal == 0) { alert("Oops! Can't go any further!"); return; }
// move the star, otherwise
table.rows[currentRowVal].cells[currentColVal].innerText = ""; // clear current cell
currentCol.value = --currentColVal;
table.rows[currentRowVal].cells[currentColVal].innerText = "*"; // update new cell
} else if (button == 'RIGHT') {
if (currentColVal == 7) { alert("Oops! Can't go any further!"); return; }
// move the star, otherwise
table.rows[currentRowVal].cells[currentColVal].innerText = ""; // clear current cell
currentCol.value = ++currentColVal;
table.rows[currentRowVal].cells[currentColVal].innerText = "*"; // update new cell
} else if (button == 'DOWN') {
if (currentRowVal == 7) { alert("Oops! Can't go any further!"); return; }
// move the star, otherwise
table.rows[currentRowVal].cells[currentColVal].innerText = ""; // clear current cell
currentRow.value = ++currentRowVal;
table.rows[currentRowVal].cells[currentColVal].innerText = "*"; // update new cell
}
}
</script>
</head>
<body>
<table id="grid" border="1" cellspacing="0" cellpadding="0">
<tr id="0">
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
</tr>
<tr>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
</tr>
<tr>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
</tr>
<tr>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
</tr>
<tr>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
</tr>
<tr>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
</tr>
<tr>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
</tr>
<tr>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
<td width="25" height="25"></td>
</tr>
</table>

<div><h2>Which way would you like to go?</h2></div>
<table>
<tr><td align="center" colspan="2"><input type="button" value="UP"><br><br></td></tr>
<tr><td><input type="button" value="LEFT"></td><td><input type="button" value="RIGHT"></td></tr>
<tr><td align="center" colspan="2"><br><input type="button" value="DOWN"></td></tr>
</table>

<input type="hidden" id="rowValue" value="">
<input type="hidden" id="colValue" value="" ="">
</body>
</html>

Navigate

Javascript/HTML. Would someone be able to help me with this program. It is suppo

Javascript/Html/jQuery combination question: Make a 8x8 grid and have a \' * \'

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Javascript/Html/jQuery combination question: Make a 8x8 grid and have a \' * \'

Question

Explanation / Answer

Related Questions

Navigate