Just a college student trying to make it through Web Design

Archive for the ‘Coding Homework’ Category

My Scratch Game: Bat Frenzy!

I actually had a lot of fun creating my Scratch game. I found myself getting more into it than I expected, which is always a pleasant surprise! Additionally, I thought creating the game was cool because I used sprites that I would not typically use (a.k.a. this is a pretty scary theme for me).  It was also interesting to play more with Scratch and look at code as a visual element.

A lil' bit of my Scratch code

A lil’ bit of my Scratch code

The objective of Bat Frenzy is to avoid being hit by the various monsters and ghouls. The player controls the bat with the arrow keys and can move the bat sprite up, down, left, and right while the monsters move on their own. If the bat collides with one of the monsters, the bat becomes pixelated and screams in addition to the monsters also changing costume. It the bat gets hit 10 times, the player loses and the game ends.

The finalized game, Bat Frenzy!

The finalized game, Bat Frenzy!

I know it is cheesy, but hey, it is my first computer game!



Coding #6: Scratch It Up!

1. Not only is Scratch itself a cool idea, but the Lifelong Kindergarten is really cool, especially its emphasis on getting kids to learn/interact with code. Additionally, I really like how MIT’s Lifelong Kindergarten is using Scratch and other projects as a teaching tool and as a way to connect students with one another through their creative projects. Personally, I am fan of visually seeing code. I am a visual learner and I enjoyed putting the “blocks” of code together to create my game. Although I am a fan of Scratch in general, it is a little hard to move things around and to copy/paste blocks. However, this may be fixed in the upcoming 2.0 version.

2. It may not look like I spent a lot of time on the game characters, and that is because I must have spent the majority of the two hours trying to get the background to move. I ended up drawing four new scripts to depict movement and copying the code from one of the gaming examples as well as doing a quick Google search. However, the gamer sprite (the bat) goes past the edge of the screen and I am not really sure how to fix that problem. Otherwise, I found Scratch to be pretty straightforward once you get the hang of it.

3.  Ultimately, I want my game to be a Mario-type game of sorts… except, Halloween style! I was practicing making the bat move during class and so I decided to just roll with the general theme. As the bat, the player must dodge other scary, Halloween characters (dragon, witch, ghosts) until they reach the end of the finish line. If you get hit less than 3 times, you win– if you get hit more than 3, you lose. If the player gets hit, the bat becomes pixelated and the other characters change costume.

A Halloween-themed game for all ages.

A Halloween-themed game for all ages.

Here is my very early start of the game:


Coding #5

My Coding #5

My Coding #5

Overall, I would have to say that Coding #5 went much more smoothly than Mini-site #2. It may be because I am more familiar with CSS, but I found myself less frustrated with My Super Cool Movie Site. I browsed the CSS Zen Garden link Dr. Delwiche posted to the class blog before the initial Photoshop assignment. In many of the designs, I liked the navigation bars to the right or left of the main content so I was sure to add that in my design. I also wanted to try out the background-image property, so I settled on a colorful bubbles background. Although I am by no means a good designer, in general I favor nice, plain rectangular boxes to go around text and images. I used the eye-dropper tool to make sure the colors I used matched the background perfectly.

Designing in Photoshop before coding CSS was very interesting for me. While I do know how to use Photoshop on a fairly intermediate level, I rarely utilize it and it was fun playing around with the program again. I also found it helpful to use the rulers, something I had never done before. Even though I thought my initial design looked pretty good,  my CSS final product did change. Unfortunately, I was too wrapped up in how it looked on the Photoshop document and not how the document was actually a blueprint for the web. For example, I had my bright background to be the main backdrop. I ended up making the 960px div a neutral grey so the text was more readable. Furthermore, I had to enlarge my background image a lot in order for there not to be awkward repeats down the page. Additionally, I was wrong in assuming the proportions of my secondary navigation bar. In my Photoshop file, I measured the length compared to my sample text which was much, much shorter than the full length of text from the site. In my final CSS file, I made the navigation bar a lot shorter than I expected, but it ultimately looked better.

Initial Photoshop File

Initial Photoshop File

Although I tried to keep close to my design, I could not get the title to go right next to the image without the pull-out quote looking out of place. I also could not make the main copy text start after the image and title without having too much blank space.  This really got me thinking about the importance and helpfulness of div tags. Some of my problems I encountered may have been fixed through more specific grouping from additional div tags. However, I was surprised at the things I was able to do, my knowledge of CSS has gotten better, especially with margins and positioning.

Coding #3: CSS Floats.

Don’t get me wrong, CSS is still super awesome in my book. All web pages need a little spicing up and CSS is the only way to do it (so far). However, I was in the front seat of the struggle bus with coding assignment #3. It did take me a long time to finish and I had to keep re-doing certain parts over again. And re-reading certain parts over again. Although I did finish the homework, I cannot say it was a smooth process. I might be slightly afraid of what future CSS assignments entail… but for now:

With the 15-1 exercise, I gained a little more knowledge about floating by floating images. During class, we only floated text boxes, so it was cool to see the effect on images. This was definitely the easiest part of the homework for me. Sadly, that’s not saying too much.

Screenshot 1. Exercise 15-1. The "easy" part.

Screenshot 1. Exercise 15-1. The “easy” part.

Oh, the tabs. At first, these little things were hard to get a handle on. It took me a bit to catch on to the border-radius property, but after that, it was not so bad. In fact, I really liked the border-radius property because rounded ages do look better. Even though I somehow got the tabs to look fairly decent, I feel like my experience/knowledge with margins and padding could use some more work, seeing as I just played around with the properties until they looked OK.

Screenshot 2. Customized Tabs HP Style

Screenshot 2. Customized Tabs HP Style

Absolute positioning and relative positioning: Two concepts that should not cause me great difficulty but definitely do. Although I still need to practice more to get the feel of the positioning, It’s cool how you can position a float based on the relative position of another.

Screenshot 3. 15-4. Hope (hopefully) Floats

Screenshot 3. 15-4. Hope (hopefully) Floats

So, not having a pre-packaged book exercise to go off of was quite challenging. I couldn’t figure out how to float the images in different directions for the longest time. I eventually created each image tag as DIV ID and floated them that way (I tried to do image class but for some reason, it didn’t work). From this part, I learned that the DIV tag is very helpful when you want to create different content from the whole story.

My images may be more like islands in a pond...

Screenshot 4. My images may be more like islands in a pond…

I actually did not have any problems I can think of with the SPAN, all things considered. I think it is awesome to have the ability to take chunks of text and float them wherever. This might have been my favorite part of the homework.

Screenshot 5. SPAN... it treats me well. At least, it looks right.

Screenshot 5. SPAN… it treats me well. At least, it looks right.

Coding #2: CSS Basics


The Plain Old, Same Old HTML. It is actually quite nice, though…

Peanut butter and jelly, ice cream and cake, HTML and CSS: these are just a few of the  inseparable pairs that I have come to know and love. For this coding #2 homework, I found myself really getting into CSS, especially when I got to the crazy part. Corny as the book chapter was, I really enjoyed reading it and becoming more familiar with creating classes in the CSS file. Additionally, the hands-on portion in class last Thursday really helped me with this homework.


Love it or hate it, I get crazy with my colors!

When coding the homework, I did not really run into any problems, except I did think my plain.html border was wrong when I was comparing it to the original picture posted on the assignment description. However, I just decided to follow the directions and everything turned out alright. I also was thrown off by the <DIV> tag when I first opened up the file because I glanced at it before reading the directions entirely. Of course, it was nothing to be worried about. The only true issues I came up with was remembering to properly space all elements and add the semicolon at the end of command. Some changes I made to my CSS file were to change the album detail font to serif font, Georgia (Baskerville Old Face, Serif) and changed the copy to sans-serif font, Helvetica (Arial, Sans-Serif). I also made the images to be 300px and added lots of color.

Even though CSS is fun to code, I think the real reason I really like CSS is because I love color. I repeat, I love color. I went a little crazy with the border with the dots, dashes, and colors. The assignment was to create a crazy file, right? See all my craziness and my love of color at my first CSS Basics site.

Tag Cloud