Moving player + collision + starter terrain generator

lab4/src/lab4.js

@@ -521,8 +521,6 @@ const KEYS = {
 };
 
 window.addEventListener("keydown", function (event) {
-
-   
 	if (!KEYS[event.code] || currentCameraNum === 0) return;
 	let { direction, pos } = KEYS[event.code];
   //currentLookAt[pos] += CAMERA_SPEED * direction;

lab5/src/GameManager.js

+
+const DIRECTION = { 
+	UP: 'UP',
+	DOWN: 'DOWN',
+	RIGHT: 'RIGHT',
+	LEFT: 'LEFT',
+	NONE: 'NONE'
+};
+
+const MOVEMENT = {
+	LEFT: { x: -0.08, y: 0 },
+	RIGHT: { x: 0.08, y: 0 },
+	UP: { x: 0, y : 0.08 },
+	DOWN: { x: 0, y: -0.08 },
+	NONE: { x: 0, y: 0 }
+};
+
+const KEYS = {
+	ArrowLeft:  DIRECTION.LEFT,
+	ArrowRight: DIRECTION.RIGHT,
+	ArrowUp: DIRECTION.UP,
+	ArrowDown: DIRECTION.DOWN
+};
+
+var scene;
+var camera;
+var renderer;
+var player;
+var enemies = [];
+var walls = [];
+var mapGenerator
+
+function main() {
+	mapGenerator = new MapGenerator();
+
+	mapGenerator.generateMap("maps/map1.png");
+
+	// init scene
+	scene = new THREE.Scene();
+	scene.background = new THREE.Color( 0x3f3f3f );
+	camera = new THREE.PerspectiveCamera(85, window.innerWidth / window.innerHeight, 0.1, 1000);
+	renderer = new THREE.WebGLRenderer();
+	renderer.setSize(window.innerWidth, window.innerHeight);
+	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);
+	scene.add(camera);
+	scene.add(cube);
+	scene.add(cube2);
+	scene.add(mapGenerator.generateMap("maps/map1.png"));
+	camera.position.z = 13;
+	camera.position.x = 0;
+	camera.position.y = 0;
+
+	cube.position.x = 0;
+	cube.position.x = 2;
+
+
+	// player
+	geometry = new THREE.SphereGeometry(0.45);
+	material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
+	var sphere = new THREE.Mesh( geometry, material );
+	sphere.name = 'player';
+	scene.add(sphere);
+	player =  new Player(0,2,sphere);
+
+	console.log(sphere.position);
+	
+	function render(){
+		checkCollision();
+		player.move();
+		
+		requestAnimationFrame(render);
+		renderer.render(scene, camera);
+		
+	}
+	render();
+
+}
+
+function checkCollision() {
+	/*walls.forEach(function (wall) {
+		wall.material.transparent = false;
+		wall.material.opacity = 1.0;
+	});*/
+	var playerObj = scene.getObjectByName('player');
+	var originPoint = playerObj.position.clone();
+	var originPointFastForward = originPoint;
+	let {x,y} = MOVEMENT[player.getDirection()];
+	originPointFastForward.x += x;
+	originPointFastForward.y += y; 
+	for (var vertexIndex = 0; vertexIndex < playerObj.geometry.vertices.length; vertexIndex++) {
+		var localVertex = playerObj.geometry.vertices[vertexIndex].clone();
+		var globalVertex = localVertex.applyMatrix4(playerObj.matrix);
+		var directionVector = globalVertex.sub(playerObj.position);
+		var ray = new THREE.Raycaster(originPointFastForward, directionVector.clone().normalize());
+		var collisionResults = ray.intersectObjects(walls);
+		if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) {
+			console.log(collisionResults);
+			player.setDirection(DIRECTION.NONE);
+			
+			/*collisionResults[0].object.material.transparent = true;
+			collisionResults[0].object.material.opacity = 0.4;*/
+		}
+	}
+}
+
+window.addEventListener("keydown", function (event) {
+
+	//change player direction
+	if (KEYS[event.code])
+		player.setDirection(KEYS[event.code]);
+
+
+});
+

lab5/src/MapGenerator.js

+class MapGenerator {
+    constructor() {
+        this.size = 21;
+    }
+    generateMap(filePath) {
+        var map;
+        /*var img = new Image(21,21);
+        img.src = filePath;
+        var canvas = document.createElement('canvas');
+        var context = canvas.getContext('2d');
+        context.drawImage(img, 0, 0, img.width, img.height);
+        
+        console.log(img);
+        console.log(img.width);
+        console.log(img.height);
+        console.log(canvas);
+        document.body.appendChild(img);
+        document.body.appendChild(canvas);
+
+        for(var x = 0; x < img.width; x++){
+            for(var y = 0; y < img.height; y++){
+                console.log(context.getImageData(x, y, 1, 1).data);
+            }
+        }*/
+
+        // 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 );
+        plane.position.z -= 0.5;
+        
+        return plane;
+    }
+}
+

lab5/src/Player.js

+class Player {
+    constructor(posX, posY, obj) {
+        this.object = obj;
+        this.object.position.x = posX;
+        this.object.position.y = posY;
+        this.direction = DIRECTION.NONE;
+    }
+
+    move(){
+        let { x, y } = MOVEMENT[this.direction];
+        this.object.position.x += x;
+        this.object.position.y += y;
+
+        // TODO
+        //autoriser les movement uniquement lorsque la position x ou y est sur .5
+        // x % 1 == 0.5 -> change direction 
+    }
+
+    setDirection(dir){
+        this.direction = dir;
+    }
+
+    getDirection(){
+        return this.direction;
+    }
+
+}
\ No newline at end of file

lab5/src/lab5.html

@@ -13,6 +13,8 @@
 		<div id="main">
 		</div>
 		<script src="lib/three.js"></script>
-		<script src="lab5.js"></script>
+		<script src="GameManager.js"></script>
+		<script src="MapGenerator.js"></script>
+		<script src="Player.js"></script>
 	</body>
 </html>
\ No newline at end of file

lab5/src/lab5.js

-function main() {
-	var scene = new THREE.Scene();
-	var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-	var renderer = new THREE.WebGLRenderer();
-	renderer.setSize(window.innerWidth, window.innerHeight);
-	document.body.appendChild(renderer.domElement)
-	
-	var geometry = new THREE.BoxGeometry(1,1,1);
-	var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
-	var cube = new THREE.Mesh(geometry, material);
-	scene.add(camera);
-	scene.add(cube);
-	camera.position.z = 3;
-	camera.position.x = 0;
-	camera.position.y = 0;
-	
-	/*var light = new THREE.AmbientLight( 0xff0000 ); // soft white light
-	scene.add( light );
-	var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
-	scene.add( directionalLight );*/
-	
-	function render(){
-		requestAnimationFrame(render);
-		renderer.render(scene, camera);
-		cube.rotation.x += 0.01;
-		cube.rotation.y += 0.01;
-		cube.rotation.z += 0.01;
-	}
-	render();
-}