laviii123 · shrivardha · Oct 25, 2023 · Oct 25, 2023 · Oct 25, 2023
diff --git a/Hangman/Hangman_Desc b/Hangman/Hangman_Desc
@@ -0,0 +1,2 @@
+This game urges to guess a word with certain number of wrong guesses allowed after which the player gets hanged. 
+Hints are also provided with good graphics.
diff --git a/Hangman/index.html b/Hangman/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hangman</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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <script src="main.js" defer></script>
+</head>
+<body >
+    <div class="text_only">
+        <h1 class="txt1"><strong>Hangman</strong> <br></h1>
+         <h3 class="txt2" style="color:rgb(254, 251, 251) ;">Guess the right word or get Hanged !</h3>
+
+         <ol style="margin-left: 20px;"><h3 style="color: whitesmoke;">Instructions: <br></h3>
+             <li >You need to guess a word rightly to win the game</li>
+             <li>You will be given a clue pertaining the word</li>
+             <li >To guess the word, proceed with each alphabet at a time</li>
+             <li>Select an alphabet from the list of alphabets and the alphabet will get filled automaticaly at all its places if the alphabet exists. </li>
+             <li>You can guess incorrectly for maximum 10 times.</li>
+         </ol>
+         <h1>Choose difficulty level: </h1>
+         <button type="button" class="btn btn-success" id="easy">Hard</button>
+         <button type="button" class="btn btn-info" id="hard">Easy</button>
+
+         <h1 style="color: white; font-family: Arial, Helvetica, sans-serif; margin: 50px;">Use the alphabets below<br></h1>
+    </div>
+    <div id="buttons" style="margin: 10px; background-color: blueviolet;" >
+        <br> 
+
+
+</div>
+
+<h1>Clue :<br></h1>
+<p id="clue"></p>
+<p id="lives" >Life: 10/5 </p>
+<div id="result"  ></div>
+<div id="play_again" >
+
+    <a class="btn btn-primary" href="javascript:location.reload(true)" role="button" style="margin-left: 50px;" id="again">Play Again</a>
+
+</div>
+<h1 id="reveal"></h1>
+<canvas id="man" style="background-color: antiquewhite; margin: 50px ;">This Text will show if the Browser does NOT support HTML5 Canvas tag</canvas>
+
+
+
+<div>
+    Time Left ::
+    <input id="minutes" type="text" style="width: 10px;
+         border: none; font-size: 16px; 
+        font-weight: bold; color: black;"><font size="5"> :
+                    </font>
+    <input id="seconds" type="text" style="width: 20px;
+                    border: none; font-size: 16px;
+                    font-weight: bold; color: black;">
+</div>
+
+<h1>Scores:</h1>
+<ul class="score">
+</ul>
+</body>
+</html>
diff --git a/Hangman/main.js b/Hangman/main.js
@@ -0,0 +1,297 @@
+const buttons = document.querySelector('#buttons');
+
+let c = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h',
+    'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
+    't', 'u', 'v', 'w', 'x', 'y', 'z'];
+
+let clue_array = ["Holy", "Capital of India", "Financial capital of India", "CEO of Google(1st name)", "King of jungle","In front of you but can't be seen","Gets wet while drying","City which has largest Indian Museum", "Best IIT", "Best Club of IIT BHU" ]
+let result_array = ["pious", "delhi", "mumbai", "sundar", "lion", "future", "towel", "kolkata","bhu", "cops"]
+let entered = []
+let prev_scores=[]
+let g=0;
+
+for (let i = 0; i < 26; i++) {
+    const b1 = document.createElement('button');
+    b1.id = 'b1';
+    b1.style.cssText = "margin: 10px; color:white; background-color:green; padding: 15px;text-align: center; border-radius: 12px;"
+    b1.textContent = c[i];
+    b1.onclick = () => { entered += b1.textContent; b1.disabled = true; b1.style.backgroundColor = 'red'; play(); }
+
+
+    buttons.appendChild(b1);
+
+}
+
+life = 10;
+easy=document.querySelector('#easy')
+hard=document.querySelector('#hard')
+easy.onclick = () => {life=5; alert("START?"); hard.disabled=true; easy.disabled=true; countdown();}
+hard.onclick = () => {life=10;alert("START?"); hard.disabled=true; easy.disabled=true;countdown();}
+lives.textContent="Lives: "+life;
+let idx = Math.floor(Math.random() * clue_array.length);
+let clue = clue_array[idx];
+let ans = result_array[idx];
+result = document.querySelector('#result');
+cluestat = document.querySelector('#clue');
+lives=document.querySelector('#lives');
+score=document.querySelector('.score')
+again=document.querySelector('#again')
+cluestat.textContent = clue + "  : \n\n(" + "Length of the word " +ans.length + ")" 
+final_array = []
+for (let i = 0; i < ans.length; i++) {
+    final_array[i] = '_'; result.textContent += final_array[i];
+}
+
+console.log(ans);
+let prev=0;
+
+
+function play() {if(flag==0)return;
+
+    for (let i = prev; i < entered.length; i++) {
+        let f = 0;
+        for (let j = 0; j < ans.length; j++) {
+
+
+            if (entered[i] == [ans[j]]) {
+                final_array[j] = entered[i]; f = 1;
+                result.textContent = final_array.join(""); console.log(final_array);
+            }
+            let count__=0;
+            for(let k=0;k<final_array.length;k++){if(final_array[k]=='_')count__++;}
+            if(count__==0){(result.textContent+= " YOU WIN!"); 
+
+           document.querySelectorAll('#b1').forEach(elem => {
+            elem.disabled = true;
+        });
+        life=0;
+
+        prev_scores[g++]=1+60-secs;
+        const input= prev_scores[g-1]
+        addTodos(input)
+
+            return;}
+
+        }
+        if (f == 0) { life--; hang(); }
+        if(life==0){  result.textContent="YOU GOT HANGED :("; 
+        document.querySelectorAll('#b1').forEach(elem => {
+            elem.disabled = true;
+        });
+        reveal = document.getElementById('reveal');
+        reveal.textContent="Answer is : "+ ans
+        prev_scores[g++]=0;
+        const input= prev_scores[g-1]
+        addTodos(input)
+        lives.textContent="Lives: "+life;
+return;
+        }
+    }
+prev++;
+if(life!=-1)
+lives.textContent="Lives: "+life;
+}
+
+
+
+
+
+
+
+
+
+
+var hang = function () {
+    var drawMe = life ;
+    drawArray[drawMe]();
+  }
+
+
+   // Hangman
+  canvas =  function(){
+
+    man = document.getElementById("man");
+    context = man.getContext('2d');
+
+    context.beginPath();
+    context.strokeStyle = "#fff";
+    context.lineWidth = 2;
+  };
+
+    start_head = function(){
+      man = document.getElementById("man");
+      context = man.getContext('2d');
+      context.beginPath();
+      context.arc(60, 25, 10, 0, Math.PI*2, true);
+      context.stroke();
+    }
+
+  draw = function($pathFromx, $pathFromy, $pathTox, $pathToy) {
+    man = document.getElementById("man");  
+    context = man.getContext('2d');
+    context.moveTo($pathFromx, $pathFromy);
+    context.lineTo($pathTox, $pathToy);
+    context.stroke(); 
+}
+
+   f1 = function() {
+     draw (0, 150, 150, 150);
+   };
+
+   f2 = function() {
+     draw (10, 0, 10, 600);
+   };
+
+   f3 = function() {
+     draw (0, 5, 70, 5);
+   };
+
+   f4 = function() {
+     draw (60, 5, 60, 15);
+   };
+
+   ribs = function() {
+     draw (60, 36, 60, 70);
+   };
+
+   right_hand = function() {
+     draw (60, 46, 100, 50);
+   };
+
+   left_hand = function() {
+     draw (60, 46, 20, 50);
+   };
+
+   right_leg = function() {
+     draw (60, 70, 100, 100);
+   };
+
+   left_leg = function() {
+     draw (60, 70, 20, 100);
+   };
+
+  drawArray = [right_leg, left_leg, right_hand, left_hand,  ribs,  start_head, f4, f3, f2, f1]; 
+
+
+
+
+
+  var mins = 1;
+
+        //calculate the seconds
+        var secs = mins * 60;
+
+        //countdown function is evoked when page is loaded
+        function countdown() {
+            setTimeout('Decrement()', 60);
+        }
+  let flag=1
+        //Decrement function decrement the value.
+        function Decrement() {
+            if(life==0){flag=0;
+
+        document.querySelectorAll('#b1').forEach(elem => {
+            elem.disabled = true;
+        });
+                return;}
+            if (document.getElementById) {
+                minutes = document.getElementById("minutes");
+                seconds = document.getElementById("seconds");
+
+                //if less than a minute remaining
+                //Display only seconds value.
+                if (seconds < 59) {
+                    seconds.value = secs;
+                }
+
+                //Display both minutes and seconds
+                //getminutes and getseconds is used to
+                //get minutes and seconds
+                else {
+                    minutes.value = getminutes();
+                    seconds.value = getseconds();
+                }
+                //when less than a minute remaining
+                //colour of the minutes and seconds
+                //changes to red
+                if (mins < 1) {
+                    minutes.style.color = "red";
+                    seconds.style.color = "red";
+                }
+                //if seconds becomes zero,
+                //then page alert time up
+                if (mins < 0) {
+                    alert('time up');
+                    minutes.value = 0;
+                    seconds.value = 0;
+                }
+                //if seconds > 0 then seconds is decremented
+                else {
+                    secs--;
+                    setTimeout('Decrement()', 1000);
+                }
+            }
+        }
+
+        function getminutes() {
+            //minutes is seconds divided by 60, rounded down
+            mins = Math.floor(secs / 60);
+            return mins;
+        }
+
+        function getseconds() {
+            //take minutes remaining (as seconds) away 
+            //from total seconds remaining
+            return secs - Math.round(mins * 60);
+        }
+
+
+        const todosUl = document.querySelector('.score')
+
+        // const input = document.querySelector('#add')
+        // const saveBtn = document.querySelector('#save')
+        const getTodos = () => {
+            let todos;
+            if(localStorage.getItem('todos') === null){
+                todos = [];
+            }else {
+                todos = JSON.parse(localStorage.getItem('todos'));
+            }
+            return todos;
+        }
+        const saveTodos = inputData => {
+            const todos = getTodos();
+            todos.push(inputData);
+            localStorage.setItem('todos', JSON.stringify(todos));
+        }
+        const addTodos = (input) => {
+
+
+            let li = document.createElement('li');
+            li.textContent =  input;
+            saveTodos(input);
+            todosUl.appendChild(li);
+            input = '';
+        }
+        const deleteTodos = (todos, e) => {
+            const targetLi = todos.indexOf(e.target.textContent);
+            todos.splice(targetLi, 1);
+            localStorage.setItem('todos', JSON.stringify(todos));
+        }
+
+        // saveBtn.addEventListener('click', addTodos)
+
+window.addEventListener('DOMContentLoaded', () => {
+    const todos = getTodos()
+        //show todos
+    todos.forEach( todo => {
+        let li = document.createElement('li');
+        li.textContent =  todo;
+        todosUl.appendChild(li)
+        //delete todos
+        li.addEventListener('dblclick', e => {
+            deleteTodos(todos, e)
+            todosUl.removeChild(li)
+        })
+    })
+})