Chapter 1 of Jetstream is Complete

jetstream_page_1
The Opening Scene of Jetstream

The first chapter of Jetstream, the text-based choice adventure game that I have been developing over the last few months, has been finished! This game is about a person who had been working on a ship when an accident happened and the ship was destroyed. He wakes up later, washed up on the shore with a monster staring over him. The goal is to discover what is really going on in this mysterious new place.

I am excited to continue work on this project, it has been a blast to write so far.

~ gryphonCode

Advertisements

Programming Tips: Responsive Websites, Javascript Functions and Bug Fixing

So for the past several weeks, I have been working on polishing up the website. I haven’t had a ton of experience with web development. The most that I have done has been a simple website I designed back in high school, primarily only using simple HTML and CSS, with minimal Javascript. Therefore this project has been a learn as I go process.

One of the biggest challenges I have been facing is making a responsive website that automatically adjusts to whatever screen size the site is being viewed on. This is important because nowadays so many people use their phones or tablets for browsing the web. If a website doesn’t work for people using mobile devices, traffic may be greatly reduced. In addition, searching algorithms such as the one Google uses will automatically scan websites to see if they are mobile friendly. If they aren’t they are moved lower in search results. Considering all of this, having a responsive website is very important.

So to make my website more responsive, I started using JS to take into account the window size that the site is being viewed on. If the screen width is small enough it is supposed to automatically adjust the size of the buttons and font, as well as shifting some margins around to make the page flow better. This seemed to be working fine, though I didn’t realize that something was wrong with the code to resize the buttons.

Not realizing that the buttons weren’t working correctly, I continued with trying to modify the rest of the page. Specifically, I wanted to shift an image to move from next to a paragraph of text to above it when the screen is small. However, absolutely nothing was happening when I modified the JS. I tried to change the float, the size, and even resorted to setting the display to hidden. But the image was still there unchanged no matter what. It was immune to my attempts to destroy it. I spent weeks messing with it in my free time. But I had no luck until late last night.

That’s when I realized that the buttons weren’t resizing either. To test out and see if my function was even being called, I threw in an alert() to see if the code would be reached. It wasn’t. That’s when I remembered, if one part of a JS script doesn’t execute correctly, it stops the rest of the script from being run. To test if that was the case, I removed all of the code for resizing the buttons, and all of a sudden the image moved to where I was trying to get it to go! So this whole time, the portion of code to move the image the whole time was working, it just wasn’t being reached. Lesson learned: double check the code conventions.

~ gryphonCode