Generate map wall from image

lab5/src/static/js/GameManager.js

@@ -27,6 +27,7 @@ var camera;
 var renderer;
 var player;
 var enemies = [];
+var foods = []
 var walls = [];
 var mapGenerator
 
@@ -44,24 +45,17 @@ function main() {
 	document.body.appendChild(renderer.domElement);
 	
 	//create objects
-
-	var geometry = new THREE.BoxGeometry(1,1,1);
-	var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
-	var cube = new THREE.Mesh(geometry, material);
-	var cube2 = new THREE.Mesh(geometry, material);
-	walls.push(cube);
-	walls.push(cube2);
+	var plane;
 	scene.add(camera);
-	scene.add(cube);
-	scene.add(cube2);
-	scene.add(mapGenerator.generateMap(1));
-	camera.position.z = 10;
+	[plane, walls, [x,y], foods] = mapGenerator.generateMap(1, scene);
+
+	// get all wall object from scene
+	
+
+	camera.position.z = 12;
 	camera.position.x = 0;
 	/*camera.position.y = -10;
-	camera.rotation.x = 0.5;*/ 
-
-	cube.position.x = 0;
-	cube.position.x = 2;
+	camera.rotation.x = 0.5;*/
 
 
 	// player
@@ -70,9 +64,8 @@ function main() {
 	var sphere = new THREE.Mesh( geometry, material );
 	sphere.name = 'player';
 	scene.add(sphere);
-	player =  new Player(0,2,sphere);
+	player =  new Player(x,y,sphere);
 
-	//console.log(sphere.position);
 	
 	function render(){
 		checkCollision();
@@ -121,6 +114,11 @@ function checkCollision() {
 			/*collisionResults[0].object.material.transparent = true;
 			collisionResults[0].object.material.opacity = 0.4;*/
 		}
+
+		/*collisionResults = ray.intersectObjects(foods);
+		if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
+			console.log('Miam');
+		}*/
 	}
 }
 

lab5/src/static/js/MapGenerator.js

+function convert2Dto1D(x, y, size){
+    return (y * size) + x;
+}
+
 class MapGenerator {
+
+
     constructor() {
         this.size = 21;
     }
-    generateMap(id) {
-        var map;
 
-        //
-        fetch("/get/map/"+id+"/", { headers: { "Content-Type": "text/plain; charset=utf-8" }})
-            .then(res => res.json()) // parse response as JSON
-            .then(response => {
+    //// 2 dimension coordinates to 1 dimension
 
-                console.log("RESPONSE !!!!!!!!!!!!!!!!");
-                console.log(response);
-            })
-            .catch(err => {
-                // hide the modal
-                console.log(err);
-                alert("Sorry, there are no results for your search");
-            });
 
+    generateMap(id, scene) {
+        var map;
+        
+        var walls = [];
 
-        // create ground
+        var map_content = [];
+        let playerSpawnX = 0, playerSpawnY=0;
+
+        // create ground 
         var geometry = new THREE.PlaneGeometry( this.size, this.size );
         var material = new THREE.MeshBasicMaterial( {color: 0x000000, side: THREE.DoubleSide} );
         var plane = new THREE.Mesh( geometry, material );
+        scene.add(plane);
         plane.position.z -= 0.5;
+
+        // send http request
+        fetch("/get/map/"+id+"/", { headers: { "Content-Type": "text/plain; charset=utf-8" }})
+            .then(res => res.json()) // parse response as JSON
+            .then(response => {
+
+                // copy response to array
+                for (let i = 0; i < this.size*this.size; i++) {
+                    map_content.push(response[i]);
+                }
+
+                // loop through map content in 2 dimension to prepare to position walls in ground
+                let i = 0;
+                let offsetX, offsetY, wallWidth, wallHeight, wallPosX, wallPosY;
+                for (let y = 0; y < this.size; y++) {
+                    for (let x = 0; x < this.size; x++) {
+                        i = convert2Dto1D(x,y,this.size);
+                        
+                        switch (map_content[i]){ // 
+                            case "WALL":
+                                offsetX = 1;
+                                offsetY = 1;
+                                wallWidth = 1;
+                                wallHeight = 1;
+                                wallPosX = x;
+                                wallPosY = y;
+                            
+                                map_content[i] = '' ; //empty the box to prevent from creating 2 walls at the same spot
+                                
+                                // check for a horizontal line of wall
+                                while (map_content[convert2Dto1D(x + offsetX, y,this.size)] == 'WALL' & x + offsetX < this.size){
+                                    map_content[convert2Dto1D(x + offsetX, y,this.size)] = '';
+                                    wallWidth++;
+                                    offsetX++;
+                                }
+
+                                //check for a vertical line of wall only if it was not a horizonatl wall
+                                while (wallWidth <= 1 & map_content[convert2Dto1D(x, y + offsetY,this.size)] == 'WALL' & y + offsetY < this.size){
+                                    map_content[convert2Dto1D(x, y + offsetY,this.size)] = ''
+                                    wallHeight++;
+                                    offsetY++;
+                                }
+
+                                //create wall object
+                                var geometry = new THREE.BoxGeometry( wallWidth, wallHeight ,0.6);
+                                var material = new THREE.MeshBasicMaterial( {color: 0x0000FF} );
+                                var wall = new THREE.Mesh( geometry, material );
+                                // re-position coreectly
+                                wall.position.x = wallPosX - (this.size)/2 + wallWidth/2;
+                                wall.position.y = wallPosY - (this.size)/2 + wallHeight /2;
+                                // add to scene
+                                scene.add(wall);
+                                walls.push(wall);
+                                break;
+
+                            case "FOOD":
+                                break;
+
+                            case "S_FOOD":
+                                break;
+
+                            case "FOOD":
+                                break;
+
+                            case "SPAWN_P":
+                                playerSpawnX = x;
+                                playerSpawnY = y;
+                                break;
+
+                        }
+                    }
+                }
+                
+            })
+            .catch(err => {
+                alert(err);
+            });      
         
-        return plane;
+        return [plane, walls, [playerSpawnX, playerSpawnY]];
     }
-}
-
+}
\ No newline at end of file