Monday, January 24, 2011

Minesweeper in Java: Part One - GUI

Continuing from yesterdays post about Minesweeper as an introduction to game programming today we are going to start by creating Minesweeper in Java, a traditional starting language. Creating graphical user interfaces is normally more advanced of a topic than a usual starting tutorial, but the basics are quite simple.

For Minesweeper the basic interface for the game is a simple grid with squares. In Java we will do this by creating a JPanel with GridLayout. For simplicity sake we will assume that the grid will always be 10x10. These are set in the constructor.

import java.awt.*;
import javax.swing.*;

public class GameGridGui extends JPanel{

public GameGridGui(){
     this.setSize(400,400);
     this.setLayout(new GridLayout(10,10));
}
}

Once the basic layout is taken care of the next thing that needs to be done is build the squares. There are lots of ways to do this but since we need to click on the squares there is no reason why we shouldn't just use an array of JButtons. Create a method called buildButtons and call it from your constructor.

import java.awt.GridLayout;

import javax.swing.JButton;
import javax.swing.JPanel;

public class GameGridGui extends JPanel{

 private JButton squares[][];
 
public GameGridGui(){
     this.setSize(400,400);
     this.setLayout(new GridLayout(10,10));
     squares = new JButton[10][10];
     buildButtons();
}

private void buildButtons(){
     for(int i=0;i<10;i++){
          for(int j=0;j<10;j++){
               squares[i][j] = new JButton();
               squares[i][j].setSize(400,400);
               this.add(squares[i][j]);
          }
     }
}
}

If you want to test this out to see what it looks like, just create a quick main method with a JFrame.

public static void main(String[] args) {
  GameGridGui g = new GameGridGui();
  JFrame frame = new JFrame("My Minesweeper");
  frame.add(g);
  frame.setSize(400,400);
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  frame.setVisible(true);
 }

And with that you have a basic Minesweeper GUI in Java.

Sunday, January 23, 2011

A Mine in Many Languages

One of my favorite games is the Windows classic Minesweeper. It is a simple yet addictive game that really engages your mind, and it is an excellent introduction to game programming. A lot of budding programmers are most interested in game programming because it gives you instant gratification, the visible results and interactivity that is missing from a large number of introductory programming assignments. Minesweeper may not have the flashy graphics or multiplayer capabilities of a hit game, but it is that simplicity that makes it an excellent starting program.

With any program, no matter the language or the scale, the first thing that you want to do is determine what exactly you will need. For minesweeper the list is fairly straightforward:

  1. Area to display the grid.
  2. Ability to click on squares in the grid.
  3. Ability to distinguish between unclicked square, square with a mine, square with a number, and square that has been flagged.
  4. On square click, the ability to determine if the square is a mine and if not the ability to count neighboring squares.
  5. Ability to detect when game is finished, either by clicking on a mine or by clicking on all non-mine squares.
  6. (Optional) Timer or move counter
  7. (Optional) Ability to change options; grid size, number of mines, etc.

Your answer to these questions may change depending on the language you choose to write the program in, and the personal desires of the client. It is important to note that creating any list such as this is not meant to be too detailed or all inclusive. Some programmers prefer to just jump right in, others prefer to have absolutely everything planned and outlined in advance.

I will be referring back to this post regularly, with the goal of having a working version of minesweeper in every language that I learn.

Thursday, January 20, 2011

Esoteric is as Esoteric does

There is a whole realm of esoteric programming languages, languages which really serve no purpose other than existing. One example is lolcode, the programming language of lolcats. A quick example program in lolcode looks like:

HAI
CAN HAS STDIO?
VISIBLE "HAI WORLD!"
KTHXBYE

This code is nothing more than hello world, "HAI" and "KTHXBYE" represent the open and close blocks, CAN HAS is the equivalent of an import or include statement, with STDIO being the namespace for standard input and output. Finally VISIBLE is the command to print out to the screen, followed by the string literal "HAI WORLD!", which is what would be printed out to the screen.

Of course, lolcode is not the only esoteric programming language out there. Another esoteric language is the aptly named Brainfuck. Learning this language will fry your mind worse than any night binging on whiskey and vodka. Once again we are going to start out with the simplest program, hello world.

++++++++++
[>+++++++>++++++++++>+++>+<<<<-]
>++.>+.+++++++..+++.>++.
<<+++++++++++++++.
>.+++.------.--------.>+.>.

Right now you are probably saying "What the fu...", but what you should be saying is "What the brainfu..." Brainfuck uses only 8 symbols and runs using a set of counters. In this example there are 5 elements in an array, '<' and '>' iterate through the array, '+' and '-' increment and decrement the values respectively, '[' and ']' denotes a loop and '.' prints to the screen. So to start with the array[1] is set to 10, this is the constraints for the loop. The loop then iterates 10 times (notice the - at the end of the loop when the pointer has returned to the first element) Since this happens 10 times array[2] becomes 70, array[3] becomes 100, array[4] becomes 30 and array[5] becomes 10.

With these values the letters can start to be printed. Array[2] becomes 72 and is printed out, 72 being the ascii value for 'H'. Next 101 is printed ('e'), 108 ('l') is printed twice, and so on, using < > + and - to change the ascii values that are printed.

These are far from being the only esoteric languages out there, but they manage to show a good glimpse at what you can expect from extremely bored programmers.

Wednesday, January 19, 2011

Misadventures in CSS

So I have spent the past two days updating various websites to make sure they looked nice and worked in all the various browsers, specifically Chrome, Firefox, and IE 8. As anybody who has spent any time at all working on CSS can tell you, programming for Firefox and Chrome is simple, Internet Explorer... not so much. There are several nuances that make Internet Explorer difficult, they have gotten better with IE 8 - I remember having to create entirely different CSS files, one for IE and one for other browsers - but as my headaches these past days can attest to, cross compliance is far from reality.
One specific issue I was having was formatting select elements, the drop down boxes with pre-populated values that are so common on HTML forms. Specifically, my client needed added space between three elements, a date field, month field, and year field. Chrome automatically added in some space, but Internet Explorer and Firefox mashed all three fields together. "No problem," I thought to myself, "one quick CSS rule and I'll be on my way."

select{
     margin-right: 0.5em;
} 

A quick refresh and Firefox confirmed that this rule worked as expected, but alas, Internet Explorer did not want to play ball. Now, when updating a website lots of things could be the problem: is the CSS code even being reached? Is there a cached version still being used? Is there an error with the CSS? With the HTML? Using a hard-refresh (control-F5) to clear cache, and using Developer Tools to trace the CSS, I ruled out the first two possibilities, and since the code worked perfectly in Firefox and Chrome, one would think the other two were equally impossible. After a little tweaking I found the silly little bug, Internet Explorer cannot or will not style a select element without also styling the option element, the various dropdown options that appear when you click on the box. With that the working code for all three browsers is:

select{
     margin-right: 0.5em;
} 

option{
     margin-right: 0.5em;
} 

The other issue I had the pleasure of tangling with was getting an entire form to be centered on the page while keeping the elements left aligned with one another. Once again the fix for Firefox and Chrome was quite simple:

form{
     margin: 0 auto;
}

The shorthand for the margin command sets the top and bottom margins with the first value, and the left and right with the second. Since the left and right margins are both set to the same auto-computed value, the content becomes horizontally centered on the page. Of course, Internet Explorer chooses to ignore this command by default. This fix is deceptively simple though, and many programmers will not even notice the issue. The problem comes with Internet Explorer's Quirks mode, if a website does not specify an HTML Doctype, Internet Explorer defaults to an old, HTML 4 compliant version. To force an updated XHTML 1 rendering, place the following line at the VERY top of your webpage, even before the <html> tag.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

A simple fix to solve future headaches.

Tuesday, January 18, 2011

The Start of a Journey

Hello all, I am Anthony Westover from Valparaiso University, and I am a computer programmer. If there is one thing I love about computer programming it is learning and using as many languages as possible. Each language is unique, each has a set of strengths and weaknesses. This is a journey through the universe of programming languages.