ImpactJS Block Break Game

Game programming has always been a hobby of mine.  Unfortunately, most of my game projects have ended LONG before they are done.  With the exception of a couple of tiny C projects and 1 rather large game written in objective-C (mac osx), I have never “finished” any game, let alone a fun one.  However, I am SO determined to finish this little block breaking game that I am calling it a soft alpha at this point.

The good:

  • Graphics are good
  • Ball physics are (mostly) there
  • Score and Lives kept

The bad:

  • It doesn’t “end” properly
  • No sound (yet)
  • Various ball movement bugs

The ugly and great (if any) can be left in the comment section!

Please try Block Blaster out!

My Raspberry Pi Configurations

I recently purchased a Raspberry Pi.  These things are pretty amazing little computers all for only $35 (or $25).  Before you get too excited about the price tag, I would recommend have a few extra dollars for power (standard cell phone charger should work), SD card (recommend class 10 or better), USB keyboard / mouse (optional), and usb wifi (optional), as well as a case (recommended!).  I purchased a set from ebay that came with usb wifi, usb keyboard / mouse combo,  a Kingston 4gb SDHC, and an HDMI to VGA cable.

Out of the box, it would not provide video or audio.  This caused me a little concern until I was able to get video with an old rca style cable.  Also, I noticed the red PWR LED constantly lit (which seemed good) however, there is a green LED labeled OK that was blinking intermittently.  At the time, I thought maybe something was wrong with the R-Pi but later learned that the LED blinks when the SD card is being accessed.  Moving on…

I intend to keep a log of the steps I take to get this little sucker up and running how I like.  Maybe this will help someone else and possibly a tip or too might appear in the comments section.

I am running the Raspbian OS

HDMI output did not work “out of the box” so I updated config.txt to add

hdmi_safe=1

If you have visual access to the Pi via another method, just edit the /boot/config.txt file. Otherwise, put the SD card in another system and edit the config.txt file. I did it from Windows 7 with notepad.

To disable X Server on boot up this tip worked:

#  sudo update-rc.d lightdm disable

To auto login the “Pi” user:

# sudo nano /etc/inittab

Change
1:2345:respawn:/sbin/getty –noclear 38400 tty1
To
1:2345:respawn:/sbin/getty –autologin pi –noclear 38400 tty1

That’s it for now (02/20/13). The system boots to pi user logged in in 38 seconds and I can view it with a hdmi->hdmi cable.  Next, I want to get audo via hdmi to work, hdmi -> vga output working, and shorten boot time.

Update:

Now running the Raspberry Pi with Puppy Linux installed from BerryBoot.

Boots to X from the BerryBoot menu in 34 seconds.

Next, I am going to auto start  chromium in fullscreen mode.

Per http://www.raspberrypi.org/phpBB3/viewtopic.php?p=99077

edit .bashrc in user’s home directory to include

chromium-browser –kiosk www.google.com

 

 

 

HTML and CSS Header on Top Footer on Bottom

Over and over I have to look up how to get a nice header at the top of my web pages. And perhaps more important a nice footer at the bottom of the page.

A simple header definition in your css file:

#header {
  background-color: #000;
  height: 20px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

Along with this footer:

#footer {
  background:#000;
  bottom:0;
  color: #fff;
  height:20px;
  left: 0;
  position:absolute;
  text-align: center;
  width:100%;
}

And finally, test it out with the following html file:

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <div id="header"></div>
  <div id="footer"></div>
 </body>
</html>

And there you have it! Really pretty simple. The header is 100% wide and at the top of the html page and the footer is the same width and stays at the bottom of the page (or lower if there is more content).

US Geography Study Map

Last month I posted a simple sql file with the name of the US states and their abbreviations.  This month I show you what I have done with it.  I created an interactive map of the states that populates an iframe with information when you click on the state.  I elected to use the statehood date, state bird, state flower, electoral votes, 2010 census population,  capitol, and motto in the information box.  The best part was working on it with my children.  We all learned throughout the process.

 

 

 

The map is created with the Raphael JavaScript Library and Coldfusion.  See it in action here!

 

 

SQL Import File for US States

It seems like I have needed this files 1,000 times over the years so I am going to save a copy up here for myself and others to use. It creates a table named states if it does not exist and populates it with an auto increment id, the 50 US states and Washington DC, and their respective abbreviations (i.e. AK for Alaska). That’s it! Enjoy…

download:  states.sql.zip

or view:  states.txt

Programming a Javascript Calculator

I wanted to program a calculator that was fairly simple, wouldn’t require page reloads, and would work with button clicks or the keyboard.  Here is what a came up with:

Calculator Example

It is entirely in html / javascript.  I hope to clean up the code and revisit this post to explain some of the code shortly.

Top Left HTML Header in CSS

I seem to be googling this far more than I should need to so I decided to post a reminder here.  The following CSS gives me a light blue header bar across the top of an html page from top / left (0,0) to 100%:

body {
 margin: 0 auto;
}
#header {
 background-color: #b7ddf2;
 left 0;
 position: fixed;
 top: 0;
 width: 100%;
}

From there just use the id attribute of the div you are using as your header…

View an example here

 

Election Game

Ever since playing “Campaign Manager” on the neighbor kid’s Commodore 64 thirty or so years ago, I have been interested in election simulation games.  After reading up on SVG files and finding an example map of the 50 US states, I decided to throw something together and see if I could get a demo written using Coldfusion and MySQL.  It seems to work pretty well in firefox.  It doesn’t work at all in IE, but what really does?

Take a look if you like.

Oh, and it asks for a sign up and forces authentication but there are no checks (read – don’t need to use a real email).

 

Center a Div in HTML

Problem: We need to align our fixed width div container in the center of the browser.  IE does not render this the same as Firefox.

In Firefox, all we need is:

margin: 0 auto

Internet Explorer is a bit trickier. Try:

body {
 text-align: center;
}
#container {
 text-align: left;
}

This will align the container to the center.  The text within the div is left justified.

<body>
 <div id="container" >
 Hello World
 </div>
</body>

This CSS code should work with IE and Firefox:

body {
text-align: center
}
#container {
width: 960px;
margin: 0 auto;
text-align: left
}

View example:

http://www.maximize-traffic.net/center-div-html/