2d array grid in JPanel with random placed images

Hello all,

I'm new at java programming so bare with me...

i'm trying to make an game
http://img30.imageshack.us/img30/7052/happer.jpg

Its an tile based game for 1 player

-The player can move one tile at a time
-The grey squares are fixed positions
-The blue squares are moveable (one tile at a time if you push it)
-The red pacman like sprite is the computer with AI

I try to make this game just to practice with java game development but i don't know how to create such a grid:(

I've searched google but found nothing or i don't understand it...
I don't have any code yet.
If you need more info just say it.

Can you give me a few lines of code to create such a game?

Thnx in advance.:D

There are many ways to do it. The way I do such things, is from scratch.
I use a JFrame for the window, and I subclass JPanel as a canvas to draw on. There are other ways to draw, including the java canvas class, but this approach is simple. The grid can be drawn onto either the JPanel subclass directly, or onto a BufferedImage which is then drawn onto the JPanel. Let me give a very simple example:

Code:

---

package superSimple2D;

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;

/**
 * @author Steffen Gates Jan 10, 2011
 */
public class GridOfSprites {

    public static void main(String[] args) {
        new GridOfSprites();
    }
    BufferedImage[] sprites;
    JFrame window;
    MyCanvas canvas;
    int boxSize = 20,
            width = 300,
            height = 400;

    public GridOfSprites() {
        loadSprites();
        window = new JFrame();
        canvas = new MyCanvas();
        canvas.setPreferredSize(new Dimension(width, height));
        window.getContentPane().add(canvas);
        window.pack();
        window.setVisible(true);
    }

    private void loadSprites() {
        try {
            sprites = new BufferedImage[2];
            sprites[0] = ImageIO.read(new File("images/pacMan.png"));
            sprites[1] = ImageIO.read(new File("images/monster.png"));
        } catch (IOException ex) {
            Logger.getLogger(GridOfSprites.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    private class MyCanvas extends JPanel {

        @Override
        public void paintComponent(Graphics g) {
            update(g);
        }

        public void update(Graphics g) {
            drawGrid(g);
            drawSprites(g);
        }

        private void drawGrid(Graphics g) {
            g.setColor(Color.BLACK);

            for (int i = 0; i < 16; i++) {
                g.drawLine(i * boxSize, 0, i * boxSize, height);

            }
            for (int i = 0; i < 21; i++) {
                g.drawLine(0, i * boxSize, width, i * boxSize);
            }
        }

        private void drawSprites(Graphics g) {
            g.drawImage(sprites[0], boxSize * 5, boxSize * 3, null);
            g.drawImage(sprites[1], boxSize * 2, boxSize * 1, null);
            g.drawImage(sprites[1], boxSize * 7, boxSize * 9, null);
        }
    }
}

---

Here is a sample image:
http://steffen.selfip.com/game.png

There are other issues with this code - for example, this is not the best drawing technique, the gui should be loaded by a thread, etc... But this will get you started and its short code. If you get this far, you can look at other issues later. Good luck!

P.S. this forum refuses to write this line correctly:
sprites[0] = ImageIO.read(new File("http://www.java-forums.org/images/pacMan.png"));
should not be a url, rather a link to the file - everything after the .org/
...
Oh well! :D

Thnx for the simple code...

I've tried the code but i' m getting an error:

Code:

---

private void drawGrid(Graphics g) {
            g.setColor(Color.BLACK);

            for (int i = 0; i < 16; i++) {
                g.drawLine(i * boxSize, 0, i * boxSize, [COLOR="Red"]height[/COLOR]);

            }
            for (int i = 0; i < 21; i++) {
                g.drawLine(0, i * boxSize, [COLOR="red"]width[/COLOR], i * boxSize);
            }
        }

---

heigt is not public in java.awt.Component; cannot be accessed from outside package.
width is not public in java.awt.Component; cannot be accessed from outside package.

I don't know what this means or how to fix it.

Perhaps you didn't put the code into the correct package? You will need to modify my code slightly to fit into your IDE (like specify the correct package name). Also, all of the code I posted is designed to be inside a single .java file - The MyCanvas class is a private nested class within the GridOfSprites class. Make sure you're saving all of it together in one .java file.

Code:

---

    int boxSize = 20,
            width = 300,
            height = 400;

---

The height and width come from there - I declare them at the top of the file. Let me know how it goes!

It Works flawless!!!!

Thank you so much,
If i get stuck at something else, i'll let you know.

Thanks again

Great! No problem, good luck! It was stuff like this that got me interested in programming to begin with. Keep at it, and feel free to present new issues/challenges you are facing and I'll do what I can to explain :D

Forgot something important:

Code:

---

@Override
        public void paintComponent(Graphics g) {
            update(g);
        }
// Should be:
@Override
        public void paintComponent(Graphics g) {
            super.paintComponent(g);
            update(g);
        }

---

Make sure to put the call to super in there, otherwise the redraw might not work right when you try to animate!

I'm stuck once again...

I have a player class were i put the movements for the player, i know how to move the player with coordinates but the question is:
How do i move the player a whole tile?

Did research on google and found a few things but none of them works with your code.

If you can help me again i'm really grateful:D

In the code I provided, position of the player, mobs, barriers, etc... are all set in the draw method. You'll note that the coords of a given tile is set with:

Code:

---

g.drawImage(sprites[0], boxSize * 5, boxSize * 3, null);

---

where the position is the desired location * the size of a box. So in the case of the above line, there is a sprite at column 5, row 3 (starting from 0). You'll see the smile is at that location.

To keep track of where things are, you might consider a 2D array thats the same size as the playfield, or and OOP approach where game entities are objects in a list.

If you keep track of your x,y information in another table, you can replace the 5 and 3 in the above code with variables that are passed in or retrieved with a method on a per entity basis. Does that help?

It helps very much...

Thank you for all your help so far, i'll let you know how it goes