Posts Tagged ‘game’

In this part of the Java 2D games tutorial, we will create a Java Snake game clone.

Snake

Snake is an older classic video game. It was first created in late 70s. Later it was brought to PCs. In this game the player controls a snake. The objective is to eat as many apples as possible. Each time the snake eats an apple, its body grows. The snake must avoid the walls and its own body. This game is sometimes called Nibbles.

Development

The size of each of the joints of a snake is 10px. The snake is controlled with the cursor keys. Initially the snake has three joints. The game is started by pressing one of the cursor keys. If the game is finished, we display Game Over message in the middle of the Board.

Board.java
package snake2;

import java.awt.Color;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;

import javax.swing.ImageIcon;
import javax.swing.JPanel;
import javax.swing.Timer;

public class Board extends JPanel implements ActionListener {

    private final int WIDTH = 300;
    private final int HEIGHT = 300;
    private final int DOT_SIZE = 10;
    private final int ALL_DOTS = 900;
    private final int RAND_POS = 29;
    private final int DELAY = 140;

    private int x[] = new int[ALL_DOTS];
    private int y[] = new int[ALL_DOTS];

    private int dots;
    private int apple_x;
    private int apple_y;

    private boolean left = false;
    private boolean right = true;
    private boolean up = false;
    private boolean down = false;
    private boolean inGame = true;

    private Timer timer;
    private Image ball;
    private Image apple;
    private Image head;

    public Board() {
        addKeyListener(new TAdapter());

        setBackground(Color.black);

        ImageIcon iid = new ImageIcon(this.getClass().getResource("dot.png"));
        ball = iid.getImage();

        ImageIcon iia = new ImageIcon(this.getClass().getResource("apple.png"));
        apple = iia.getImage();

        ImageIcon iih = new ImageIcon(this.getClass().getResource("head.png"));
        head = iih.getImage();

        setFocusable(true);
        initGame();
    }

    public void initGame() {

        dots = 3;

        for (int z = 0; z < dots; z++) {
            x[z] = 50 - z*10;
            y[z] = 50;
        }

        locateApple();

        timer = new Timer(DELAY, this);
        timer.start();
    }

    public void paint(Graphics g) {
        super.paint(g);

        if (inGame) {

            g.drawImage(apple, apple_x, apple_y, this);

            for (int z = 0; z < dots; z++) {
                if (z == 0)
                    g.drawImage(head, x[z], y[z], this);
                else g.drawImage(ball, x[z], y[z], this);
            }

            Toolkit.getDefaultToolkit().sync();
            g.dispose();

        } else {
            gameOver(g);
        }
    }

    public void gameOver(Graphics g) {
        String msg = "Game Over";
        Font small = new Font("Helvetica", Font.BOLD, 14);
        FontMetrics metr = this.getFontMetrics(small);

        g.setColor(Color.white);
        g.setFont(small);
        g.drawString(msg, (WIDTH - metr.stringWidth(msg)) / 2,
                     HEIGHT / 2);
    }

    public void checkApple() {

        if ((x[0] == apple_x) && (y[0] == apple_y)) {
            dots++;
            locateApple();
        }
    }

    public void move() {

        for (int z = dots; z > 0; z--) {
            x[z] = x[(z - 1)];
            y[z] = y[(z - 1)];
        }

        if (left) {
            x[0] -= DOT_SIZE;
        }

        if (right) {
            x[0] += DOT_SIZE;
        }

        if (up) {
            y[0] -= DOT_SIZE;
        }

        if (down) {
            y[0] += DOT_SIZE;
        }
    }

    public void checkCollision() {

          for (int z = dots; z > 0; z--) {

              if ((z > 4) && (x[0] == x[z]) && (y[0] == y[z])) {
                  inGame = false;
              }
          }

        if (y[0] > HEIGHT) {
            inGame = false;
        }

        if (y[0] < 0) {
            inGame = false;
        }

        if (x[0] > WIDTH) {
            inGame = false;
        }

        if (x[0] < 0) {
            inGame = false;
        }
    }

    public void locateApple() {
        int r = (int) (Math.random() * RAND_POS);
        apple_x = ((r * DOT_SIZE));
        r = (int) (Math.random() * RAND_POS);
        apple_y = ((r * DOT_SIZE));
    }

    public void actionPerformed(ActionEvent e) {

        if (inGame) {
            checkApple();
            checkCollision();
            move();
        }

        repaint();
    }

    private class TAdapter extends KeyAdapter {

        public void keyPressed(KeyEvent e) {

            int key = e.getKeyCode();

            if ((key == KeyEvent.VK_LEFT) && (!right)) {
                left = true;
                up = false;
                down = false;
            }

            if ((key == KeyEvent.VK_RIGHT) && (!left)) {
                right = true;
                up = false;
                down = false;
            }

            if ((key == KeyEvent.VK_UP) && (!down)) {
                up = true;
                right = false;
                left = false;
            }

            if ((key == KeyEvent.VK_DOWN) && (!up)) {
                down = true;
                right = false;
                left = false;
            }
        }
    }
}

First we will define the constants used in our game.

private final int WIDTH = 300;
private final int HEIGHT = 300;
private final int DOT_SIZE = 10;
private final int ALL_DOTS = 900;
private final int RAND_POS = 29;
private final int DELAY = 140;

The WIDTH and HEIGHT constants determine the size of the Board. The DOT_SIZE is the size of the apple and the dot of the snake. The ALL_DOTS constant defines the maximum number of possible dots on the Board. (900 = 300*300/10*10) The RAND_POS constant is used to calculate a random position of an apple. The DELAY constant determines the speed of the game.

private int x[] = new int[ALL_DOTS];
private int y[] = new int[ALL_DOTS];

These two arrays store x, y coordinates of all joints of a snake.

In the move() method we have the key algorithm of the game. To understand it, look at how the snake is moving. You control the head of the snake. You can change its direction with the cursor keys. The rest of the joints move one position up the chain. The second joint moves where the first was, the third joint where the second was etc.

 for (int z = dots; z > 0; z--) {
     x[z] = x[(z - 1)];
     y[z] = y[(z - 1)];
 }

This code moves the joints up the chain.

if (left) {
    x[0] -= DOT_SIZE;
}

Move the head to the left.

In the checkCollision() method, we determine if the snake has hit itself or one of the walls.

for (int z = dots; z > 0; z--) {

    if ((z > 4) && (x[0] == x[z]) && (y[0] == y[z])) {
        inGame = false;
    }
}

Finish the game, if the snake hits one of its joints with the head.

if (y[0] > HEIGHT) {
    inGame = false;
}

Finish the game, if the snake hits the bottom of the Board.

Snake.java
package snake2;

import javax.swing.JFrame;

public class Snake extends JFrame {

    public Snake() {

        add(new Board());

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(320, 340);
        setLocationRelativeTo(null);
        setTitle("Snake");

        setResizable(false);
        setVisible(true);
    }    public static void main(String[] args) {
        new Snake();
    }
}

This is the main class.

Snake

Figure: Snake

This was the Snake game.

 

Fantastic JavaScript 3D Libraries


Ever imagined if the tiny JavaScript code could render amazing out of the box 3D? Then be ready to enjoy wonderful 3D effects in simple JavaScript code. These JavaScript 3D Libraries let you render smooth yet attractive 3D effects with great ease.

JS3D – The 3d Javascript Graphics Layer

JS3D is a library which allows you to have interactive 3d objects on your website, such as the spinning cube at the top of the page. The 3d effect is created using actual text, try selecting the text on the cube.

JavaScript Raytracer

The JavaScript Raytracer is a 3D rendering engine written entirely in JavaScript. It implements the raytracing algorithm to create images of mathematically defined shapes such as spheres.

3d graphics in JavaScript

Just because I do not do enough silly things with JavaScript already and a raytracer, here are some 3d graphics done with just JavaScript. You should see a TIE fighter rotating, and moving left and right.

Realtime 3D Triangles in Javascript

A wonderful real time 3d triangle generated using javascript.

Javascript Wolfenstein 3D

This a Javascript implementation of id Software 1992 game, Wolfenstein 3D. Should work in all canvas-enabled browsers, that is it means no Internet Explorer.

JavaScript-Powered Web 3D

JavaScript is the standard scripting language of Web development, and a far larger number of people know JavaScript than Java. JavaScript is easy to learn and fun to experiment with. No compiler or development environment is required. So lets learn how to create awesome 3D in JacaScript.

Incredible JavaScript and Canvas 3D demos from Japan

Mr. Satoshi Ueyama hacked out the new era of JavaScript 3D tech by unveiling the real of Google Chrome s power. Satoshi is one of the great JavaScript hackers in Japan. He has introduced the brand new JavaScript technique using Canvas for 3D on his post.

C3DL – Canvas 3D JavaScript Library

The Canvas 3D JS Libary (C3DL) is a javascript library that will make it easier to write 3D applications using canvas 3d. It will provide a set of math, scene, and 3d object classes to make the canvas more accessible for developers that want to develop 3D content in browser but do not want to have to deal in depth with the 3D math needed to make it work.

3D Javascript Chess

This is a work-in-progress 3D Javascript chess game, rendered using the canvas element and this Javascript 3D renderer. Special chess moves are not implemented yet and the interface needs a bit of work.

SVG-VML-3D Javscript Libraries

SVG-VML-3D is a free JavaScript library which can be used to draw and manipulate 3D objects in html pages by using SVG or VML. The JavaScript code which has to be typed into the html page to define the Scene (3D Objects, Viewer Position, Light.) is the same for SVG and VML.

Share and Enjoy:

  • MisterWong
  • Y!GG
  • Webnews
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit