HTML5 - Beginners - forEach array.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  
</head>
<body>
  <div id="test"></div>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
  <script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

//
// our sprite array
var sprite = {
  x:0,
  y:0
};

var sprites = [];

for (i=0;i<10;i++){
tmp = Object.create(sprite);
		tmp.x = Math.random()*window.innerWidth;
		tmp.y = Math.random()*window.innerHeight;
		sprites.push(tmp);

}

gameloop=setInterval(doGameLoop,16);

function doGameLoop(){
myCanvas.height = window.innerHeight-32;
myCanvas.width = window.innerWidth-32;
ctx.fillStyle="rgb(0,0,0)";
ctx.fillRect(0,0,c.width,c.height);
ctx.fillStyle="rgb(255,255,255)";
ctx.fillText("Drawing a tilemap example.",10,10); 

// loop through each element in
// the sprites array.
// the forEach calles a function
// and passes a element through
// with the function
sprites.forEach(drawsprite);

// Here we loop through the
// sprites array and have the code
// in a code block here. the i
// contains the loop number.
sprites.forEach((sp,i) => {
  ctx.fillStyle = 'blue';
  ctx.fillRect(sp.x+5,sp.y+5,32,32);
  ctx.fillStyle = 'white';
  ctx.fillText(i,sp.x-5,sp.y-5);
});
}

// draw sprite function
function drawsprite(sp){
  ctx.fillStyle = 'white';
  ctx.fillRect(sp.x,sp.y,32,32);
}
</script>
</body>
</html> 