Generate grid for tile map

rmkubik · Jun 17, 2019 · 71fa3c2 · 71fa3c2
1 parent 0a8408b
commit 71fa3c2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/raw/images/sprites.png b/raw/images/sprites.png
diff --git a/raw/pyxels/sprites.pyxel b/raw/pyxels/sprites.pyxel
diff --git a/src/index.js b/src/index.js
@@ -10,6 +10,20 @@ import {
 import sprites from "../raw/images/sprites.png";
 import "./styles/index.css";
 
+const createTiles = (height, width) => {
+  let count = 0;
+
+  return Array(height * width)
+    .fill(5)
+    .map(val => {
+      if (Math.floor(count / width) % 2 === 0) {
+        return count++ % 2 === 0 ? val : 6;
+      } else {
+        return count++ % 2 === 0 ? 6 : val;
+      }
+    });
+};
+
 const { canvas } = init("game");
 
 initKeys();
@@ -37,7 +51,7 @@ image.onload = () => {
     y: 0,
     width: 1000,
     height: 1000,
-    color: "#008751"
+    color: "#29adff"
   });
 
   sprite = Sprite({
@@ -65,8 +79,8 @@ image.onload = () => {
   let tileEngine = TileEngine({
     tilewidth: 8,
     tileheight: 8,
-    width: 3,
-    height: 3,
+    width: 16,
+    height: 16,
     tilesets: [
       {
         firstgid: 0,
@@ -78,7 +92,7 @@ image.onload = () => {
     layers: [
       {
         name: "ground",
-        data: [5, 5, 5, 5, 5, 5, 5, 5, 5]
+        data: createTiles(16, 16)
       }
     ]
   });