I am trying to build a 9x8 square grid in javascript. This will be the foundation for a "minigame" program that has boxes randomly spread out across the grid and the player starting in a set position, where it is given a sequence to move either up down left or right until it hits a box, and calculate how many unique squares it traveled on.

This is what I want the program to see.

I am a complete beginner, and I tried to look up examples of coordinate usage to identify single boxes, but I honestly don't know where to start. Honestly I just want ideas on how to realize my project, code isn't necessary

The end goal is to eventually make the program be able to scale the grid up with randomized boxes and start position and calculate the number of unique squares traveled on.

CodePudding user response：

If there are not too much "gaming", you could use CSS Grid:

.parent {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

You can change the gap.

The first div of the 72 is:

.div1 { grid-area: 1 / 1 / 2 / 2; }

First number 1: grid-row-start Second number 1: grid-column-start Third number 2: grid-row-end Fourth number 2: grid column end

So second cell, div, on first line would be:

.div2 { grid-area: 1 / 2 / 2 / 3; }

After you have all the benefit of using CSS grid (alignment, responsive...)

If you have something more "gaming" (graphically more sophisticated and with more user interaction), go for canvas. Bit more complicated but some libraries exist to help.