One of the functions is prohibiting movement fixed issue csivitu#5

jsfiles/maze.js

@@ -42,80 +42,58 @@ if (!ctx) {
     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]];
+
+    const wall = new Image();
+wall.src = './images/wall.png'; // Ensure this path is correct
 
-    const wall=new Image();
-    wall.src='./images/wall.png';
-    if (!wall) {
-        console.error('Canvas 2D context not found');
-
-    }
-    let imagesLoaded=0;
+const empty = new Image();
+empty.src = './images/empty.png'; // Ensure this path is correct
 
-    const empty=new Image();
-    empty.src='./images/empty.png';
-    if (!empty) {
-        console.error('Canvas 2D context not found');
-
-    }
+let imagesLoaded = 0;
 
-    wall.onload = () => {
-        imagesLoaded++;
-        if (imagesLoaded === 2) {
-            draw(ctx);
-        }
-    };
-    empty.onload = () => {
-        imagesLoaded++;
-        if (imagesLoaded === 2) {
-            draw(ctx);
-        }
-    };
+wall.onload = () => {
+    imagesLoaded++;
+    console.log('Wall image loaded');
+    checkImagesLoaded();
+};
 
-    function resizeCanvas() {
-        const viewportHeight = window.innerHeight;
-        const viewportWidth = window.innerWidth;
-        canvas.width = viewportWidth *0.85;
-        canvas.height = viewportHeight * 0.85;
-    }
-    resizeCanvas();
+empty.onload = () => {
+    imagesLoaded++;
+    console.log('Empty image loaded');
+    checkImagesLoaded();
+};
 
-    function generateWalls() {
-        walls = [];
-        tilesize = Math.min(canvas.width / maze[0].length, canvas.height / maze.length);
-        for (let row = 0; row < maze.length; row++) {
-            for (let column = 0; column < maze[row].length; column++) {
-                if (maze[row][column] === 1) {
-                    walls.push({
-                        x: column * 32,
-                        y: row * tilesize,
-                        width: 32,
-                        height: tilesize
-                    });
-                }
-            }
-        }
+function checkImagesLoaded() {
+    if (imagesLoaded === 2) {
+        resizeCanvas();
+        draw(ctx);
     }
+}
 
-
-
-    export function draw(ctx){
-        let tilesize= Math.min(canvas.width / maze[0].length, canvas.height / maze.length);
-                for (let row=0;row<maze.length;row++) {
-                    for (let column=0;column<maze[row].length; column++) {
-                        const img= maze[row][column] ===1 ? wall : empty;
-                        ctx.drawImage(img ,column*32, row*tilesize,32,tilesize);
-                    }
-                }
+function resizeCanvas() {
+    const viewportHeight = window.innerHeight * 0.85;
+    const viewportWidth = window.innerWidth * 0.85;
+    canvas.width = viewportWidth;
+    canvas.height = viewportHeight;
+    console.log(`Canvas resized to: ${canvas.width}x${canvas.height}`);
+    if (imagesLoaded === 2) {
+        draw(ctx); // Redraw maze on resize
     }
-    window.addEventListener('resize', () => {
-        resizeCanvas();
-        if (imagesLoaded === 2) {
-            draw(ctx); // Only draw after both images are loaded
-        }
-    });
+}
 
-    export function getWalls(){
-        return walls;
-    }
+function draw(ctx) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas before drawing
+    const tilesize = Math.min(canvas.width / maze[0].length, canvas.height / maze.length);
 
+    console.log(`Tile size: ${tilesize}`);
 
+    for (let row = 0; row < maze.length; row++) {
+        for (let column = 0; column < maze[row].length; column++) {
+            const img = maze[row][column] === 1 ? wall : empty;
+            ctx.drawImage(img, column * tilesize, row * tilesize, tilesize, tilesize);
+        }
+    }
+}
+
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas(); // Initial canvas setup

jsfiles/movement.js

@@ -112,8 +112,8 @@ window.addEventListener("keyup", function (e) {
 function isCollidingWithWall(x, y) {
     const tileX1 = Math.floor(x / tilesize);
     const tileY1 = Math.floor(y / tilesize);
-    const tileX2 = Math.floor((x + fireman.width) / tilesize);
-    const tileY2 = Math.floor((y + fireman.height) / tilesize);
+    const tileX2 = Math.floor((x + fireman.width - 1) / tilesize);
+    const tileY2 = Math.floor((y + fireman.height - 1) / tilesize);
 
     for (let tx = tileX1; tx <= tileX2; tx++) {
         for (let ty = tileY1; ty <= tileY2; ty++) {

mainpage.html

@@ -18,8 +18,8 @@ <h1 id="title">FireBoy</h1>
             </div>
         </div>
 
-       <script type="module" src="jsfiles/maze.js" defer></script>
-       <script type="module" src="jsfiles/movement.js" defer></script>
-       <script type="module" src="ghosts.js" defer></script>
+       <script type="module" src="jsfiles/maze.js"></script>
+       <script type="module" src="jsfiles/movement.js"></script>
+       <script type="module" src="jsfiles/ghosts.js"></script>
     </body>
 </html>

style.css

@@ -36,3 +36,23 @@ button {
 button:hover {
     background-color: #d33;
 }
+
+canvas {
+    border: 1px solid black;
+    display: block; /* Ensures the canvas is displayed as a block element */
+    margin: 0 auto; /* Centers the canvas horizontally */
+    max-width: 100%; /* Ensures the canvas doesn't overflow its container */
+    height: auto; /* Maintains aspect ratio */
+}
+
+#main {
+    width: 100%;
+    max-width: 1200px; /* Adjust as needed */
+    margin: 0 auto;
+}
+
+#center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}