diff --git a/lab5/README.md b/lab5/README.md index fe199e9652bc711e47f273fdb900709d9bca677e..bec1b20a471113aa609c98532b70f42afd47c3db 100644 --- a/lab5/README.md +++ b/lab5/README.md @@ -20,6 +20,8 @@ Read `./src/README.md` for installation guide * Zoom in and out using `i` and `o` keys. +* Pause the game using `Esc`. Resume with arrows or `Esc`. + ### Flask server with 2 routes Read `./src/README.md` for installation guide @@ -32,4 +34,6 @@ Read `./src/README.md` for installation guide ## Features to be added -Let the user choose which map he wants to play in. \ No newline at end of file +* Let the user choose which map he wants to play in. This can actually be done by changing an argument in the code : at line 71 of `./src/static/js/GameManager.js`, change the first argument with one of these values : `map1`, `map2` or `map3`. You will need to reload the cache to see the new map `CTRL+F5`. + +* Score. \ No newline at end of file diff --git a/lab5/src/static/js/GameManager.js b/lab5/src/static/js/GameManager.js index a1ca8e999ab46ed8fc05aee3f0f96174a0e8fe97..cdd52d8011f862757be3492998706c1718fc276e 100644 --- a/lab5/src/static/js/GameManager.js +++ b/lab5/src/static/js/GameManager.js @@ -44,6 +44,8 @@ var mapGenerator var score = 0; var enemies_spawns = [] const MAX_ENEMIES = 5; +var playing; +var paused; const SIZE = 21 @@ -62,22 +64,12 @@ function main() { camera.position.z = 12; camera.position.x = 0; scene.add(camera); - - // Modal management - /*var span = document.getElementsByClassName("close")[0]; - var modal = document.getElementById("myModal"); - span.onclick = function() { - modal.style.display = "none"; - } - - window.onclick = function(event) { - if (event.target == modal) { - modal.style.display = "none"; - } - }*/ + playing = true; + paused = false; + //create objects - // laod map from image + // load map from image [plane, walls, foods, playerObj, path, enemies_spawns] = mapGenerator.generateMap("map1", scene); player = new Player(playerObj); @@ -86,10 +78,15 @@ function main() { spawnEnemy(); } - //getListofMaps(); function render(){ + + if (!playing | paused ){ + requestAnimationFrame(render); + return; + } + player.move(path); enemies.forEach(enemy => { @@ -124,7 +121,8 @@ function checkCollision() { //console.log(playerX + ' ' + playerY + ' ' + enemyX + ' ' + enemyY); if (enemyX == playerX & enemyY == playerY){ - alert("GameOver"); + playing = false; + alert("GameOver! Press F5 to reload the game."); } }); } @@ -134,16 +132,24 @@ function checkCollision() { window.addEventListener("keydown", function (event) { //change player direction - if (KEYS[event.code]) + if (KEYS[event.code]){ player.setDirection(KEYS[event.code]); + paused = false; + } + // zoom in if (event.code == "KeyI"){ camera.position.z -= 0.5; } - + // zoom out if (event.code == "KeyO"){ camera.position.z += 0.5; } + + if (event.code == "Escape"){ + paused = !paused; + console.log("pause"); + } }); @@ -165,26 +171,25 @@ function checkCollisionFood() { collisionResults = ray.intersectObjects(foods); if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) { - console.log("Miam " + collisionResults[0].object.name); + // remove food from list of foods and from scene + var index = -1; + for (let i = 0; i < foods.length; i++) { + if (collisionResults[0].object.name === foods[i].name ){ + console.log() + index = i; + } + } + if (index > 0){ + foods.splice(index, 1); + } + scene.remove(collisionResults[0].object); + console.log("lenght "+ foods.length); score++; } - - /*check collision with enemies - ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize()); - //collisionResults = ray.intersectObjects(enemies.map(o => o.getObject())); - //console.log(enemies.map(o => o.getObject())); - if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) { - - console.log('Game Over ' + collisionResults.length + ' ' ); - //player.setDirection(DIRECTION.NONE); - }*/ - - /*// check collision with walls - var ray = new THREE.Raycaster(originPointFastForward, directionVector.clone().normalize()); - var collisionResults = ray.intersectObjects(walls); - if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length()) { - player.setDirection(DIRECTION.NONE); - }*/ + } + if (foods.length == 0){ + playing=false; + alert("You win! Press F5 to reload the game."); } } diff --git a/lab5/src/templates/index.html b/lab5/src/templates/index.html index 50f709deb700e90bfd670237531baa3610d2ab7c..5b17abdfb2643b987d29b4360c2dd1f13de3d60a 100644 --- a/lab5/src/templates/index.html +++ b/lab5/src/templates/index.html @@ -7,42 +7,7 @@ <style type="text/css"> body { margin: 0; } canvas { width: 100%; height: 100% } - .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 1; /* Sit on top */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ - } - - /* Modal Content/Box */ - .modal-content { - background-color: #fefefe; - margin: 15% auto; /* 15% from the top and centered */ - padding: 20px; - border: 1px solid #888; - width: 80%; /* Could be more or less, depending on screen size */ - } - - /* The Close Button */ - .close { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; - } - - .close:hover, - .close:focus { - color: black; - text-decoration: none; - cursor: pointer; - } + </style> <script src="{{ url_for('static', filename="js/Player.js")}}"></script> <script src="{{ url_for('static', filename="js/Enemy.js")}}"></script> @@ -53,17 +18,6 @@ </head> <body onload="main()"> <div id="main"> - </div> - - <!--<div id="myModal" class="modal"> - <div class="modal-content"> - <span class="close">×</span> - <p>Choose the map you want to play..</p> - <div id="form"> - </div> - </div> - </div>--> - </body> </html> \ No newline at end of file