Merge pull request #130 from VCGithubCode/fernando_branch

Add some more style to memory game adding image and give more space f…

assets/css/game.css

@@ -6,8 +6,20 @@
     overflow: hidden;
 }
 
-body, html {
+body,
+html {
     overflow: auto !important;
     background-color: #049cd8;
 }
 
+#screen {
+    width: 100vw;
+    height: 100vh;
+    max-width: 1600px;
+    max-height: 1200px;
+    padding-top: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+}

assets/css/memory.css

@@ -47,7 +47,7 @@ button {
   display: block;
 }
 .game__board {
-  max-width: 300px;
+  max-width: 600px;
   width: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -59,8 +59,8 @@ button {
   padding: 30px;
 }
 .game__card {
-  width: 75px;
-  height: 75px;
+  width: 95px;
+  height: 95px;
   margin: 0 auto;
   perspective: 50px;
   transform-style: preserve-3d;
@@ -89,9 +89,9 @@ button {
   transform: rotateY(180deg);
 }
 .game__img {
-  max-width: 45px;
+  max-width: 85px;
   width: 100%;
-  max-height: 45px;
+  max-height: 85px;
   height: 100vh;
   -o-object-fit: cover;
      object-fit: cover;

assets/js/layers/collision.js

@@ -41,12 +41,7 @@ function createTileCandidateLayer(tileCollider) {
 }
 
 export function createCollisionLayer(level) {
-
-    const drawTileCandidates = createTileCandidateLayer(level.tileCollider);
-    const drawBoundingBoxes = createEntityLayer(level.entities);
-
     return function drawCollision(context, camera) {
-        drawTileCandidates(context, camera);
-        drawBoundingBoxes(context, camera);
+        // No-op, as we're not drawing anything
     };
-}
+}

assets/js/main.js

@@ -2,12 +2,12 @@ import Camera from './Camera.js';
 import Entity from './Entity.js';
 import PlayerController from './traits/PlayerController.js';
 import Timer from './Timer.js';
-import {createLevelLoader} from './loaders/level.js';
-import {loadFont} from './loaders/font.js';
-import {loadEntities} from './entities.js';
-import {setupKeyboard} from './input.js';
-import {createCollisionLayer} from './layers/collision.js';
-import {createDashboardLayer} from './layers/dashboard.js';
+import { createLevelLoader } from './loaders/level.js';
+import { loadFont } from './loaders/font.js';
+import { loadEntities } from './entities.js';
+import { setupKeyboard } from './input.js';
+import { createCollisionLayer } from './layers/collision.js';
+import { createDashboardLayer } from './layers/dashboard.js';
 
 function createPlayerEnv(playerEntity) {
     const playerEnv = new Entity();
@@ -27,6 +27,14 @@ async function main(canvas) {
         loadFont(),
     ]);
 
+    let audio = new Audio('audio/overworld.mp3');
+
+    // Set the loop attribute to true
+    audio.loop = true;
+
+    // Play the audio when the game starts
+    audio.play();
+
 
     const loadLevel = await createLevelLoader(entityFactory);
 
@@ -51,7 +59,7 @@ async function main(canvas) {
         deltaTime: null,
     };
 
-    const timer = new Timer(1/60);
+    const timer = new Timer(1 / 60);
     timer.update = function update(deltaTime) {
         gameContext.deltaTime = deltaTime;
         level.update(gameContext);
@@ -83,6 +91,14 @@ startButton.style.cssText = `
 document.body.appendChild(startButton);
 
 startButton.addEventListener('click', () => {
-  startButton.remove();
-  main(canvas);
-});
+    startButton.remove();
+    main(canvas);
+});
+
+let audio = new Audio('audio/overworld.mp3');
+
+// Set the loop attribute to true
+audio.loop = true;
+
+// Play the audio when the game starts
+audio.play();

assets/js/memory.js

@@ -63,7 +63,7 @@ function renderCard(fruit){
 
     const cardBack = document.createElement("div");
     cardBack.classList.add("game__card_back");
-    cardBack.innerHTML = "?";
+    cardBack.innerHTML = `<img src="img/memory_game/mariohut.png" alt="Imagem de fundo do card" style="width: 100%; height: 100%; object-fit: cover;">`;
 
     card.appendChild(cardFront);
     card.appendChild(cardBack);