kunjgit · Pujan-sarkar · Jun 6, 2024 · Jun 9, 2024 · Jun 11, 2024 · Jun 11, 2024
diff --git a/Games/Pathways/.gitignore b/Games/Pathways/.gitignore
@@ -0,0 +1,3 @@
+CourseworkAWD_NOV2020.pdf
+/Old Original Game
+/README.txt
diff --git a/Games/Pathways/README.md b/Games/Pathways/README.md
@@ -0,0 +1,24 @@
+# Pathways - The Maze Game
+
+# [Game Interface] <img src="./assets/images/Earth_Guardian.png">
+
+## **Description 📃**
+
+This is simply a Maze game where you have to start from one point and go to the finish point as fast as you can!
+
+## LEVEL & DIFFICULTIES
+
+There are 5 levels in total & each new level increases the difficulty!
+
+## **How to play? 🕹️**
+
+You have to use your **W,S,A,D** keys (_W - UP_, _S - DOWN_, _A - LEFT_, _D - RIGHT_) to navigate throught the maze!
+
+### Made By: `Pujan Sarkar`
+
+# [Game Interface] <img src="/assets/images/Pathways.png">
+
+## **Screenshots 📸**
+
+<br>
+ # [Game image] <img src="/assets/images/Pathways.png">
diff --git a/Games/Pathways/assets/huge.gif b/Games/Pathways/assets/huge.gif
diff --git a/Games/Pathways/assets/large.gif b/Games/Pathways/assets/large.gif
diff --git a/Games/Pathways/assets/medium.gif b/Games/Pathways/assets/medium.gif
diff --git a/Games/Pathways/assets/normal.gif b/Games/Pathways/assets/normal.gif
diff --git a/Games/Pathways/assets/small.gif b/Games/Pathways/assets/small.gif
diff --git a/Games/Pathways/index.html b/Games/Pathways/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pathways</title>
+    <link rel="stylesheet" href="./style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="row">
+        <div class="col-sm d-flex justify-content-center align-items-center">
+          <span class="gameTitleDiv">
+            Player - Get the best finish time!
+          </span>
+        </div>
+      </div>
+      <div class="row" id="gameInfo">
+        <div
+          class="col-sm text-center"
+          style="font-size: 1.5rem; padding-bottom: 3%"
+        >
+         Pathways is simply a Maze game where you have to start from one
+          point and go to the finish point as fast as you can!
+          <br /><br />
+          <b>LEVEL & DIFFICULTIES</b><br />
+          There are 5 levels in total & each new level increases the difficulty!
+          <br /><br />
+          <b>INSTRUCTION</b><br />
+          You have to use your W,S,A,D keys (W - UP, S - DOWN, A - LEFT, D -
+          RIGHT) to navigate throught the maze!
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm d-flex justify-content-around align-items-center">
+          <button
+            type="button"
+            style="font-size: 2rem"
+            class="btn btn-success"
+            id="btnStart"
+            onclick="startTheGame()"
+          >
+            Start
+          </button>
+        </div>
+      </div>
+      <div class="row" id="timerDivHide">
+        <div
+          class="col-sm d-flex justify-content-around align-items-center"
+          id="timerDiv"
+        >
+          <div>
+            <span id="timeTitle">Player Name: </span>
+            <label id="name">'PRESS START'</label>
+          </div>
+          <div>
+            <span id="timeTitle">Time: </span> <label id="seconds">0s</label>
+          </div>
+          <div>
+            <span id="timeTitle">Level: </span> <label id="level">1</label>
+          </div>
+        </div>
+      </div>
+      <div class="row hide" id="canvasRow">
+        <div
+          class="cardStyle col-sm d-flex justify-content-center align-items-center mt-5 pt-5 pb-5"
+          id="cardStyle"
+        >
+          <canvas id="canvas" width="1000" height="1000">
+            This text is displayed if your browser does not support HTML5
+            Canvas.
+          </canvas>
+        </div>
+      </div>
+      <div class="row">
+        <div
+          class="totalStyle col-sm d-flex flex-column justify-content-center align-items-center"
+        >
+          <div class="totalTile">Final Result</div>
+          <div class="text-center" id="totalDisplay"></div>
+        </div>
+      </div>
+    </div>
+    <script>
+      var totalSeconds = 0;
+      function startTimer() {
+        var secondsLabel = document.getElementById("seconds");
+
+        setInterval(setTime, 1000);
+        function setTime() {
+          ++totalSeconds;
+          secondsLabel.innerHTML = totalSeconds + "s";
+        }
+      }
+    </script>
+    <script type="text/javascript" src="./script.js"></script>
+  </body>
+</html>
+
+<!-- https://html5.litten.com/make-a-maze-game-on-an-html5-canvas/ -->
diff --git a/Games/Pathways/script.js b/Games/Pathways/script.js
@@ -0,0 +1,251 @@
+let images = [
+  {
+    src: "./assets/small.gif",
+    size: 260,
+    collisionLT: 24,
+    collisionRB: 225,
+    startY: 110,
+    startX: 25,
+    win: {
+      x: 45,
+      y: 225,
+    },
+  },
+  {
+    src: "./assets/normal.gif",
+    size: 348,
+    collisionLT: 24,
+    collisionRB: 310,
+    startY: 114,
+    startX: 25,
+    win: {
+      x: 310,
+      y: 204,
+    },
+  },
+  {
+    src: "./assets/medium.gif",
+    size: 436,
+    collisionLT: 24,
+    collisionRB: 402,
+    startY: 25,
+    startX: 332,
+    win: {
+      x: 402,
+      y: 180,
+    },
+  },
+  {
+    src: "./assets/large.gif",
+    size: 503,
+    collisionLT: 24,
+    collisionRB: 470,
+    startY: 465,
+    startX: 112,
+    win: {
+      x: 132,
+      y: 470,
+    },
+  },
+  {
+    src: "./assets/huge.gif",
+    size: 570,
+    collisionLT: 24,
+    collisionRB: 530,
+    startY: 530,
+    startX: 311,
+    win: {
+      x: 201,
+      y: 25,
+    },
+  },
+];
+
+var score = [];
+
+var canvas;
+var ctx;
+var dx = 5;
+var dy = 5;
+var x = images[0].startX;
+var y = images[0].startY;
+var WIDTH = 2600;
+var HEIGHT = 2600;
+var img = new Image();
+var collision = 0;
+var level = 1;
+
+var clock = 0;
+
+function rect(x, y, w, h) {
+  ctx.beginPath();
+  ctx.rect(x, y, w, h);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function clear() {
+  ctx.clearRect(0, 0, WIDTH, HEIGHT);
+  ctx.drawImage(img, 0, 0);
+}
+
+function reset() {
+  totalSeconds = -1;
+  score = [];
+
+  canvas;
+  ctx;
+  dx = 5;
+  dy = 5;
+  x = images[0].startX;
+  y = images[0].startY;
+  WIDTH = 2600;
+  HEIGHT = 2600;
+  img = new Image();
+  collision = 0;
+  level = 1;
+
+  clock = 0;
+
+  document.getElementById("canvasRow").classList.remove("hide");
+  document.getElementById("totalDisplay").innerHTML = "";
+  const timerDiv = document.getElementById("timerDivHide");
+  timerDiv.classList.remove("hide");
+}
+
+function init() {
+  reset();
+  startTimer();
+  canvas = document.getElementById("canvas");
+  ctx = canvas.getContext("2d");
+  img.src = images[0].src;
+  ctx.canvas.width = images[0].size;
+  ctx.canvas.height = images[0].size;
+  return setInterval(draw, 10);
+}
+
+function nextLevel(index) {
+  x = images[index].startX;
+  y = images[index].startY;
+  canvas = document.getElementById("canvas");
+  ctx = canvas.getContext("2d");
+  img.src = images[index].src;
+  ctx.canvas.width = images[index].size;
+  ctx.canvas.height = images[index].size;
+  const time = totalSeconds;
+  score.push(time);
+  var totalDisplay = document.getElementById("totalDisplay");
+  totalDisplay.innerHTML += `<span id="levelTitle">Level ${index}<span> - <span id="timeTook">Time taken = ${time}<br />`;
+  totalSeconds = -1;
+  return setInterval(draw, 10);
+}
+
+function doKeyDown(evt) {
+  switch (evt.keyCode) {
+    case 87 /* Up arrow was pressed */:
+      if (y - dy > 0) {
+        y -= dy;
+        clear();
+        checkcollision();
+        if (collision == 1) {
+          y += dy;
+          collision = 0;
+        }
+      }
+
+      break;
+    case 83 /* Down arrow was pressed */:
+      if (y + dy < HEIGHT) {
+        y += dy;
+        clear();
+        checkcollision();
+        if (collision == 1) {
+          y -= dy;
+          collision = 0;
+        }
+      }
+
+      break;
+    case 65 /* Left arrow was pressed */:
+      if (x - dx > 0) {
+        x -= dx;
+        clear();
+        checkcollision();
+        if (collision == 1) {
+          x += dx;
+          collision = 0;
+        }
+      }
+      break;
+    case 68 /* Right arrow was pressed */:
+      if (x + dx < WIDTH) {
+        x += dx;
+        clear();
+        checkcollision();
+        if (collision == 1) {
+          x -= dx;
+          collision = 0;
+        }
+      }
+      break;
+  }
+}
+
+function checkcollision() {
+  var imgd = ctx.getImageData(x, y, 15, 15);
+  var pix = imgd.data;
+  for (var i = 0; (n = pix.length), i < n; i += 4) {
+    if (pix[i] == 0) {
+      collision = 1;
+    }
+  }
+
+  var index = level - 1;
+  console.log(index);
+  console.log(x, y, images[index].win.x, images[index].win.y);
+
+  if (x < images[index].collisionLT) {
+    collision = 1;
+  } else if (y < images[index].collisionLT) {
+    collision = 1;
+  } else if (x > images[index].collisionRB) {
+    collision = 1;
+  } else if (y > images[index].collisionRB) {
+    collision = 1;
+  } else if (x == images[index].win.x && y == images[index].win.y) {
+    if (index + 1 >= images.length) {
+      document.getElementById("canvasRow").classList.add("hide");
+      document.getElementById("timerDivHide").classList.add("hide");
+      var totalDisplay = document.getElementById("totalDisplay");
+      score.push(totalSeconds);
+      let total = 0;
+      score.forEach((element) => {
+        total += element;
+      });
+      totalDisplay.innerHTML += `<span id="levelTitle">Final Level<span> - <span id="timeTook">Time taken = ${totalSeconds}`;
+      totalDisplay.innerHTML += `<br><span style="color: #009196">Total Time Taken to complete all the maze is </span><span style="color: red">${total}</span>`;
+      totalDisplay.innerHTML += `<br>Can you do better? <button type="button" class="btn btn-primary" onclick="init()">Restart the game</button>`;
+    } else {
+      level++;
+      document.getElementById("level").innerHTML = level;
+      nextLevel(index + 1);
+    }
+  }
+}
+
+function draw() {
+  clear();
+  ctx.strokeStyle = "#09f";
+  ctx.fillStyle = "rgba(225, 0, 0, 0.5)";
+  rect(x, y, 15, 15);
+}
+
+function startTheGame() {
+  var name = prompt("Please enter your name");
+  document.getElementById("name").innerHTML = name;
+  document.getElementById("gameInfo").classList.add("hide");
+  document.getElementById("btnStart").classList.add("hide");
+  init();
+  document.getElementById("canvasRow").classList.remove("hide");
+  window.addEventListener("keydown", doKeyDown, true);
+}