JS Canvas，使用2D数组绘制随机正方形

huangapple
go评论63阅读模式
英文:

JS Canvas, drawing random squares using 2D arrays

问题

以下是您的代码的翻译部分：

let board;
let context;

const cellAmount = 100;
let cellSize;

const numOfSpawn = 10;

var cell = [[],[]];

function createBoard(){
    board.width = document.documentElement.clientWidth;
    board.height = document.documentElement.clientHeight

    if (board.height < board.width){
        cellSize = Math.floor(board.height/cellAmount);
    } else {
        cellSize = Math.floor(board.width/cellAmount);
    }

    let iVertical = 0;
    for (iVertical; iVertical * cellSize < board.height; iVertical++){
        let iHorizontal = 0;
        for(iHorizontal; iHorizontal * cellSize < board.width; iHorizontal++){
            cell[[iHorizontal],[iVertical]] = 0;
        }
    }

    let i = 0;
    for (i; i < numOfSpawn; i++){
        var randomH = Math.floor(Math.random()*Math.floor((board.clientWidth/cellSize)))
        var randomV = Math.floor(Math.random()*Math.floor((board.clientHeight/cellSize)))
        cell[
            [randomH],
            [randomV]
        ] = 1;
    }
}

function update(){
    board.width = document.documentElement.clientWidth;
    board.height = document.documentElement.clientHeight;
    
    if (board.height < board.width){
        cellSize = Math.floor(board.height/cellAmount);
    } else {
        cellSize = Math.floor(board.width/cellAmount);
    }

    let iVertical = 0;
    for (iVertical; iVertical * cellSize < board.height; iVertical++){
        let iHorizontal = 0;
        for(iHorizontal; iHorizontal * cellSize < board.width; iHorizontal++){
            context.fillStyle = "black";
            context.fillRect(
                iHorizontal * cellSize,
                iVertical * cellSize,
                cellSize,
                cellSize
            )
            if (cell[[iHorizontal],[iVertical]] === 1){    
                context.fillStyle = "white";
                context.fillRect(
                    iHorizontal * cellSize,
                    iVertical * cellSize,
                    cellSize,
                    cellSize
                )
            }
        }
    }
}

window.onload = () => {
    board = document.getElementById("board");
    context = board.getContext("2d");
    createBoard();
    setInterval(update,1000/60)
}

请注意，我已经删除了HTML中的&quot;，以便代码在JavaScript中正确运行。如果您需要任何进一步的帮助或解决问题，请告诉我。

英文:

I am trying to create a replication of John Conway's game of life, and I am working on making a functional 2D array that can retrieve if the cell is dead or alive, however, when attempting to draw the first 10 random cells on the screen, instead of drawing 10 random cells, my code draws 10 random lines. The code I am using is the following:

let board;
let context;
const cellAmount = 100;
let cellSize;
const numOfSpawn = 10;
var cell = [[],[]];
function createBoard(){
board.width = document.documentElement.clientWidth;
board.height = document.documentElement.clientHeight
if (board.height &lt; board.width){
cellSize = Math.floor(board.height/cellAmount);
} else {
cellSize = Math.floor(board.width/cellAmount);
}
let iVertical = 0;
for (iVertical; iVertical * cellSize &lt; board.height; iVertical++){
let iHorizontal = 0;
for(iHorizontal; iHorizontal * cellSize &lt; board.width; iHorizontal++){
cell[[iHorizontal],[iVertical]] = 0;
}
}
let i = 0;
for (i; i &lt; numOfSpawn; i++){
var randomH = Math.floor(Math.random()*Math.floor((board.clientWidth/cellSize)))
var randomV = Math.floor(Math.random()*Math.floor((board.clientHeight/cellSize)))
cell[
[randomH],
[randomV]
] = 1;
}
}
function update(){
board.width = document.documentElement.clientWidth;
board.height = document.documentElement.clientHeight;
if (board.height &lt; board.width){
cellSize = Math.floor(board.height/cellAmount);
} else {
cellSize = Math.floor(board.width/cellAmount);
}
let iVertical = 0;
for (iVertical; iVertical * cellSize &lt; board.height; iVertical++){
let iHorizontal = 0;
for(iHorizontal; iHorizontal * cellSize &lt; board.width; iHorizontal++){
context.fillStyle = &quot;black&quot;;
context.fillRect(
iHorizontal * cellSize,
iVertical * cellSize,
cellSize,
cellSize
)
if (cell[[iHorizontal],[iVertical]] === 1){    
context.fillStyle = &quot;white&quot;;
context.fillRect(
iHorizontal * cellSize,
iVertical * cellSize,
cellSize,
cellSize
)
}
}
}
}
window.onload = () =&gt; {
board = document.getElementById(&quot;board&quot;);
context = board.getContext(&quot;2d&quot;);
createBoard();
setInterval(update,1000/60)
}

I have attempted a couple of things:
I attempted to invert line 61 to if (cell[[iVertical],[iVertical]] === 1){, however, that just inverts the horizontal lines onto vertical lines

I have also attempted to make a nested if statement, so the code becomes:

if (cell[[iHorizontal],[iVertical]] === 1){    
if (cell[[iVertical],[iHorizontal]] === 1){   
context.fillStyle = &quot;white&quot;;
context.fillRect(
iHorizontal * cellSize,
iVertical * cellSize,
cellSize,
cellSize
)
}
}

However, both this attempts have been unsuccessful.

答案1

得分: 0

您的主要问题是，您的多维数组不是100x100，而只有2x100。以下是已经修复了多维数组初始化和修正了数组索引的工作版本：

let board = {};
let context;

const cellAmount = 100;
let cellSize;

const numOfSpawn = 10;

var cell = [];

function createBoard(){
    board.width = document.documentElement.clientWidth;
    board.height = document.documentElement.clientHeight;

    if (board.height < board.width){
        cellSize = Math.floor(board.height/cellAmount);
    } else {
        cellSize = Math.floor(board.width/cellAmount);
    }

    // 数组初始化
    for (let iHorizontal = 0; iHorizontal * cellSize < board.width; iHorizontal++) {
        cell[iHorizontal] = [];
    }

    let iVertical = 0;
    for (iVertical; iVertical * cellSize < board.height; iVertical++){
        let iHorizontal = 0;
        for(iHorizontal; iHorizontal * cellSize < board.width; iHorizontal++){
            cell[iHorizontal][iVertical] = 0;
        }
    }

    let i = 0;
    for (i; i < numOfSpawn; i++){
        var randomH = Math.floor(Math.random()*Math.floor((board.clientWidth/cellSize))
        var randomV = Math.floor(Math.random()*Math.floor((board.clientHeight/cellSize))
        cell[randomH][randomV] = 1;
    }
}

function update(){
    board.width = document.documentElement.clientWidth;
    board.height = document.documentElement.clientHeight;

    if (board.height < board.width){
        cellSize = Math.floor(board.height/cellAmount);
    } else {
        cellSize = Math.floor(board.width/cellAmount);
    }
    console.log(cellSize)

    let iVertical = 0;
    for (iVertical; iVertical * cellSize < board.height; iVertical++){
        let iHorizontal = 0;
        for(iHorizontal; iHorizontal * cellSize < board.width; iHorizontal++){
            context.fillStyle = "black";
            context.fillRect(
                iHorizontal * cellSize,
                iVertical * cellSize,
                cellSize,
                cellSize
            )
            if (cell[iHorizontal][iVertical] === 1){    
                context.fillStyle = "white";
                context.fillRect(
                    iHorizontal * cellSize,
                    iVertical * cellSize,
                    cellSize,
                    cellSize
                )
            }
        }
    }
}

window.onload = () => {
    board = document.getElementById("board");
    context = board.getContext("2d");
    createBoard();
    update();
    // setInterval(update,1000/60)
}

我已经修复了数组的初始化和索引问题。

英文:

Your main issue is that instead of 100x100 multidimension array you had only 2x100 array. Here is working version, where I added multidimension array initialization and fixed array indexing (a[[i][j] => a[i][j])

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let board = {};
let context;
const cellAmount = 100;
let cellSize;
const numOfSpawn = 10;
var cell = [];
function createBoard(){
board.width = document.documentElement.clientWidth;
board.height = document.documentElement.clientHeight
if (board.height &lt; board.width){
cellSize = Math.floor(board.height/cellAmount);
} else {
cellSize = Math.floor(board.width/cellAmount);
}
// array init
for (let iHorizontal = 0; iHorizontal * cellSize &lt; board.width; iHorizontal++) {
cell[iHorizontal] = [];
}
let iVertical = 0;
for (iVertical; iVertical * cellSize &lt; board.height; iVertical++){
let iHorizontal = 0;
for(iHorizontal; iHorizontal * cellSize &lt; board.width; iHorizontal++){
cell[iHorizontal][iVertical] = 0;
}
}
let i = 0;
for (i; i &lt; numOfSpawn; i++){
var randomH = Math.floor(Math.random()*Math.floor((board.clientWidth/cellSize)))
var randomV = Math.floor(Math.random()*Math.floor((board.clientHeight/cellSize)))
cell[randomH][randomV] = 1;
}
}
function update(){
board.width = document.documentElement.clientWidth;
board.height = document.documentElement.clientHeight;
if (board.height &lt; board.width){
cellSize = Math.floor(board.height/cellAmount);
} else {
cellSize = Math.floor(board.width/cellAmount);
}
console.log(cellSize)
let iVertical = 0;
for (iVertical; iVertical * cellSize &lt; board.height; iVertical++){
let iHorizontal = 0;
for(iHorizontal; iHorizontal * cellSize &lt; board.width; iHorizontal++){
context.fillStyle = &quot;black&quot;;
context.fillRect(
iHorizontal * cellSize,
iVertical * cellSize,
cellSize,
cellSize
)
if (cell[iHorizontal][iVertical] === 1){    
context.fillStyle = &quot;white&quot;;
context.fillRect(
iHorizontal * cellSize,
iVertical * cellSize,
cellSize,
cellSize
)
}
}
}
}
window.onload = () =&gt; {
board = document.getElementById(&quot;board&quot;);
context = board.getContext(&quot;2d&quot;);
createBoard();
update();
// setInterval(update,1000/60)
}

<!-- language: lang-html -->

&lt;canvas style=&quot;border: 1px solid red&quot; id=&quot;board&quot;&gt;&lt;/canvas&gt;

<!-- end snippet -->

答案2

得分: -1

这是一个说明，说明了如何绘制矩形。

let board;
let context;

const cellAmount = 100;
let cellSize;

const numOfSpawn = 10;

var cell = [[],[]];

function createBoard(){
    board.width = document.documentElement.clientWidth;
    board.height = document.documentElement.clientHeight

    if (board.height < board.width){
        cellSize = Math.floor(board.height/cellAmount);
    } else {
        cellSize = Math.floor(board.width/cellAmount);
    }
    
    let iVertical = 0;
    for (iVertical; iVertical * cellSize < board.height; iVertical++){
        let iHorizontal = 0;
        for(iHorizontal; iHorizontal * cellSize < board.width; iHorizontal++){
            cell[[iHorizontal],[iVertical]] = 0;
        }
    }

    let i = 0;
    for (i; i < numOfSpawn; i++){
        var randomH = Math.floor(Math.random()*Math.floor((board.clientWidth/cellSize)))
        var randomV = Math.floor(Math.random()*Math.floor((board.clientHeight/cellSize)))
        cell[
            [randomH],
            [randomV]
        ] = 1;
    }
}

function update(){
    board.width = document.documentElement.clientWidth;
    board.height = document.documentElement.clientHeight;
    if (board.height < board.width){
        cellSize = Math.floor(board.height/cellAmount);
    } else {
        cellSize = Math.floor(board.width/cellAmount);
    }

    let iVertical = 0;
    for (iVertical; iVertical * cellSize < board.height; iVertical++){
        let iHorizontal = 0;
        for(iHorizontal; iHorizontal * cellSize < board.width; iHorizontal++){
            context.fillStyle = "black";
            // only draw if even iVertical && even iHorizontal;
            iVertical % 2 && iHorizontal % 2 && context.fillRect(
                (iHorizontal * cellSize),
                iVertical * cellSize,
                cellSize,
                cellSize
            )

            if (cell[[iHorizontal],[iVertical]] === 1){ 
                context.fillStyle = "white";
                context.fillRect(
                    iHorizontal * cellSize,
                    iVertical * cellSize,
                    cellSize,
                    cellSize
                )
            }
        }
    }
}

window.onload = () => {
    board = document.getElementById("board");
    context = board.getContext("2d");
    createBoard();
    update();
    //setInterval(update,1000/60)
}

<canvas style="border: 1px solid red" id="board"></canvas>
英文:

Here's an illustration of how your rectangles are being drawn.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let board;
let context;
const cellAmount = 100;
let cellSize;
const numOfSpawn = 10;
var cell = [[],[]];
function createBoard(){
board.width = document.documentElement.clientWidth;
board.height = document.documentElement.clientHeight
if (board.height &lt; board.width){
cellSize = Math.floor(board.height/cellAmount);
} else {
cellSize = Math.floor(board.width/cellAmount);
}
let iVertical = 0;
for (iVertical; iVertical * cellSize &lt; board.height; iVertical++){
let iHorizontal = 0;
for(iHorizontal; iHorizontal * cellSize &lt; board.width; iHorizontal++){
cell[[iHorizontal],[iVertical]] = 0;
}
}
let i = 0;
for (i; i &lt; numOfSpawn; i++){
var randomH = Math.floor(Math.random()*Math.floor((board.clientWidth/cellSize)))
var randomV = Math.floor(Math.random()*Math.floor((board.clientHeight/cellSize)))
cell[
[randomH],
[randomV]
] = 1;
}
}
function update(){
board.width = document.documentElement.clientWidth;
board.height = document.documentElement.clientHeight;
if (board.height &lt; board.width){
cellSize = Math.floor(board.height/cellAmount);
} else {
cellSize = Math.floor(board.width/cellAmount);
}
let iVertical = 0;
for (iVertical; iVertical * cellSize &lt; board.height; iVertical++){
let iHorizontal = 0;
for(iHorizontal; iHorizontal * cellSize &lt; board.width; iHorizontal++){
context.fillStyle = &quot;black&quot;;
// only draw if even iVertical &amp;&amp; even iHorizontal;
iVertical % 2 &amp;&amp; iHorizontal % 2 &amp;&amp; context.fillRect(
(iHorizontal * cellSize),
iVertical * cellSize,
cellSize,
cellSize
)
if (cell[[iHorizontal],[iVertical]] === 1){ 
context.fillStyle = &quot;white&quot;;
context.fillRect(
iHorizontal * cellSize,
iVertical * cellSize,
cellSize,
cellSize
)
}
}
}
}
window.onload = () =&gt; {
board = document.getElementById(&quot;board&quot;);
context = board.getContext(&quot;2d&quot;);
createBoard();
update();
//setInterval(update,1000/60)
}

<!-- language: lang-html -->

&lt;canvas style=&quot;border: 1px solid red&quot; id=&quot;board&quot;&gt;&lt;/canvas&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月15日 19:31:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/75744105.html
  • canvas
  • javascript
  • multidimensional-array
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定