knepali · knepali · Aug 30, 2018 · Jun 19, 2018 · Jun 19, 2018 · Jun 19, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,25 @@
-# Sparta_Global_Game
+# SaveTheGoats
+
+# Purpose
+* This is a sample HTML5/JS/CSS game developed with JavaScript.
+* Markup has been styled to be responsive, according to the device used to view the app.
+* It is intended as a demonstration of technical capabilities rather than design or helpful data.
+* It is still in working progress.
+
+# Functionality
+* This is a simple board game, has two levels regarding difficulty of game.
+* It has grids, sound effects on each click, button for instructions on how to play.
+* Alerts winning or losing messages.
+
+# Rule
+
+ * Characters: Tigers and Goats.
+ * Tigers are already present on board but invisible.
+ * Place the goats on grid one by one.
+ * Avoid tigers to win.
+
+# Implementation
+
+* Bootstrap 3
+* JavaScript
+* CSS
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,116 @@
+body{
+  font-family: 'Raleway';
+}
+#heading{
+  text-shadow: 3px 2px blue;
+  font-size: 50px;
+}
+.box{
+  border-style: solid;
+  border-color: black;
+  height:100px;
+  background-color: white;
+}
+#tigerImage{
+  width:80%;
+  display:none;
+  /* visibility: hidden; */
+}
+#goatImage{
+  width:50%;
+}
+
+/* .image{
+  text-align: center;
+  /* display:none; */
+
+
+#result{
+  text-align: center;
+}
+
+#reset{
+  width:50%;
+  font-size:25px;
+}
+#level{
+  width:100%;
+  font-size:20px;
+}
+#instruction{
+  width:50%;
+  font-size:25px;
+}
+.resetbtn{
+  margin-bottom:10px;
+}
+
+#life{
+  background-color: red;
+  margin-left:10px;
+  font-size:20px;
+  height:100px;
+}
+#goatsOnBoard{
+  background-color: blue;
+  margin-left:10px;
+  font-size:20px;
+  height:100px;
+}
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    margin:0 auto;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+    padding-top:100px;
+}
+.modal-content{
+  text-align: center;
+  position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 30%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s;
+}
+.modal-header {
+    padding: 2px 16px;
+    background-color: #5cb85c;
+    color: white;
+}
+
+.modal-body {
+  padding: 2px 16px;
+}
+
+.modal-footer {
+    padding: 2px 16px;
+    background-color: #5cb85c;
+    color: white;
+}
+/* The Close Button */
+.close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
diff --git a/images/applause.mp3 b/images/applause.mp3
diff --git a/images/congrats.jpg b/images/congrats.jpg
diff --git a/images/goat.jpg b/images/goat.jpg
diff --git a/images/goat.mp3 b/images/goat.mp3
diff --git a/images/index.js b/images/index.js
@@ -0,0 +1,125 @@
+var countGoats = 21;
+var leftGoat = document.getElementById('goatsOnBoard');
+var life = 4;
+var lifeLeft = document.getElementById('life');
+//var win = document.getElementById('win');//winning condition that inputs in html
+var result = document.getElementById('result');
+var box = document.getElementsByClassName('box'); //gets classname of grids
+var reset = document.getElementById('reset');
+var modal = document.getElementById('mymodal');
+var instruction = document.getElementById('instruction');
+var close = document.getElementsByClassName('close');
+var goatSound = document.getElementById('goatSound');
+var tigerSound = document.getElementById('tigerSound');
+
+instruction.addEventListener('click', function() {
+  modal.style.display = "block";
+});
+
+close[0].addEventListener('click', function() {
+  modal.style.display = "none";
+});
+
+window.addEventListener('click', function(event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+});
+
+reset.addEventListener('click', function() {
+  resetBoard();
+})
+
+for (var i = 0; i < box.length; i++) {
+  if (i == 1 || i == 5 || i == 10 || i == 14) {
+    tiger();
+    i++;
+  }
+  if (i < 25) {
+    goat();
+  }
+}
+
+function tiger() {
+  box[i].addEventListener('click', function(event) {
+    tigerSound.play();
+    var clear = this.getAttribute('clear');
+    console.log(clear);
+    if (clear === 'empty') {
+      var img = document.createElement("img");
+      img.src = "images/tiger.jpg";
+      this.appendChild(img);
+      img.style.width = '60%';
+      img.style.textAlign = "center";
+      this.setAttribute('clear', 'occupied');
+      console.log(clear);
+      life--;
+      lifeLeft.innerHTML = "life left ::" + life;
+      console.log("life on board : " + life);
+
+    }
+  });
+}
+
+function goat() {
+
+  box[i].addEventListener('click', function(e) {
+    goatSound.play();
+    var clear = this.getAttribute('clear');
+    if (clear === 'empty') {
+      var img = document.createElement("img");
+      img.src = "images/goat.jpg";
+      this.appendChild(img);
+      img.style.width = '60%';
+      this.setAttribute('clear', 'occupied');
+      console.log(clear);
+      countGoats--;
+      leftGoat.innerHTML = "Goats left :: " + countGoats;
+
+    }
+    winCondition();
+    //sound('click');
+  });
+}
+
+function winCondition() {
+  if (countGoats == 0 && life == 4) {
+    //result.innerHTML = "You won";
+    //alert("you won");
+    swal("Congratulations!", "You won!", "success", {
+      button: "Aww yiss!",
+    });
+
+  } else if (countGoats == 0 && life == 3) {
+    //result.innerHTML = "You are so close to winning";
+    //alert("You won");
+    swal("Congratulations!", "You won!", "success", {
+      button: "Aww yiss!",
+    });
+
+  } else if (countGoats == 0 && life == 2) {
+    //result.innerHTML = "You could do better!!";
+    //alert("You won");
+    swal("Congratulations!", "You won!", "success", {
+      button: "Aww yiss!",
+    });
+
+    //this.removeEventListener('click',tiger);
+  } else if (countGoats == 0 && life == 1) {
+    //result.innerHTML = "Not good!!!";
+    //alert("You won");
+    swal("Congratulations!", "You won!", "success", {
+      button: "Aww yiss!",
+    });
+
+  } else if (life == 0) {
+    //result.innerHTML = " You lost!!!";
+    swal("Sorry", "You Lost!", "warning", {
+      button: "Noez!",
+    });
+  }
+}
+
+function resetBoard() {
+  location.reload();
+}
diff --git a/images/losing.mp3 b/images/losing.mp3
diff --git a/images/tiger.jpg b/images/tiger.jpg
diff --git a/images/tiger.mp3 b/images/tiger.mp3