HTML5 loop of a array of objects

Question

I'm trying to make a grid that when clicking in a square it turns green, but i keep having trouble with adding objects to my array, if there preset they display fine but if add them once i click my mouse they wont render.

var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");
var Img = {};
Img.tileMap = new Image();
Img.tileMap.src = 'TitleMap.png';

WIDTH = 1536;
HEIGHT = 896;

currentImage = [32, 32];

ctx.strokeStyle = '#ffffff';

function createGrid() {
  ctx.strokeStyle = '#ffffff'
  for (var i = 0; i < WIDTH; i++) {
    ctx.beginPath();
    ctx.moveTo(i * 32, 0);
    ctx.lineTo(i * 32, HEIGHT);
    ctx.stroke();
  }

  for (var i = 0; i < HEIGHT; i++) {
    ctx.beginPath();
    ctx.moveTo(0, i * 32);
    ctx.lineTo(1536, i * 32);
    ctx.stroke();
  }
}


var tiles = [{
  x: 1,
  y: 1
}];
var mousePos = null;

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: Math.round((evt.clientX - rect.left) / (rect.right - rect.left) *
      canvas.width),
    y: Math.round((evt.clientY - rect.top) / (rect.bottom - rect.top) *
      canvas.height)
  };
}

canvas.addEventListener('mousemove', function(evt) {
  mousePos = getMousePos(canvas, evt);
}, false);

document.body.onmousedown = function() {
  pos = {
    x: Math.floor(mousePos.x / 32),
    y: Math.floor(mousePos.y / 32),
  };

  tiles.push(pos);

}

function drawTiles() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  createGrid();
  if (tiles.length) {
    for (var id in tiles) {
      ctx.fillStyle = "#42f456";
      ctx.strokeStyle = '#42f456';
      ctx.fillRect(tiles[id].x, tiles[id].y, 32, 32);

    }
  }
}

setInterval(drawTiles(), 1000 / 30);

<center>
  <canvas id="ctx" width="1536" height="896" style="border:1px solid #ffffff;">
</canvas>
</center>

Alexander Nied · Accepted Answer · 2017-03-14 20:55:56Z

You were doing your setInterval wrong-- you want to pass the function, not call it-- otherwise whatever the function returns is what is passed to setInterval.

<body bgcolor="#000000">


<center><canvas id="ctx" width="1536" height="896" style="border:1px solid #ffffff;">
</canvas></center>
<script>
    var canvas = document.getElementById("ctx");
    var ctx = canvas.getContext("2d");
    var Img = {};
    Img.tileMap = new Image();
    Img.tileMap.src = 'TitleMap.png';

    WIDTH = 1536;
    HEIGHT = 896;

    currentImage = [32,32];

    ctx.strokeStyle = '#ffffff';

    function createGrid(){
        ctx.strokeStyle = '#ffffff'
        for (var i = 0 ; i < WIDTH; i++){
            ctx.beginPath();
            ctx.moveTo(i*32,0);
            ctx.lineTo(i*32,HEIGHT);
            ctx.stroke();
        }

        for (var i = 0 ; i < HEIGHT; i++){
            ctx.beginPath();
            ctx.moveTo(0,i*32);
            ctx.lineTo(1536,i*32);
            ctx.stroke();
        }
    }


    var tiles = [{x:1,y:1}];
    var mousePos = null;

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
        x: Math.round((evt.clientX-rect.left)/(rect.right-rect.left)*canvas.width),
        y: Math.round((evt.clientY-rect.top)/(rect.bottom-rect.top)*canvas.height)
        };
      }

     canvas.addEventListener('mousemove', function(evt) {
        mousePos = getMousePos(canvas, evt);
      }, false);

    document.body.onmousedown = function() { 
        pos = {
            x:Math.floor(mousePos.x/32), 
            y:Math.floor(mousePos.y/32),
        };

        tiles.push(pos);

    }

    function drawTiles(){
        ctx.clearRect(0,0,WIDTH,HEIGHT);
        createGrid();
        if(tiles.length){
            for (var id in tiles){
                ctx.fillStyle = "#42f456";
                ctx.strokeStyle = '#42f456';
                ctx.fillRect(tiles[id].x,tiles[id].y,32,32);

            }
        }
    }

    setInterval(drawTiles,1000/30);



</script>
</body>

Also, a few quick notes-- you're playing fast and loose with your var statements-- make sure if you don't want a variable to be global you declare it with a var. And also note that for...in loops are for iterating over object keys-- to iterate over an array, use a standard for loop. And finally, consider if a setInterval is even required-- seems like it might be sufficient to simply call drawTiles in the onmousedown after you push the new position into the tiles array.

Also, the mouse position is off, shouldn't it be ctx.fillRect(tiles[id].x*32,tiles[id].y*32,32,32);? Or just remove the /32 from mousedown
@Corvae -- yeah, good point, I definitely noticed that things weren't positioning how I would expect-- but I had to stop somewhere :)

Collectives™ on Stack Overflow

HTML5 loop of a array of objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related