project 1

README.md

@@ -1,64 +1,215 @@
-# Project Name (Start editing here)
-<!---
-Read Me Contents
--->
+# Star Power !
+
+# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: Star Power !
 
-# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game
 
 ### Overview
 
-Let's start out with something fun - **a game!**
 
-Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build.
 
-**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got!
+![star girl](/assets/images/PinkStarGirl.gif "star girl")
+
+Simple side scroller game
+
+It's that time of the year again, special **Stars** are falling through the skies. littering precious stars of sorts over the lands. Collect these special stars to auction them off at the upcoming **MEGA STAR BAZZAR**. The more stars collected, the more gold can be gained. Think about the children at the orphanage.
 
+**Player** will be moving across screen collecting stars fallen from the sky, each star has a different score. Collect as much stars as humanly possible to earn points! But watch out for the pesky **7 month cat ghost**, they are here to steal your stars away, they can't resist shiny stuff.
+
+**TL;DR** Collect stars and avoid cat ghost.
+
+Play it here !!!
+https://sillyadventures.github.io/project-1/
 
 ---
 
-### Technical Requirements
+---
 
-Your app must:
+### Technical Codes
+```
+
+                        ."      _.---_
+                       / |     /___--"     
+                       |/           
+           __--=======-+"..-..
+         //           /\  "-__\
+       //  __         \/
+     //   //\\        
+_-==//==-.|| || _---_    .     -      .-==-.   .-._
+./   //     ||// //   \\   ||   | \    //    || //   \\
+  //     .||  ||     |\./\\  /|^\\  ||-===-" //     ||
+ //        \=//\=___=//^  \\//   \-/ \\=...="/       \==-.
+//                 
+.
+```
+
+###### Codes:
+
+* **Flower**
+
+Here I created a constructor with the purpose to create flowers of different properties. Each time a flower is create, it will have a particular set of properties that is unique to one of the 5 classes created. In here I use (this) to bind the values needed to each flower created at the interval.
+
+* **fall**
+
+```
+fall () {
+  var position = this.element.position()
+  this.element.css('top', position.top + this.speed)
+  if (position.top > '600') {
+    this.element.remove()
+  }
+}
+```
+Here I am making the fall effect, coming from the top of the game screen, then removing them when they hit a certain height. This will stop them from falling all the way down the page.
+
+* **leaderBoard**
+
+```
+var highScoreArr = JSON.parse(localStorage.getItem('HighScore'))
+  highScoreArr.sort((a, b) => b - a)
+var storage = window.localStorage
+```
+Creating a localstorage to hold highscores. scores in the array are taken out as a string, JSON.parse will change it to an object. Then only can the sorting from High to low scores be done.
+```
+if (!highScoreArr.includes(score)) {
+  highScoreArr.push(score)
+  localStorage.setItem('HighScore', JSON.stringify(highScoreArr))
+  ```
+If highScoreArr does !NOT is the same as in the array, it will be pushed into it.
+Using JSON.stringify to make highScoreArr a string so it can be stored in the local storage. local storage does not accept objects, just strings.
+
+  ```
+  $highscore.text(`HighScore: ${highScoreArr[0]}
+                   HighScore: ${highScoreArr[1]}
+                   HighScore: ${highScoreArr[2]}`)
+```
+Scores are updated each time the game is played, showing only index[0,1,2] means only the top 3 scores will be shown.
+
+* **startGame() & gameOver()**
+
+```
+$startbtn.one('click', () => {
+  $clickme.css('display', 'none')
+  create = setInterval(createFlower, 50)
+  $timer = $('.timer')
+  timerInt = setInterval(() => {
+    timer = timer - 1
+    $timer.text('Time: ' + timer)
+    if (timer <= 0) {
+      gameOver()
+    }
+  }, 1000)
+})
+```
+Start button to start the game, when clicked, start screen is removed, timer begins at 30seconds, the interval for creating flowers begins. at each second interval, timer reduces by 1, and gameOver() is called.
+
+```
+$allFlowers.remove()
+clearInterval(create)
+clearInterval(find)
+clearInterval(timerInt)
+
+$gameStart.css('display', 'block')
+$highscore.css('display', 'block')
+$gameOverScreen.text(`Score: ${score}`)
+$highscore.text(`HighScore: ${highScoreArr[0]}
+                 HighScore: ${highScoreArr[1]}
+                 HighScore: ${highScoreArr[2]}`)
+
+$('.playerOne').css('backgroundImage', 'url(./assets/images/superPink2.gif)')
+```
+When gameOver() is called, game will clear all intervals, not allowing timer and flowers to fall. It will change background and show the top 3 highscores.
+
+* **detech()**
+
+```
+function detect () {
+  var $playerOne = $('.playerOne')
+  var $playerPos = $playerOne.position()
+  var $score = $('.score')
+
+  for (var key in flowerList) {
+    var $flower = flowerList[key].element
+    var $flowerPos = $flower.position()
+
+    if ($playerPos.left <= $flowerPos.left + $flower.width() &&
+    $playerPos.left + $playerOne.width() >= $flowerPos.left &&
+    $playerPos.top <= $flowerPos.top + $flower.height()) {
+      var indiFlower = flowerList.splice(key, 1)
+
+      score += indiFlower[0].points
+      timer += indiFlower[0].sec
+      $score.text(`Score: ${score}`)
+
+      indiFlower[0].element.remove()
+    }
+  }
+}
+```
+
+Getting the positions for both player and the flowers(stars).
+var $flower = flowerList[key].element, means the the exact star in the array of flowers on screen that touches the player. That flower is then spliced into a new array indiFlower[], score and time is taken from it, and is removed from the array. the removal of it makes sure that when the calculation of score happens, it does not key in multiple score & time.
 
-* **Render a game in the browser**
-* **Any number of players** will be okay, switch turns will be great 
-* **Design logic for winning** & **visually display which player won**
-* **Include separate HTML / CSS / JavaScript files**
-* Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles
-* Use **Javascript** for **DOM manipulation**, jQuery is not compulsory
-* **Deploy your game online**, where the rest of the world can access it
-* Use **semantic markup** for HTML and CSS (adhere to best practices)
-* **No canvas** project will be accepted, only HTML5 + CSS3 + JS please
+---
 
 ---
+### TimeFlow
+
+* Day 1
+
+1. Able to make it rain randomly all over the map.
+2. flowers are removed just before bottom line, does not go all the way down.
+3. Make create player at start of game
+4. Player move left and right.
+5. Player does not leave game screen area.
 
-### Necessary Deliverables
+* Day 2
 
-* A **working game, built by you**, hosted somewhere on the internet
-* A **link to your hosted working game** in the URL section of your GitHub repo
-* A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project
-* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.
+1. Did collision, player and flower able to detect each other.
+2. collision able to give the correct values, but multiple times.
+3. collision able to give correct values once, and removed from game.
+4. added "time" value, "speed" value, different images to the stars.
+5. made gameover functiom
+6. started on CSS for the game.
+
+* Day 3
+
+1. added restart function.
+2. added more aesthetics to game.
+3. added highscore function .
+4. added leaderboard function.
+---
 
 ---
 
-### Suggested Ways to Get Started
+### Gameplay Flowchart
+![flowchart](https://raw.githubusercontent.com/sillyadventures/project-1/master/assets/images/flowchart.png "flow chart")
 
-* **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards!
-* **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems
-* Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_.
-* **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version.
-* **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into.
-* **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then.
+![gameplay](https://raw.githubusercontent.com/sillyadventures/project-1/master/assets/images/gameplay.png "gamplay")
+
+![legend](https://raw.githubusercontent.com/sillyadventures/project-1/master/assets/images/legend.png "legend")
+
+---
 
 ---
 
-### Potential Project Ideas
+### Potential Advancements
+
+##### Player 2 option
+Create a Player 2 option for friends to join in the fun!
+
+Hit box collision for both players, able to push or stun the other one away, a Jump ability.
+
+##### Different level layouts & player avatar
+Create different levels with obstacles.
 
-##### Blackjack
-Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next!
+Have different avatars for players to choose from.
 
-##### Self-scoring Trivia
-Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are!
+##### animations
+Create original sprites of game.
+
+Introduce hit animations, gaining star animations and sound.
+
+---
 
 ---
 
@@ -67,8 +218,11 @@ Test your wits & knowledge with whatever-the-heck you know about (so you can act
 * **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_
 * **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_
 * **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_
-* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ 
+* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_
 * **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_
+# Powered By : [![N|GitHub](https://cdn1.iconfinder.com/data/icons/logotypes/32/github-128.png "Git Hub")](https://github.com/)
+
+---
 
 ---