Javascript Conway's Game of Life Issues - javascript

I'm trying to make Conway's Game of Life in javascript. I made a function to count neighbors, and a function that produces the next generation of cells. However, I tried a test input, and the result isn't coming out right, and I can't find where the error is. Please help.
Here's the code:
(code attached)
/* Draws grid */
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FFFFFF";
ctx.strokeStyle = "grey";
ctx.strokeRect(10 * j, 10 * i, 10, 10);
}
}
/* draws live cells */
function drawSquares(a) {
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000";
if (a[i][j] === 1) {
ctx.fillRect(10 * j, 10 * i, 10, 10);
}
}
}
}/* Counts neighbors */
function neighborCount(a, i, j, height, width){
var lifes = 0;
var neighbors = [
[-1, 1],
[0, 1],
[1, 1],
[-1, 0],
[1, 0],
[-1, -1],
[0, -1],
[1, -1]
];
/* loops through a cell's neighbors */
for (var z = 0; z < 8; z++){
/*checks if the neighbor isn't off the grid*/
if ((i + neighbors[z][0]) >=0 && (i + neighbors[z][0]) < height && (j + neighbors[z][1]) >=0 && (j + neighbors[z][1]) < width){
/*checks if it's alive*/
if (a[i + neighbors[z][0]][j + neighbors[z][1]] === 1){
lifes++;
}
}
}
return lifes;
}
/* game of life */
function life(a) {
var n = a; /*new generation of life */
var lifes = 0; /*neighbor counter*/
var height = a.length;
var width = a[0].length;
/*loops through all cells*/
for (var i = 0; i < height; i++){
for (var j = 0; j < width; j++){
lifes = neighborCount(a, i, j, height, width);
/* kills alive cells */
if(a[i][j] === 1 && (lifes < 2 || lifes > 3)){
n[i][j] = 0;
}
/* brings dead cells to life */
else if (a[i][j] === 0 && lifes ===3){
n[i][j] = 1;
}
}
}
drawSquares(n);
return(n);
}
/* test input */
var a = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
/* expected result:
var a = [
[0, 0, 1, 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, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]; */
life(a);
<canvas id="myCanvas" width="150" height="150"></canvas>

Related

Javascript 2d array select around from single point

Say I have a 15x15 2d array
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, A, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
See the character A? at y:9 and x:4 (index starts with 0).
What I want to do here is to update the array where I select or update the 0s around the A to, say, asterisk (*).
For an example, lets say I want 0s around the A as far as 3 indexes to be updated as *
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, *, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, *, *, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0],
[0, *, *, *, A, *, *, *, 0, 0, 0, 0, 0, 0, 0],
[0, 0, *, *, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, *, *, *, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, *, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
What is the most efficient way to achieve this?
EDIT
What I've tried:
var s_length = 4, coordinate_y_x = [9, 4]
for (let i1 = 0; i1 < s_length; i1++) {
for (let i = 0; i < s_length; i++) {
if (map[coordinate_y_x[0] - i][coordinate_y_x[1]] != undefined) map[coordinate_y_x[0] - i][coordinate_y_x[1]] = 1
if (map[coordinate_y_x[0]][coordinate_y_x[1] - i]!= undefined) map[coordinate_y_x[0]][coordinate_y_x[1] - i] = 1
}
for (let i = s_length; i > 0; i--) {
console.log("loop2");
if (map[coordinate_y_x[0] + i][coordinate_y_x[1]]!= undefined) map[coordinate_y_x[0] + i][coordinate_y_x[1]] = 1
if (map[coordinate_y_x[0]][coordinate_y_x[1] + i]!= undefined) map[coordinate_y_x[0]][coordinate_y_x[1] + i] = 1
}
}
I managed to change what's left, right, top, and bottom from this code with given point and length, but I can't seem to figure out how to do the rest (between directions)
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[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, 0, 0, 0, 1, 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, 1, 1, 1, A, 1, 1, 1, 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, 1, 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, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

One way is with a somewhat spiral matrix walk, but instead of a "square" walk, yours will be diagonal / "diamond" shape. Additionally, we don't really care about the "connectiveness" of the path, so I'll jump around a bit. That is, when a walk has finished a ring, it isn't important that the next ring start on a neighboring cell of the previous ring's last step.
In your example data, I've marked the cells that the algorithm would visit in order (1st, 2nd, 3rd, etc.)
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 15, 7, 17, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 14, 6, 2, 8, 18, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 13, 5, 1, A, 3, 9, 19, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 24, 12, 4, 10, 20, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 23, 11, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
Note, I've chosen to always start from the left side of the origin, but that is arbitrary. You could start from the top, right, or bottom side.
So our three loops (in order) will be
The length we want to "expand" by can be thought of as a separate "ring." So loop each ring.
Next, loop each "side" of that ring.
Finally, loop each "step" along that side.
To keep things symmetric, each side will only occupy a single "corner" cell. So for example when looping the 3rd ring, each side would only be 3 steps each. Here I have each side labeled as a, b, c, and d.
* * * b * * *
* * a * b * *
* a * * * b *
a * * X * * c
* d * * * c *
* * d * c * *
* * * d * * *
Otherwise the only tricky part is figuring out how to change directions as you loop each side.
A very simple way to do this is store "deltas," how much we expect each x and y value (where we currently are) to change for each step. We know we'll be moving 1 step each time, so it is just a matter of moving right / down (positive +) or left / up (negative -).
I decided to store these values in an array, but you can probably do some modulo math to switch between them. Looping over a constant is just a little easier to understand. So moving up and to the right would have an x_delta value of 1 and y_delta value of -1, etc.
Finally, you need a "in bounds" check as you are completing your walk. The algo will still try and "visit" these cells, but won't try to write to the array if it doesn't exist. This is one area of the algo you can probably improve.
Put it all together, and you have this:
const data = Array(15)
.fill()
.map(v => Array(15).fill(0));
// Assumes the graph won't contain `undefined` values. Otherwise, do a `length` check on the arrays
function inBounds(data, [y, x]) {
return data?.[y]?.[x] !== undefined;
}
const deltas = [
[ 1, -1], // Up right
[ 1, 1], // Down right
[-1, 1], // Down left
[-1, -1], // Up left
];
function fillFrom({origin: [oy, ox], data, length, value}) {
// Walk in diamond "rings" around our origin
for (let size = 1; size <= length; size++) {
// Start from the left side of our ring
let x = ox - size;
let y = oy;
// Move along 4 sides of the diamond
for (let [xd, yd] of deltas) {
// Move each step along the side
for (let step = 0; step < size; step++) {
if (inBounds(data, [y, x])) {
data[y][x] = value;
}
x += xd;
y += yd;
}
}
}
return data;
}
// Updates data "in place." Would need to deep clone if you wanted to keep things immutable
fillFrom({origin: [9, 4], data, length: 3, value: 1});
data[9][4] = 'A';
console.log(data.map(r => r.join('')).join('\n'));

Unable to print updated array value inside for loop

I need to print an array one by one. I tried to many ways but
I can't print updated array value inside for loop.
Anyone have any idea to get that data inside the for loop.
If my question is not clear, comment me and I can update.
var startMap;
function startmap() {
startMap = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]
];
$(document).ready(function() {
startMap[10][10] = 1;
console.log(startMap)
});
}
function init() {
startmap();
console.log(startMap)
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 20; j++) {
console.log(startMap[i][j])
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="init()">
</body>

Your question is a little vague, but is this roughly what you are trying to achieve?
const startMap = your array here;
startMap.forEach(function(asset){
console.log(JSON.stringify(startMap));
});

Your update is inside an event handler that runs after your code $(document).ready(function(){
Here's what your code does:
declare startMap
declare startmap (hint, don't use same name with different case)
declare init()
run init() (onload)
call startmap(), which
inits startMap
sets up a doc.ready to set the value (but does not run this code yet as your other code is already running)
returns from startmap()
back in init() dumps the startMap
finishes init()
system runs doc.ready
updates your value
If you look at the console.logs, you get:
> Array (20)
(400) 0
> Array (20)
expanding the 2nd Array(20) and you can see [10,10] value is 1.
If you add more console.logs (or step-through), eg as the last line of init() add console.log("end init") you get:
> Array (20)
(400) 0
end init
> Array (20)
confirming that the 2nd console.log(startMap) (inside the doc.ready) runs after init() has completed.
You don't need the doc.ready, so just remove that.
var startMap;
function startmap() {
startMap = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]
];
//$(document).ready(function(){
startMap[10][10] = 1;
console.log(startMap)
console.log("end startmap")
//});
}
function init() {
startmap();
console.log(startMap)
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 20; j++) {
console.log(startMap[i][j])
}
}
console.log("end init")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="init()">
</body>

How to draw shapes to a canvas witha 2d array

I am making a game where I need to render onto a canvas from a 2d array I have this
var map = [
[1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0]
]
function drawmap(){
for(y = 0;y < map.length;y++){
for(x = 0;x < map[0].length;x++){
switch(map[y][x]){
case 0:
ctx.fillStyle = "black";
break;
case 1:
ctx.fillStyle = "white";
break;
}
ctx.fillRect(x,y,x + tilesize * 16,y + tilesize * 8)
}
}
}
But it comes out small and warped, I think theirs something wrong with my math but I can figure it out.
Here's a picture
The HTML file when its ran

Ye, your math is incorrect...
it should be:
ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize)
that assumes you have square tiles
Here is a sample in action
<canvas id="c" width=250 height=140></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
var tilesize = 10
var map = [
[1, 0, 1, 0, 1, 0, 1, 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, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[0, 0, 0, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 3, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 2, 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, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0]
]
function drawmap() {
for (y = 0; y < map.length; y++) {
for (x = 0; x < map[0].length; x++) {
ctx.fillStyle = ["red", "blue", "cyan", "yellow"][map[y][x]]
ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize)
}
}
}
drawmap()
</script>
I'm also using a color array to set the fill style:
ctx.fillStyle = ["red", "blue", "cyan", "yellow"][map[y][x]]

Making collisions using a map from an array

So i am making a Mario game. The level is made using a map from an array.
const map =
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,];
const size = 128;
I want to make a function which would return the index of the block that is under mario.
I tried writing
export function findBlockUnder(posX: number, posY: number) {
for (let index = 0; index < map.length; index++) {
return map[index]}
}
but this only returns the first number of the array.
If i got this to work, after i would get a number for findBlockUnder, i would write something like this
const floorUnderMario = findBlockUnder(posX, posY)
if (floorUnderMario = "0") {
velocityY += deltaTime * 0.003;
} else {
velocityY = 0;
}
As of right now i have made the 4 outer borders by just using written Y coords
export function findBlockUnder(posX: number, posY: number) {
return 1320
}
export function findBlockAbove(posX: number, posY: number) {
return 1200
}
export function findBlockRight(posX:number, posY:number){
return 3380
}
export function findBlockLeft(posX:number, posY:number){
return -375
}
const bloksPaLabi = findBlockRight(posX, posY);
if (posX>bloksPaLabi){
posX=bloksPaLabi;
}
const bloksPaKreisi = findBlockLeft(posX, posY);
if (posX<bloksPaKreisi){
posX=bloksPaKreisi;
}
So if someone could help me, how would i write a code to get the index of the block under mario? Heres the full code:
level.ts
import bricksSrc from "./images/bricks3.png"
import questionSrc from "./images/question.png"
const siena = document.createElement("img");
siena.src = bricksSrc;
const question = document.createElement("img");
question.src = questionSrc;
const map =
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,];
const size = 128;
export function findBlockUnder(posX: number, posY: number) {
return 1320
}
export function findBlockAbove(posX: number, posY: number) {
return 1200
}
export function findBlockRight(posX:number, posY:number){
return 3380
}
export function findBlockLeft(posX:number, posY:number){
return -375
}
export function MapDraw(context: CanvasRenderingContext2D, marioPosX: number, marioPosY: number) {
const mapOffsetX = marioPosX;
const mapOffsetY = marioPosY;
for (let index = 0; index < map.length; index++) {
const x = (index % 32);
const y = Math.floor(index / 32);
if (map[index] == 1) {
context.drawImage(siena,
x * size - mapOffsetX,
y * size - mapOffsetY,
size,
size);
}
if (map[index] == 2) {
context.drawImage(question,
x * size - mapOffsetX,
y * size - mapOffsetY,
size,
size);
}
// if (map[index] == 0) {
// context.fillStyle = "#ffffff"
// context.fillRect(x * size - mapOffsetX, y * size, size, size);
// }
}
function resize() {
let width = document.documentElement.clientWidth;
let maxWidth = Math.floor(document.documentElement.clientHeight / 0.5625);
if (width > maxWidth) {
width = maxWidth;
}
context.canvas.style.width = width + "px";
context.canvas.style.height = Math.floor(width * 0.5625) + "px";
};
window.addEventListener("resize", resize, { passive: true });
resize();
}
mario.ts
import marioSrc from "./images/8mario_burned.png";
/*
const canvas = document.createElement("canvas2");
document.body.appendChild(canvas);
canvas.style.outline = "1px solid black";
canvas.style.cursor = "none";
*/
const mario = new Image();
mario.src = marioSrc;
export function drawMario(
context: CanvasRenderingContext2D,
centerX: number,
centerY: number,
) {
context.drawImage(mario, centerX, centerY, 100, 100);
}
index.ts
import { drawMario } from "./mario"
import {
MapDraw,
findBlockUnder,
findBlockAbove,
findBlockRight,
findBlockLeft,
} from "./level"
import backSrc from "./images/background.png";
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.style.outline = "1px solid black";
canvas.style.cursor = "none";
canvas.width = 2048;
canvas.height = 1024;
const context = canvas.getContext("2d");
context.fillStyle = "rgb(200,120,60)";
const back = new Image();
back.src = backSrc;
function drawback(
context: CanvasRenderingContext2D,
posX: number,
posY: number,
) {
context.drawImage(back, -posX / 10, -posY / 10, canvas.width * 1.5, canvas.height * 1.5);
}
window.requestAnimationFrame(renderLoop);
const sprite2 = document.createElement("img");
sprite2.src =
"https://i.pinimg.com/originals/4b/91/1c/4b911c7d968feeaa993d24c93ddb821e.png";
let posX = 20;
let posY = 20;
let velocityY = 0;
let velocityX = 0;
let previousTime = 0;
let movementStarted = 0;
let wasMoving = false;
let keysPressed: string[] = [];
canvas.oncontextmenu = function (event) {
event.preventDefault();
};
/** NB! `document`, nevis `canvas` */
document.addEventListener("keydown", function (e) {
if (keysPressed.indexOf(e.key) === -1) {
keysPressed.push(e.key);
}
});
document.addEventListener("keyup", function (e) {
let idx = keysPressed.indexOf(e.key);
if (idx > -1) {
keysPressed.splice(idx, 1);
}
});
function renderLoop(time: number) {
context.clearRect(0, 0, canvas.width, canvas.height);
if (previousTime === 0) {
previousTime = time;
}
const deltaTime = time - previousTime;
previousTime = time;
moveMario(deltaTime);
drawback(context, posX, posY);
MapDraw(context, posX, posY);
drawMario(context, 500, 500);
// drawSprite2(time, deltaTime);
window.requestAnimationFrame(renderLoop);
}
function moveMario(deltaTime: number) {
const isMoving = keysPressed.indexOf("ArrowRight") > -1;
if (isMoving) {
posX += deltaTime * 0.8;
}
const isMovingLeft = keysPressed.indexOf("ArrowLeft") > -1;
if (isMovingLeft) {
posX -= deltaTime * 0.8;
}
const gridaZemMario = findBlockUnder(posX, posY)
const isFalling = posY < gridaZemMario;
if (isFalling) {
velocityY += deltaTime * 0.003;
} else {
velocityY = 0;
posY = gridaZemMario;
}
console.log (gridaZemMario)
const bloksVirsMario = findBlockAbove(posX, posY);
const bloksPaLabi = findBlockRight(posX, posY);
if (posX>bloksPaLabi){
posX=bloksPaLabi;
}
const bloksPaKreisi = findBlockLeft(posX, posY);
if (posX<bloksPaKreisi){
posX=bloksPaKreisi;
}
if (posY>410 && posX<100 && posY<600 ){
posY=410;
velocityY=0
}
const isMovingUp = keysPressed.indexOf("ArrowUp") > -1;
if (isMovingUp && !isFalling) {
velocityY = -1.5;
// posY -= deltaTime * 4;
}
posY += deltaTime * velocityY;
}

I am not sure what you try to acchieve so maybe I got your question wrong but your const map is just an array that only has a one dimensional index x.
In your function findBlockUnder(posX: number, posY: number) you pass x and y.
What you might need is a matrix like const map = [][]?
Also everything your findBlockUnder function does is returning the first result of your array because return will leave your for loop early and therefore not loop through the entire array

Why is my drawChar function's drawImage not showing?

First things first, I am trying my hand at a very simple tile map engine for 2d games using HTML5 canvas and Javascript and everything seems to be working okay except that my second drawChar function's drawImage() isn't showing on the canvas. I know the urls are good and I have checked for missing chars, etc. but cant figure it out. Code is below. Any help is appreciated.
P.S. I know that much of this code is not "modern" or "best practice", I am still learning and am just trying learn why this error is occurring. Thanks.
<canvas id="canvas" width="1000" height="500" style="border: 2px solid black; margin: 10px auto;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var draw=canvas.getContext('2d');
var tileSize=canvas.height/10;
var mapLength=canvas.width/tileSize;
var tilex=0;
var tiley=0;
var tile1= new Image();
var tile2= new Image();
var charImg= new Image();
tile1.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_sky.jpg';
tile2.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_ground.jpg';
charImg.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/player.jpeg';
var mapArray = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1]
];
function drawMap() {
for (var y=0; y<mapLength; y++){
for (var x=0; x<tileSize; x++){
tilex=x*tileSize;
tiley=y*tileSize;
if (parseInt(mapArray[y][x]) == 0) {
draw.drawImage(tile1, tilex, tiley, tileSize, tileSize); }
if (parseInt(mapArray[y][x]) == 1) {
draw.drawImage(tile2, tilex, tiley, tileSize, tileSize); }
}
}
}
function drawChar(){
draw.drawImage(charImg, 300, 200, tileSize, tileSize); }
function nextFrame(){
draw.clearRect(0, 0, canvas.width, canvas.height);
drawMap();
drawChar();
}
setInterval(nextFrame, 1000);

You're checking mapArray[y][x] - but y and x aren't related with the size of mapArray, so you're checking for an element that doesn't exist, and getting a Javascript error, which blocks the program execution.
You should keep the Chrome developer tools open so you can see Javascript errors, which will show you the problem here.

Categories