diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..1f2aa6e Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 868d928..d0ce042 100644 --- a/README.md +++ b/README.md @@ -1 +1,25 @@ -# Sparta_Global_Game \ No newline at end of file +# 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 new file mode 100644 index 0000000..ffdc74a --- /dev/null +++ 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 new file mode 100644 index 0000000..0ff072e Binary files /dev/null and b/images/applause.mp3 differ diff --git a/images/congrats.jpg b/images/congrats.jpg new file mode 100644 index 0000000..3574171 Binary files /dev/null and b/images/congrats.jpg differ diff --git a/images/goat.jpg b/images/goat.jpg new file mode 100644 index 0000000..5237708 Binary files /dev/null and b/images/goat.jpg differ diff --git a/images/goat.mp3 b/images/goat.mp3 new file mode 100644 index 0000000..61867bf Binary files /dev/null and b/images/goat.mp3 differ diff --git a/images/index.js b/images/index.js new file mode 100644 index 0000000..04abfac --- /dev/null +++ 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 new file mode 100644 index 0000000..a9f0aa7 Binary files /dev/null and b/images/losing.mp3 differ diff --git a/images/tiger.jpg b/images/tiger.jpg new file mode 100644 index 0000000..4b6c514 Binary files /dev/null and b/images/tiger.jpg differ diff --git a/images/tiger.mp3 b/images/tiger.mp3 new file mode 100644 index 0000000..22281cc Binary files /dev/null and b/images/tiger.mp3 differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..587870e --- /dev/null +++ b/index.html @@ -0,0 +1,154 @@ + + + + + + + + + + Game + + + +
+

SaveTheGoats

+
+
+
+ +
+
+ +
+
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+ + Go to Level1 +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ Goats 21 +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ life
4 +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + +
+ + + + + + + diff --git a/index1.html b/index1.html new file mode 100644 index 0000000..fe6ef2d --- /dev/null +++ b/index1.html @@ -0,0 +1,169 @@ + + + + + + + + + + + Game + + + +
+

SaveTheGoats

+
+ +
+
+ +
+
+ +
+
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + Go to Level2 +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ Goats 19 +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ life
4 +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + +
+ +
+ + + + + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..5866ac8 --- /dev/null +++ b/js/index.js @@ -0,0 +1,118 @@ +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'); +var lose = document.getElementById('lose'); +var win = document.getElementById('win'); + +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); + } + if (life === 0) { + losingmsg(); + return; + } + }); +} + +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; + } + if (life !== 0) { + winCondition(); + } + }); +} + +function winCondition() { + if (countGoats == 0 && life == 4) { + winningmsg(); + } else if (countGoats == 0 && life == 3) { + winningmsg(); + } else if (countGoats == 0 && life == 2) { + winningmsg(); + } else if (countGoats == 0 && life == 1) { + winningmsg(); + } +} + +function losingmsg() { + lose.play(); + swal({ + title: 'You lost', + }); +} + +function winningmsg(){ + win.play(); + swal("Congratulations!", "You won!", "success", { + button: "Aww yiss!", + }); +} + +function resetBoard() { + location.reload(); +} diff --git a/js/index1.js b/js/index1.js new file mode 100644 index 0000000..cbd6103 --- /dev/null +++ b/js/index1.js @@ -0,0 +1,118 @@ +var countGoats = 19; +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'); +var lose = document.getElementById('lose'); +var win = document.getElementById('win'); + +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 == 4 || i == 10 || i == 17 || i == 24) { + tiger(); + i++; + } + if (i < 30) { + 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); + } + if (life === 0) { + losingmsg(); + return; + } + }); +} + +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; + } + if (life !== 0) { + winCondition(); + } + }); +} + +function winCondition() { + if (countGoats == 0 && life == 4) { + winningmsg(); + } else if (countGoats == 0 && life == 3) { + winningmsg(); + } else if (countGoats == 0 && life == 2) { + winningmsg(); + } else if (countGoats == 0 && life == 1) { + winningmsg(); + } +} + +function losingmsg() { + lose.play(); + swal({ + title: 'You lost', + }); +} + +function winningmsg() { + win.play(); + swal("Congratulations!", "You won!", "success", { + button: "Aww yiss!", + }); +} + + +function resetBoard() { + location.reload(); +}