Merge pull request #4739 from DiwareNamrata23/feature-4737

Added Align 4 Game
kunjgit · Jul 9, 2024 · 86555a9 · 86555a9
2 parents b48df6c + 1249c3b
commit 86555a9
Show file tree

Hide file tree

Showing 9 changed files with 1,060 additions and 0 deletions.
diff --git a/Games/Align_4_Game/Readme.md b/Games/Align_4_Game/Readme.md
@@ -0,0 +1,30 @@
+# **ALIEN_SHOOTERS**
+
+---
+
+<br>
+
+## **Description 📃** 
+- The logic of the game is basically there is computer and player so we are the player the main task of the player is to stop computer to align 4 balls horizontally or vertically or zigzagcally straight order.
+
+
+## **functionalities 🎮** 
+- Easy to play
+- Scoring system so that you can compare points with computer.
+- Responsive design for most of the monitors.
+<br>
+
+## **How to play? 🕹️**
+- Start the game by clicking on start and then press the grid.
+- Your aim is to stop the computer to making or aligning 4 balls in a line . 
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![Game image](../../assets/images/Align_4_Game.png)
+
+<br>
+
+
diff --git a/Games/Align_4_Game/index.html b/Games/Align_4_Game/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <!--  Meta  -->
+  <meta charset="UTF-8" />
+  <title>Align 4 Game</title>
+
+  <!--  Styles  -->
+  <link href="https://fonts.googleapis.com/css?family=Doppio+One" rel="stylesheet">
+  <link rel="stylesheet" href="styles/index.processed.css">
+</head>
+<body>
+  <div class="wrapper">
+    <div class="content">
+      <div class="sidebar">
+        <h1>Align 4</h1>
+        <div class="panel dif">
+          <h2>Difficulty</h2>
+          <div class="dif-options">
+            <div>
+              <input id="dif1" type="radio" name="dif-options" value="1">
+              <label for="dif1">1</label>
+            </div>
+            <div>
+              <input id="dif2" type="radio" name="dif-options" value="2">
+              <label for="dif2">2</label>
+            </div>
+            <div>
+              <input id="dif3" type="radio" name="dif-options" value="3" checked>
+              <label for="dif3">3</label>
+            </div>
+            <div>
+              <input id="dif4" type="radio" name="dif-options" value="4">
+              <label for="dif4">4</label>
+            </div>
+            <div>
+              <input id="dif5" type="radio" name="dif-options" value="5">
+              <label for="dif5">5</label>
+            </div>
+          </div>
+          <div class="start">
+            <button>Start Game</button>
+          </div>
+        </div>
+        <div class="panel info">
+          <h2></h2>
+          <div class="blurb"></div>
+          <div class="outlook"></div>
+        </div>
+      </div>
+      <div class="board">
+        <div class="lit-columns">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+        <div class="lit-cells"></div>
+        <div class="chips"></div>
+        <div class="click-columns">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Scripts -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <script src="scripts/index.js"></script>
+</body>
+</html>
diff --git a/Games/Align_4_Game/scripts/index.js b/Games/Align_4_Game/scripts/index.js
@@ -0,0 +1,253 @@
+// constants
+const WEB_WORKER_URL = 'scripts/worker.js';
+const BLURBS = {
+  'start': {
+    header: 'Get Ready',
+    blurb: 'Select your difficulty and start the game.'
+  },
+  'p1-turn': {
+    header: 'Your Turn',
+    blurb: 'Click on the board to drop your chip.'
+  },
+  'p2-turn': {
+    header: 'Computer\'s Turn',
+    blurb: 'The computer is trying to find the best way to make you lose.'
+  },
+  'p1-win': {
+    header: 'You Win',
+    blurb: 'You are a winner. Remember this moment. Carry it with you, forever.'
+  },
+  'p2-win': {
+    header: 'Computer Wins',
+    blurb: 'Try again when you\'re done wiping your tears of shame.'
+  },
+  'tie': {
+    header: 'Tie',
+    blurb: 'Everyone\'s a winner! Or loser. Depends on how you look at it.'
+  }
+};
+const OUTLOOKS = {
+  'win-imminent': 'Uh oh, computer is feeling saucy!',
+  'loss-imminent': 'Computer is unsure. Now\'s your chance!'
+};
+
+// global variables
+var worker;
+var currentGameState;
+
+// document ready
+$(function() {
+  $('.start button').on('click', startGame);
+  setBlurb('start');
+  setOutlook();
+
+  // create worker
+  worker = new Worker(WEB_WORKER_URL);
+  worker.addEventListener('message', function(e) {
+    switch(e.data.messageType) {
+      case 'reset-done':
+        startHumanTurn();
+        break;
+      case 'human-move-done':
+        endHumanTurn(e.data.coords, e.data.isWin, e.data.winningChips, e.data.isBoardFull);
+        break;
+      case 'progress':
+        updateComputerTurn(e.data.col);
+        break;
+      case 'computer-move-done':
+        endComputerTurn(e.data.coords, e.data.isWin, e.data.winningChips, e.data.isBoardFull,
+          e.data.isWinImminent, e.data.isLossImminent);
+        break;
+    }
+  }, false);
+});
+
+function setBlurb(key) {
+  $('.info h2').text(BLURBS[key].header);
+  $('.info .blurb').text(BLURBS[key].blurb);
+}
+
+function setOutlook(key) {
+  var $outlook = $('.info .outlook');
+  if(key) {
+    $outlook
+      .text(OUTLOOKS[key])
+      .show();
+  } else {
+    $outlook.hide();
+  }
+}
+
+function startGame() {
+  $('.dif').addClass('freeze');
+  $('.dif input').prop('disabled', true);
+  $('.lit-cells, .chips').empty();
+
+  worker.postMessage({
+    messageType: 'reset',
+  });
+}
+
+function startHumanTurn() {
+  setBlurb('p1-turn');
+  $('.click-columns div').addClass('hover');
+
+  // if mouse is already over a column, show cursor chip there
+  var col = $('.click-columns div:hover').index();
+  if(col !== -1) {
+    createCursorChip(1, col);
+  }
+
+  $('.click-columns')
+    .on('mouseenter', function() {
+      var col = $('.click-columns div:hover').index();
+      createCursorChip(1, col);
+    })
+    .on('mouseleave', function() {
+      destroyCursorChip();
+    });
+
+  $('.click-columns div')
+    .on('mouseenter', function() {
+      var col = $(this).index();
+      moveCursorChip(col);
+    })
+    .on('click', function() {
+      $('.click-columns, .click-columns div').off();
+
+      var col = $(this).index();
+      worker.postMessage({
+        messageType: 'human-move',
+        col: col
+      });
+    });  
+}
+
+function endHumanTurn(coords, isWin, winningChips, isBoardFull) {
+  $('.click-columns div').removeClass('hover');
+  if(!coords) {
+    // column was full, human goes again
+    startHumanTurn();    
+  } else {
+    dropCursorChip(coords.row, function() {
+      if(isWin) {
+        endGame('p1-win', winningChips);
+      } else if(isBoardFull) {
+        endGame('tie');
+      } else {
+        // pass turn to computer
+        startComputerTurn();
+      }
+    });
+  }
+}
+
+function startComputerTurn() {
+  setBlurb('p2-turn');
+
+  // computer's cursor chip starts far left and moves right as it thinks
+  createCursorChip(2, 0);
+
+  var maxDepth = parseInt($('input[name=dif-options]:checked').val(), 10) + 1;
+  worker.postMessage({
+    messageType: 'computer-move',
+    maxDepth: maxDepth
+  });
+}
+
+function updateComputerTurn(col) {
+  moveCursorChip(col);
+}
+
+function endComputerTurn(coords, isWin, winningChips, isBoardFull, isWinImminent, isLossImminent) {
+  moveCursorChip(coords.col, function() {
+    dropCursorChip(coords.row, function() {
+      if (isWin) {
+        endGame('p2-win', winningChips);
+      } else if (isBoardFull) {
+        endGame('tie');
+      } else {
+        if(isWinImminent) {
+          setOutlook('win-imminent');
+        } else if (isLossImminent) {
+          setOutlook('loss-imminent');
+        } else {
+          setOutlook();
+        }
+
+        // pass turn to human
+        startHumanTurn();
+      }
+    });
+  });
+}
+
+function endGame(blurbKey, winningChips) {
+  $('.dif').removeClass('freeze');
+  $('.dif input').prop('disabled', false);
+  setBlurb(blurbKey);
+  setOutlook();
+
+  if(winningChips) {
+    // not a tie, highlight the chips in the winning run
+    for(var i = 0; i < winningChips.length; i++) {
+      createLitCell(winningChips[i].col, winningChips[i].row);
+    }
+  }
+}
+
+function createLitCell(col, row) {
+  $('<div>')
+  .css({
+    'left': indexToPixels(col),
+    'bottom': indexToPixels(row)
+  })
+  .appendTo('.lit-cells');
+}
+
+function createCursorChip(player, col) {
+  var playerClass = 'p' + player;
+  $('<div>', { 'class': 'cursor ' + playerClass })
+    .css('left', indexToPixels(col))
+    .appendTo('.chips');
+
+  // also highlight column
+  $('.lit-columns div').eq(col).addClass('lit');
+}
+
+function destroyCursorChip() {
+  $('.chips .cursor').remove();
+  $('.lit-columns .lit').removeClass('lit');
+}
+
+function moveCursorChip(col, callback) {
+  $('.chips .cursor').css('left', indexToPixels(col));
+  $('.lit-columns .lit').removeClass('lit');
+  $('.lit-columns div').eq(col).addClass('lit');
+
+  // callback is only used when the computer is about to drop a chip
+  // give it a slight delay for visual interest
+  setTimeout(callback, 300);
+}
+
+function dropCursorChip(row, callback) {
+  // speed of animation depends on how far the chip has to drop
+  var ms = (7 - row) * 40;
+  var duration = (ms / 1000) + 's';
+
+  $('.chips .cursor')
+    .removeClass('cursor')
+    .css({
+      'bottom': indexToPixels(row),
+      'transition-duration': duration,
+      'animation-delay': duration
+    })
+    .addClass('dropped');
+
+  $('.lit-columns .lit').removeClass('lit');
+  setTimeout(callback, ms);
+}
+
+function indexToPixels(index) {
+  return (index * 61 + 1) + 'px';
+}