Question:
I'm trying to create a map with land and water in javascript but I want it to be completely random, so I assigned 0's and 1's in a matrix and where there was 0 I put the ground and where there was 1 I put water. Now I wanted to know how to fill this array with 0 and 1 "randomly" so that every time I give f5 something different and crazy comes up.
Below is the code I'm using:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Tile Map</title>
<style>
#canvas {
border: 1px solid black;
margin-left: 360px;
margin top: -25px;
}
h1 {
text-align: center;
font-size: 50px;
font-family: sans-serif;
color: gray;
}
</style>
</head>
<body>
<h1>Mapa randômico</h1>
<canvas id="canvas" height="400px" width="480px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var mapArray = [
[0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0]
];
var grama = new Image();
var agua = new Image();
grama.src = 'grama.png';
agua.src = 'agua.png';
var posX = 0;
var posY = 0;
//verifica elementos do vetor e atribui uma tile
grama.onload = function() {
agua.onload = function() {
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
if (mapArray[i][j] == 0) {
context.drawImage(grama, posX, posY, 40, 40);
}
if (mapArray[i][j] == 1) {
context.drawImage(agua, posX, posY, 40, 40);
}
posX += 40;
}
posY += 40;
posX = 0;
}
}
}
</script>
</br>
<button>gerar arquivo</button>
</body>
</html>
Answer:
If I understand correctly you want to generate a 10 x 12 matrix with 0 s and 1 s.
You can do it like this:
function gerarMatriz(x, y) { /* ou se preferires mais estático tira os argumentos e faz: var x = 10; var y = 12; */ var matriz = []; for (var i = 0; i < x; i++) { var linha = []; for (var j = 0; j < y; j++) { linha.push(Math.round(Math.random())); } matriz.push(linha); } return matriz; } setInterval(function() { var matriz = gerarMatriz(10, 12); document.body.innerHTML = matriz.map(l => '<br>' + l); }, 500);