Picking Random Item in a Multi-dimensional Array

programming web dev
1

Newbie here!!! Just want to ask on how to insert random placement in this code and make a server on it…I include some jquery file for game instructions also but this is the main reason why I am asking for help. Problem: random placement, connect to AI opponent…or only the random placement.

// get the container element
var battletanksID = document.getElementById("battletanks");

// set rows and columns
var rows = 7;
var cols = 7;

// make the grid columns and rows
for (i = 0; i < cols; i++) {
	for (j = 0; j < rows; j++) {
		
		// create a new div HTML element for each grid box
		var box = document.createElement("box");
		battletanksID.appendChild(box);

		// give each div element a unique id based on its row and column
		box.id = 's' + j + i;			

		// set each grid box size. Multiply the size from the current row or column
		var size = 50;
		var topPosition = j * size;
		var leftPosition = i * size;			
		box.style.top = topPosition + 'px';
		box.style.left = leftPosition + 'px';						
	}
}

var missilecount = 10;

//tank placement
var placement = [
				[0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0],
				[0,0,0,1,0,0,0],
				[0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0],
				[0,0,1,0,0,0,0],
				[0,0,0,0,0,0,0]
				]

//add an event listener that fires when a user clicks a square
battletanksID.addEventListener("click", missiles);

function missiles(m) {
    // if item clicked (e.target) is not the parent element on which the event listener was set
	if (m.target !== m.currentTarget) {
        // extract row and column # from the HTML element's id
		var row = m.target.id.substring(1,2);
		var col = m.target.id.substring(2,3);
				
		// if player clicks the box and missed hit
		if (placement[row][col] == 0) {
			m.target.style.background = '#e6e6e6';
			// set box's value to 3 to indicate missed hit
			placement[row][col] = 3;
			//every missed hit it deduct missiles
			missilecount--;
			alert("Missed hit, Try again!");
		}	
		// if player clicks the box and hit the enemies tank
		if (placement[row][col] == 1) {
			m.target.style.background = '#006600';
			// set box's value to 2 to indicate hit target
			placement[row][col] = 2;
			//increment missiles each time tank is hit
			missilecount++;	
			
			//if player hit the tank
			if (missilecount == missilecount++) {
				alert("Enemies tank is defeated!");
				//redirect to Win page
				location.replace("2.html");
			}
		 }
		//if missiles run out
		if(missilecount == 0){
			alert("game over!");
			//redirect to Lose page
			location.replace("3.html");
		}
    }
}

//Jquery
$(document).ready(function(){
	//Hit
	$("#btn2").click(function(){
		$("#btn2").removeClass("btn2");
		$(this).addClass("btn2");
	});
	//Missed Hit
	$("#btn3").click(function(){
		$("#btn3").removeClass("btn3");
		$(this).addClass("btn3");
	});
});
2

You have a multidimensional array for placement. Are you looking for how to pick a random spot from inside here as if it were a 7x7 grid?

3

Yes sir but i don’t know how to executive that code

4

I am not in front of a large screen right now, but the way you can do that is by picking a two random numbers (https://www.kirupa.com/html5/random_numbers_js.htm) between 0 and 6. These correspond to the horizontal and vertical positions in your 7x7 grid.

With these two random numbers (let us call them randomX and randomY), you can do something as follows: placement[randomY][randomX]

Does this help? :grinning:

5

thanks for the effort sir but still can’t figure it out

6

Here is a snippet that might help :slight_smile:

var placement = [
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 1, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0]
];

var xPosition = Math.floor(Math.random() * placement.length);
var yPosition = Math.floor(Math.random() * placement.length);

console.log(xPosition + "," + yPosition + " :" + placement[yPosition][xPosition]);

:slight_smile: