Just a college student trying to make it through Web Design

Archive for March, 2013

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!

http://transmedia.trinity.edu/~lsandlin/scratchgame1.sb

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:

http://transmedia.trinity.edu/~lsandlin/scratchgame1.sb

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.

Tag Cloud