On the other side

README.md

@@ -1,96 +1,119 @@
-# Project Name (Start editing here)
+# On The Other Side
 <!---
 Read Me Contents
 -->
 
 # ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game
 
+### Introduction
+[On The Other Side](https://imjustlooking.github.io/project-1/) is a platform puzzle game in which the player guides two balls into their respective 'goals'.
+
+I created this game over a course of 6 days as part of our WDI-12 batch's first project assignment at General Assembly.
+
+This idea came about initially as a backup plan. I was considering if my coding-beginner skills were robust enough to create something more demanding, like a resources-based survival game. The concept felt like a relatively achievable project which I could manage, and, while it was, it was also quite a satisfying run.
 ### Overview
+This game operates in two dimensions which reflect each other in certain ways. You control the ball on the left, and **on the other side**, its ball moves in the opposite direction. Blue moves left, Red moves right.
 
-Let's start out with something fun - **a game!**
+![](/assets/img/ballmovedemo.gif)
 
-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.
+However, the terrain **on the other side** isn't always the same.
 
-**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!
+To pass each level, the player has to move **both balls** into their respective holes.
 
+![](/assets/img/ballGoalDemo.gif)
 
----
+If the balls fall beyond the playing field, they can click the reset button below the panel.
 
-### Technical Requirements
+Upon clearing each level, a button appears and allows the player to proceed after clicking.
 
-Your app must:
+<!-- There is a special skill the player can use, align, which lets both balls move in the same direction for a few seconds. Click 'button' to activate this each level. -->
 
-* **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
+### Basic flow
 
----
+Basic flow chart which outlines the game mechanics
+# ![](/assets/img/ontheothersidev1.jpg)
 
-### Necessary Deliverables
+Tried to do another flow chart below, which was still quite basic, additional features were added subsequently.
+#
+![](/assets/img/flowchart.jpg)
 
-* 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.
 
 ---
+### Thoughts and progress
 
-### Suggested Ways to Get Started
+I did not track my progress rigorously, but had been committing and pushing major changes onto git hub. Here, I look through the update logs, and try to reconcile each day's efforts and (many) frustrations.
 
-* **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.
+Firstly, as far as the game overview is concerned, the game's logic works similarly to my vision (though improvements can always be implemented). However, there was a piece of the initial idea which I had scrapped:
+###### *"There is a special skill the player can use, align, which lets both balls move in the same direction for a few seconds. Click 'button' to activate this each level."*
 
----
+I didn't pursue this eventually due to time restrictions and the tedious nature of my level set-ups.
 
-### Potential Project Ideas
+#### Let's quickly get into the timeline:
 
-##### 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!
+**Day 0, Friday:**
+Idea proposal to instructor Primaulia.
+Scrappy flowchart planning (refer to pictures above), readme writeup of game description, ~~no real~~ zero coding done
 
-##### 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!
+**Day 1, Saturday:**
+Coding begins. Created the playing field, added the balls and movement logic upon user-input keystrokes. Added functions to rectify the ball movement exceeding the border
 
----
+Quite an encouraging start.
 
-### Useful Resources
+**Day 2, Sunday:**
+I remember giving the project lower emphasis after being particularly productive the previous day. I played PUBG, it's a good game, and I hadn't played at all since the course began.
 
-* **[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 a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_
+Since Monday approaches, at night I added winning conditions and logic. Integrated into ball movement.
 
----
+**Day 3, Monday:**
+Thought about the game flow, and it seemed quite daunting while coding the basics previously.
+
+*Referred to one physics formula to add gravity to the game: (displacement = 0.5 * gravitational acceleration * time(Squared))*
+
+Quite pleasant that it works realistically. I still am at time of writing. However, the system was still far from completion compared to my peers and I was annoyed at my pace.
+
+Also added a jump feature which ties into gravity.
+
+**Day 4,5 Monday,Tuesday:**
+Project low point.
+
+The gravity feature works based on a high frequency setInterval, in order to smoothen the ball drop. It also means it's possible to slip through the platforms. I created the platforms (vertical obstacles) in between day 3 and 4, but didn't log the comments.
+
+Asked TA's for help, got some recommendations. Wasn't really what I was looking for, and my code might have been too smelly. It seems there is a stopping distance even though the console log registers triggers. Managed to find a solution to fix the ball position as well as allocate an allowance. Also increased frequency of gravity(). More stable chances of ball not slipping through. (still occurs occasionally now)
+
+Time is short, so once I got gravity to work more reliably, started to set up a demo level. Anyway, was about to throw in the towel and create another game, when I realized after some google-fu that we can adjust CSS properties such that removed elements do not leave any 'pixel placement scrambling effects'. position: absolute was a lifesaver and morale booster. I had ALSO created walls (horizontal obstacles), which I will find on the next day to be ridiculously bugged.  
+
+**Day 6 Wednesday:**
+Yesterday. The wall additions allow for some horizontal super mario meets pipe interaction.
+# ![](/assets/img/mariopipe.gif)
+
+Except this happens horizontally, and my ball doesn't require an opening to pass through.Horrible and also funny, more horrible though. I should have recorded a gif but I wasn't thinking about documenting it.
+
+ Spent 3-4 hours improving the collision detection models. I have also been questioned many times on why I have separate collision models set up for the left and the right side of each Wall. It's because the inequalities to check the pixel position will spill over and cause super mario ball to happen. Anyway, I fixed it for most of the part, though the ball still floats through occasionally, even now. We can thicken the Wall or make the ball land first though.
+
+ I also went home and added a few levels. Level set up is a tedious process, trying to balance making the game slightly challenging and rewarding as much as I could. Lots of trial and error while inputting the pixel positioning. I had used constructors for the platform and Walls. Added some button functionalities to proceed to next level etc. One of the biggest improvements to my workflow was adding a skip button because I had to keep beating each level to see how the level layout would be like. I left the skip button in the game for frustrated players and also presentations.
+
+ **Day 7 Thursday, today, 5th Sept:**
+
+ Soft launch day. Game looks decent to me, had a few coursemates who tried it and seemed to like it a bit. Added some really basic CSS colors. Also put in more immersement such as sounds, as well as auxiliary features to toggle sounds. Included hotkeys for buttons so user can do away with the hassle of moving the mouse every few seconds to click.
+
+ I'm an hour and thirty minutes away from the code freeze. While I feel the mechanics were quite a headache to implement, ultimately I'm happy to have chosen this project. This was what I signed up for, to learn and apply. It really let me connect the dots in a way that only I was responsible for, and I'm pleased at the outcome, though it's not that visually pleasing. Thank you for reading this portion, I hope you too have had experienced that satisfaction before.
 
-### Project Feedback + Evaluation
+### Improvements to be made
+**Walls:** I had tried to apply a for loop on Walls to make multiple horizontal obstacles. However, it seemed it did not work on multiple Walls beyond the first. Troubleshooting it didn't really work either. In the end, I opted to work with this restriction and include just one wall in each level set up.
 
-* __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)?
+**Level setup:** Honestly the levels could be improved much more, but most of my project time was allocated to fine tuning the mechanics. The placement of the platforms and walls can be adjusted further to give the player a more rewarding gameplay experience, e.g. more required use of asymmetric movements between the balls.
 
-* __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?
+**CSS:** Not the most enticing game to play at first glance. My h1 element has some whitespace which I unsuccessfully tried to remove. (but that's not the main point) I did try to make the display as simple as possible, summarize the instructions etc. Also, improve the 'juiciness' of the game such as bounciness of the platforms upon landing.
 
-* __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)?
+**Smelly code:**
+I believe there are ways to be more efficient at coding, like reducing how many times an instance appears. DRY and KISS: I'm still learning!
 
-* __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class?
 
-* __Deployment__: Did you deploy your application to a public url using GitHub Pages?
+### References
+Not much here, unless online resources such as stack overflow, MDN, are to be counted, then I'd have a long list.
 
-* __Total__: Your instructors will give you a total score on your project between:
+I used free sound files via [freesound.org](http://freesound.org) which I linked the author's profiles to at the bottom of my game.
 
-    Score | Expectations
-    ----- | ------------
-    **0** | _Incomplete._
-    **1** | _Does not meet expectations._
-    **2** | _Meets expectations, good job!_
-    **3** | _Exceeds expectations, you wonderful creature, you!_
+I also used wikipedia for the gravity formula, but it seems the page no longer looks the same, or I can't find it. But [here's](http://www.school-for-champions.com/science/gravity_equations_falling_displacement.htm#.WdXiRROCzVo) another resource you can use to see the gravity displacement.
 
- This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project!
+# ![](/assets/img/gravityformula.png)

assets/css/stylesheet.css

@@ -0,0 +1,86 @@
+.container {
+  margin: 0 auto;
+  text-align: center;
+}
+
+body {
+  background: #ffcdd2;
+  background-size: cover;
+}
+h1,h2 {text-align: center}
+h1,h2 {font-family: 'Libre Baskerville', serif;}
+/*h1 {background-color: #083D77;
+  padding: 10px;
+  width: 100%;
+  height: 50px;
+  margin: 0;
+  color: #EBEBD3;
+  text-align: center;
+}*/
+p { text-align: center}
+.half {
+  width: 300px;
+  height: 200px;
+  border: 1px solid black;
+  background-color: white;
+  position: relative;
+  display: inline-block;
+}
+
+ul{color: grey}
+li {display: inline}
+a {text-decoration: none;
+color:grey }
+.start, .skip {display: block;
+  margin: 0 auto}
+
+.start {background-color: #e55b77}
+.start:hover {background-color: #eb3d72}
+
+#ball1 {
+  background-image: radial-gradient(ellipse farthest-corner at 30px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+  top: 30px;
+  left: 255px;
+}
+
+#ball2 {
+  background-image: radial-gradient(ellipse farthest-corner at -30px 45px , #ffb6c1 0%, rgba(0, 255, 0, 0) 50%, #ff0000 95%);
+  top: 30px;
+  left: 30px;
+}
+
+#clear {
+  clear: both;
+}
+
+.balls {
+  border-radius: 99px;
+  position: relative;
+  width: 15px;
+  height: 15px;
+  display: inline-block;
+  float: left;
+  margin: 0;
+  transition: all 0.5s ease-out;
+}
+
+.nextLevel {background-color: #4CAF50}
+.nextLevel:hover {background-color: #46a049}
+
+.fade {background-color: #BEBEBE}
+.play {background-color: #E0E0E0}
+.reset {background-color: #2196F3;
+margin: 0 auto;
+display: block}
+.mute {display: block;}
+.reset:hover {background: #0b7dda}
+
+.goalBorder {
+    border: 2px solid #9ecaed;
+    border-radius: 7px;
+}
+
+.platformBorder {
+  border-top: medium thick green;
+  border-radius: 3px;
+}