Fun Stuff

A Teris Game in JavaFX

Tagged:  

Like many developers I got into software development because I wanted to make games. While I don't work on game development anymore I still have an interest in the development, especially as it has to do with the web. Well over at DZone's JavaLoby Jim Weaver has posted an interesting article about making a Tetris game using JavaFX. This is the first post in a series of posts that will take you through the development of the game.

Below is an excerpt from the post.

In Tetris, there are several types of tetrominoes, each having a letter that it resembles. The four buttons on the left represent four of these shapes. When you press one of these buttons, the corresponding tetromino appears at the top and begins moving down the screen. When you click the Rotate button, the tetromino rotates to the right, and the Left/Right buttons move the tetromino left and right, respectively.

The code is contained in four FX program files, and needs some refactoring already. :-) Before showing you the code in its current state, I'd like to point out a couple of helpful things:

  • As explained in the Spinning Wheel post, the Key Frame animation syntax that you see here will become much less verbose as the JavaFX Script compiler team continues to address animation.
  • JavaFX Script programs should always be designed with the UI binding to a model. In this program, the model is represented in one class named TetrisModel, located in the FX file of the same name. You may find it helpful to take a look the Creating a Compiled JavaFX Script Program with Multiple FX Source Files post to see a Hello World style program that has more than one FX file. Please notice the package statments in this Tetris program, as that influences where you need to put the source files and how you build them.
  • You can obtain the JavaFX Compiler by following the instructions in the Obtaining the OpenJFX Script Compiler post.

The Source Code (so far)

Here's the main program, named TetrisMain.fx, that declaratively expresses the UI, and starts things up:

/*
* TetrisMain.fx - The main program for a compiled JavaFX Script Tetris game
*
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
* to serve as a compiled JavaFX Script example.
*/
package tetris_ui;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
import tetris_model.*;

Frame {
var model =
TetrisModel {

}
var canvas:Canvas
width: 480
height: 500
title: "TetrisJFX"
background: Color.WHITE
content:
BorderPanel {
center:
canvas = Canvas {}
bottom:
FlowPanel {
content: [
Button {
text: "I"
action:
function() {
canvas.content = [];
insert
TetrisShape {
model: model
shapeType: TetrisShapeType.I
}
into canvas.content;
model.t.start();
}
},
Button {
text: "T"
action:
function() {
canvas.content = [];
insert
TetrisShape {
model: model
shapeType: TetrisShapeType.T
}
into canvas.content;
model.t.start();
}
},
Button {
text: "L"
action:
function() {
canvas.content = [];
insert
TetrisShape {
model: model
shapeType: TetrisShapeType.L
}
into canvas.content;
model.t.start();
}
},
Button {
text: "S"
action:
function() {
canvas.content = [];
insert
TetrisShape {
model: model
shapeType: TetrisShapeType.S
}
into canvas.content;
model.t.start();
}
},
Button {
text: "Rotate"
action:
function() {
model.rotate90();
}
},
Button {
text: "Left"
action:
function() {
model.moveLeft();
}
},
Button {
text: "Right"
action:
function() {
model.moveRight();
}
}
]
}
}
visible: true
onClose:
function():Void {
System.exit(0);
}
}

 

I made the TetrisShape class a custom graphical component. Therefore, it is a subclass of the CompositeNode class, and overrides the composeNode function:

/*
* TetrisShape.fx - A Tetris piece, configurable to the
* different shape types. They are:
* I, J, L, O, S, T, and Z
*
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
* to serve as a compiled JavaFX Script example.
*
*/
package tetris_ui;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.awt.Point;
import java.lang.System;
import tetris_model.*;

class TetrisShape extends CompositeNode {
private static attribute squareOutlineColor = Color.BLACK;
private static attribute squareOutlineWidth = 2;
private attribute squareColor;

public attribute model:TetrisModel;
public attribute shapeType:TetrisShapeType on replace {
if (shapeType == TetrisShapeType.I) {
squareLocs = [];
insert new Point(0, model.SQUARE_SIZE * 1) into squareLocs;
insert new Point(0, 0) into squareLocs;
insert new Point(0, model.SQUARE_SIZE * 2) into squareLocs;
insert new Point(0, model.SQUARE_SIZE * 3) into squareLocs;
squareColor = Color.RED;
}
else if (shapeType == TetrisShapeType.T) {
squareLocs = [];
insert new Point(model.SQUARE_SIZE * 1, 0) into squareLocs;
insert new Point(0, 0) into squareLocs;
insert new Point(model.SQUARE_SIZE * 2, 0) into squareLocs;
insert new Point(model.SQUARE_SIZE * 1, model.SQUARE_SIZE * 1) into squareLocs;
squareColor = Color.GREEN;
}
else if (shapeType == TetrisShapeType.L) {
squareLocs = [];
insert new Point(0, model.SQUARE_SIZE * 1) into squareLocs;
insert new Point(0, 0) into squareLocs;
insert new Point(0, model.SQUARE_SIZE * 2) into squareLocs;
insert new Point(model.SQUARE_SIZE * 1, model.SQUARE_SIZE * 2) into squareLocs;
squareColor = Color.MAGENTA;
}
else if (shapeType == TetrisShapeType.S) {
squareLocs = [];
insert new Point(model.SQUARE_SIZE * 1, 0) into squareLocs;
insert new Point(model.SQUARE_SIZE * 2, 0) into squareLocs;
insert new Point(0, model.SQUARE_SIZE * 1) into squareLocs;
insert new Point(model.SQUARE_SIZE * 1, model.SQUARE_SIZE * 1) into squareLocs;
squareColor = Color.CYAN;
}
}

private attribute squareLocs:Point[];

public function composeNode():Node {
return
Group {
transform: bind [
Translate.translate(model.SQUARE_SIZE * model.tetrominoHorzPos,
(model.a / model.SQUARE_SIZE).intValue() * model.SQUARE_SIZE),
Rotate.rotate(model.tetrominoAngle,
squareLocs[0].x + model.SQUARE_SIZE / 2,
squareLocs[0].y + model.SQUARE_SIZE / 2)
]
content: [
for (squareLoc in squareLocs) {
Rect {
x: bind squareLoc.x
y: bind squareLoc.y
width: bind model.SQUARE_SIZE
height: bind model.SQUARE_SIZE
fill: bind squareColor
stroke: squareOutlineColor
strokeWidth: squareOutlineWidth
}
}
]
};
}
}

 

The TetrisShapeType class defines the tetromino types:

/*
* TetrisShapeType.fx - A Tetris shape type, which are
* I, J, L, O, S, T, and Z
*
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
* to serve as a compiled JavaFX Script example.
*
*/
package tetris_ui;

import javafx.ui.*;

class TetrisShapeType {
public attribute id: Integer;
public attribute name: String;

public static attribute O =
TetrisShapeType {id: 0, name: "O"};
public static attribute I =
TetrisShapeType {id: 1, name: "I"};
public static attribute T =
TetrisShapeType {id: 2, name: "T"};
public static attribute L =
TetrisShapeType {id: 3, name: "L"};
public static attribute S =
TetrisShapeType {id: 4, name: "S"};
}

 

And finally, here's a model class, named TetrisModel:

/*
* TetrisModel.fx - The model behind the Tetris UI
*
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
* to serve as a compiled JavaFX Script example.
*
*/
package tetris_model;

import javafx.ui.animation.*;
import java.lang.System;
import com.sun.javafx.runtime.PointerFactory;

public class TetrisModel {
public static attribute SQUARE_SIZE = 20;

public attribute a:Integer;
private attribute pf = PointerFactory {};
private attribute bpa = bind pf.make(a);
private attribute pa = bpa.unwrap();
private attribute interpolate = NumberValue.LINEAR;
public attribute t =
Timeline {
keyFrames: [
KeyFrame {
keyTime: 0s;
keyValues:
NumberValue {
target: pa;
value: 0;
interpolate: bind interpolate
}
},
KeyFrame {
keyTime: 20s;
keyValues:
NumberValue {
target: pa;
value: 370
interpolate: bind interpolate
}
}
]
};
public attribute tetrominoAngle:Number;
public attribute tetrominoHorzPos:Number = 10;

public function rotate90():Void {
(tetrominoAngle += 90) % 360;
}

public function moveLeft():Void {
if (tetrominoHorzPos > 0) {
tetrominoHorzPos--;
}
}

public function moveRight():Void {
if (tetrominoHorzPos < 20) { //TODO:Replace 10 with a calculated number
tetrominoHorzPos++;
}
}
}

 

You can read the full post here.

This use of JavaFX is very interesting, I'm looking forward to reading Jim's next post.

Creating a Simple JavaScript Game Board

Over at the Web Cash blog they have posted two tutorials on Game development in JavaScript, Ajax and PHP. The first tutorial explains the concept and describes how to make a game board.

Below is an excerpt from the first tutorial.

Game Development with JS, AJAX, and PHP

How can we use JS and PHP - connected through AJAX - to develop an online game?

Javascript’s main use for us is to create an interface for the game. Through Javascript we can capture user input - i.e. mouse clicks and text. We can also alter the game’s output - changing the HTML of the page, adding images, and moving things around. Javascript will provide a lot of the front end work.

PHP, on the other hand, is a more robust language for dealing with the logic of the game. PHP could be useful for developing an AI and evaluating winning conditions. It also offers a great way to store information for later use through flat files or database integration.

If we’re going to use both Javascript and PHP, we’ll need to use AJAX. This is the glue that holds the whole thing together. It will send input from the main Javascript to the PHP processing scripts. The PHP script will then send info back to the Javascript and it will alter the page’s layout accordingly.

Read the full first tutorial here.

The second tutorial goes into more detail as to how you would start creating a simple game. By the end of the tutorial you have a complete simple tic-tac-toe game (the game needs more logic added to be finished, but the concept is there).

Below is an excerpt from the second tutorial.

Creating Graphics

Tic Tac Toe Circle ImageI created two images in Inkscape to use for this board. Each is a 50×50 png file - with a gray background and a black border. The actual token (the circle or cross) is red and laid on top of the gray background.

Tic Tac Toe Cross ImageI’m no great artist, but these should work for a functional demo. We can worry about making nice circle and cross tokens later. I think getting the game working is more important than making it pretty from the get-go.

Turning Our .js Script into a Class

In making this a functional board, I also converted the script into an actual class. The script may end up being somewhat large and unwieldy - and an object oriented approach may help us keep it tidy and clean. Or it may add a lot of overhead… but I like objects.

In our HTML file, we’ll create the object like this.

<script type="text/javascript">
var tictactoe = new game();
</script>

In the attached .js file, we actually define the game object. Here’s part of the object definition.

function game() {
  //  Array to hold the bgImgs
  this.bgImgs = new Array();
    this.bgImgs[0] = 'tttcircle.png';
    this.bgImgs[1] = 'tttcross.png';

 
  //  Player information			
  this.currentPlayer = 0;
  this.players = new Array();
    this.players[0] = "Player One";
    this.players[1] = "Player Two";

 
   return true;

This class constructor does some of the initialization for us.

First, it creates an array with background images. At the moment we’re only using two images. However, this technique would be useful if you had a more complex map - with 10-15 images you could lay over a div.

Second, we create some player information variables. The ‘currentPlayer’ property is going to track whether the ‘cross’ or ‘circle’ player is currently taking a turn. The ‘players’ array will just hold the names of those players for now.

The Background Image Changing Function

One of the major methods of this class will be changeBackground(). Just like in the previous example, this method will change the background style of a given div tag. This way we can change it from an open square to a circle or cross token.

  this.changeBackground = function (boxId) {
    var box = document.getElementById('box-' + boxId);
    box.style.background = 'transparent url(' + 
      this.bgImgs[this.currentPlayer] + ') top left no-repeat';

 
    box.removeAttribute('onClick');
 
    this.changePlayer();
  }

This should be pretty straightforward. We’re storing the ‘div’ element in the ‘box’ variable. We’re then setting the ‘background’ style as we would in a css style. Remember that we stored the background images in an array (this.bgImgs) and this.currentPlayer corresponds to a key in the this.bgImgs array (either 0 or 1).

The ‘box.removeAttribute()’ method is removing ‘onClick’ from that div. We can’t use a square a second time, so we might as well eliminate the onClick handler altogether.

Finally, this.changePlayer() is calling a new method. This is going to help us switch from Player One’s turn to Player Two’s turn.

One Turn to Another - this.changePlayer()

The last method we need to declare for this class at the moment is changePlayer.

This will toggle the active player - which in turn affects whether a circle or cross is placed on the board. For some added effect, we’ll also create a new html element to display a message that says who’s turn it is.

  this.changePlayer = function () {
    //  Switch the active player

    if (this.currentPlayer == 0) {
      this.currentPlayer = 1;
    } else {

      this.currentPlayer = 0;
    }
 
    //  Get a reference to our 'message' element and create the message
    var box = document.getElementById('message');
    var msg = "It is " + this.players[this.currentPlayer] + "'s turn.";
    var txt = document.createTextNode(msg);

 
    //  Erase any existing text
    while (box.hasChildNodes()) {
      box.removeChild(box.lastChild);
    }

 
    //  Add the text node (our message) to our element
    box.appendChild(txt);
  }

Again, this is pretty straightforward. The DOM functions are amazingly simple - once you see how they work.

‘box’ is a reference to our element (id = message). The msg variable is a temp variable I created to hold the string. The ‘createTextNode’ method creates a new block of text (with our msg) that we can then insert into an HTML element.

The while() loop is simply there to erase any old text. As long as our ‘box’ element has any child nodes inside of it (text or other HTML tags), the loop will execute and delete one of those child nodes each time. This way we have a clean slate on which to write down who’s turn it is.

Read the full second tutorial here.

Although the tutorial only shows a simplistic tic-tac-toe game you could use the concepts as a starting point to build your own web games. As always if you have made any cool games we would love to hear about them either in the comments or you can write a blog post about it using your free Ajaxonomy account.

Multi-player Ajax Games

Today I came across an interesting article about creating multi-player video games using Ajax. The article mainly deals with how you would send data to and from the server and also touches on keeping the game in sync on multiple clients.

The below code is how the post purposes that you would send data to the server side (this code uses a hand rolled Ajax call, but you could change it to use a library).

var httpSend = null;
var httpGet = null;

function send(action)
{
httpSend=GetXmlHttpObject();
if (httpSend==null){alert (?Your browser does not support AJAX!?);return;}

var url=?send.php?;
url=url+??action=?+action;
url=url+?&p=?+player;
url=url+?&g=?+gameid;
url=url+?&sid=?+Math.random();
httpSend.onreadystatechange=stateSend;
httpSend.open(?GET?,url,true);
httpSend.send(null);
}

function get()
{
if(httpGet != null) { return 0; }

httpGet=GetXmlHttpObject();
if (httpGet==null){alert (?Your browser does not support AJAX!?);return;}

var url=?get.php?;
url=url+??sid=?+Math.random();
url=url+?&p=?+player;
url=url+?&g=?+gameid;
httpGet.onreadystatechange=stateGet;
httpGet.open(?GET?,url,true);

httpGet.send(null);
}

function stateSend() {
if (httpSend.readyState==4){}
}

function stateGet() {
if (httpGet.readyState==4)
{
str = httpGet.responseText;
if(str != ?){
eval(str);
}
httpGet = null;
}
}

function GetXmlHttpObject() {
var xmlHttp=null;
try {
xmlHttp=new XMLHttpRequest();
}
catch (e) {
try {
xmlHttp=new ActiveXObject(?Msxml2.XMLHTTP?);
}
catch (e) {
xmlHttp=new ActiveXObject(?Microsoft.XMLHTTP?);
}
}
return xmlHttp;
}

The following code would be on the server side to receive messages. In the case of this example the code is PHP and the file is called Get.php

<?php
include(?config.php?);
$p = $_GET[?p’];
$g = $_GET[?g’];
$action = ?;
$query = mysql_query(?SELECT * FROM actions WHERE id = ?.$g);
$row = mysql_fetch_array($query);
$action = $row[$p];
$action = stripslashes($action);
$str = ?update actions set `?.$p.?` = ? where id = ?.$g;
mysql_query($str);
echo $action;
?>

The following code would be on the server side to send messages. In the case of this example the code is PHP and the file is called Send.php

<?php
include(?config.php?);
$p = $_GET[?p’];
$g = $_GET[?g’];
if($p == 1)
{
$b = 2;
}
elseif($p == 2)
{
$b = 1;
}
$action = $_GET[?action?];
$action = addslashes($action);
$query1 = mysql_query(?select * from actions where id = ?.$g);
$row = mysql_fetch_array($query1);
$str = $row[$b];
$str = $str . $action;
$str = ?UPDATE actions SET `?.$b.?` = ??.$str.?? where id = ?.$g;
$query = mysql_query($str);
if(!$query)
{
echo mysql_error().$str;
}
else
{
echo 0;
}
?>

You can read the full post here

The post also touches on the possibility of sending data via a text string. I personally think that for multi-player games JSON is a perfect data transfer method. Unlike XML there is not a large overhead and unlike sending data via a text string there is no parsing needed on the client which should help performance. This post is interesting as I think that Ajax can be a very useful method of transferring data for multi-player games.

Ajaxonomy's del.icio.us Spy - Released!

Tagged:  

You are probably familiar with Digg Spy, but I was very surprised when I found out that there was no similar application for del.icio.us (if you are not familiar with del.icio.us it is a great social bookmarking site).

So, we at Ajaxonomy we decided to make our own del.icio.us spy application. The application allows you to see the latest bookmarks being added to del.icio.us so that you can find great new sites. The application also includes links to help make it easy to share what you find with others.

The application allows you to filter results (i.e. type in "web" and you will only see links containing the word web) and to be notified (via sound) when new items are added. The application also allows you to pause the items that are shown so if you find something you like you can see it for a while.

You can go to the application by clicking here. The application will also be available in the Ajaxonomy Labs section on the right bar of this blog.

As with all the applications in the Ajaxonomy Labs section, this application is open source and you can download the source code here.

Cross Browser Sound in JavaScript

When working on an upcoming project I had the need to play sound through JavaScript. The method had to be cross-browser compatible, so I couldn't use any IE only calls.

Happily, I found a nice API called SoundManager2 which uses Flash to play the sound and is called through JavaScript. The API is very easy to use and below is a sample of how to use it.

The below code would be put inside the head tag of your web page.

<script type="text/javascript" src="soundmanager2-jsmin.js"></script>
<script type="text/javascript">

soundManager.url = 'soundmanager2.swf'; // override default SWF url
soundManager.debugMode = false;
soundManager.consoleOnly = false;

soundManager.onload = function() {
  // soundManager is initialised, ready to use. Create a sound for this demo page.
  soundManager.createSound('aDrumSound','button-0.mp3');
}</script>

The part of the above code that you will be most interested in is the last line. The soundManager.createSound('aDrumSound','button-0.mp3'); is what actually loads the sound file.

The below code will cause the sound to play.

soundManager.play('aDrumSound');

You can go to the project page by clicking here and get more information about the API. Also, you can download the files needed to use the API (including documentation and demos) here.

The library would be very useful in many applications including JavaScript games. If you create any cool applications using the API I would love to hear about it. You can post a blog entry about it when you create a free account (once you login just click on "Create content" => "Blog Entry") on this blog.

Game Development using the Yahoo! User Interface

As with many people that get into programming, I started programming because I wanted to make video games (in-fact I have had a few games published about 10 years ago). Now that I am in the web development industry, I from time to time like to look at the developments in Video Game development as it pertains to the web.

The Yahoo! User Interface is a great library for development of JavaScript based applications, including Ajax applications. The library has quite a few methods to help with animation that can be very useful in developing games. Today, I'm not going to go into much detail on using the library to make a game (this will be in a later post), however, I do want to show you how well these games can look.

Check out the below games that where made using the Yahoo! User Interface.

I was amazed at how close these games are to their Flash counterparts. Of course the advantage to using JavaScript over flash is that no plug-in is required to play the game.

You can read more about the Yahoo! User Interface here.

If you've seen any other cool games built using the Yahoo! User Interface I would love to hear about it. If you sign up for a free account you can blog about it on this blog or you can leave them in the comments.

Rapping about Ajax, JavaScript, Flex, YouTube, Apple, Social Networking and others...

Tagged:  

Just when you thought you've heard everything, here's a reason to go buy that expensive car stereo system you've always wanted, you can blast this as you cruise.

I'm so sick, ajax, JavaScript
Flex power when I point my pen

This is a hip hop / rap song about all things IT, web 2.0, computer software, you name it... Must be one-of-a-kind, although this song may start a revolution and change the face of hip hop.

If You Bury a Digg Story at Least Comment

Tagged:  

I have been posting to Digg for a while now, however recently my Diggs seem to continually be buried. Is this the rumored Bury Brigade? I don't have any way of knowing why these stories have been buried, they are not spam posts and are interesting original content. It seems like whenever I post a story and it gets in the "Hot" section that it gets buried soon after it starts to raise.

Since Digg gives me no way of knowing who or why my stories are being buried they give me no chance of knowing what I should do differently or a way to appeal that it was buried. All I want from people that bury my stories is the courtesy of leaving a comment that lets me know why they are burying the story. Kevin Rose some visibility would be very helpful.

So please if you bury my stories just leave a comment, so I know what you think I did wrong.

Cool Free Christmas Games

Tagged:  

It is the weekend before Christmas (I hope Santa brings me a Ferrari or a Wii!) and it is time to have some Christmas fun and games. So now that you have played Elf Bowling for the 50th time (and that is definitely one of the best Christmas games every made) you may be looking for some new Christmas games.

I found a site that has quite a few great Christmas games (they are all in Flash or Shockwave). I particularly recommend the 3-D snowball fight game, quite a bit of fun (a little tip the ctrl button is used to throw snow balls).

Click here to go to the games!

So, have a very fun and Merry Christmas playing these great games and looking forward to the holiday festivities (I know for me it would be a great New Year if my Fresno State Bulldogs will beat Georgia Tech in their bowl game).

JavaScript Game Library - Start Playing Your Games

Tagged:  

Well it is the weekend and time for some fun. I have found a good JavaScript Game Library. The library has some good 2-D gaming functionality. Including sprite animation (including properties for jumping and falling) tile handling for backgrounds and platforms.

Click here to go to the page where you can download the library.

There are also quite a few fun games that have been built with the library. Click here to go to the games.

Now that you have a JavaScript library for game creation you can extend it using Ajax (I would recommend the use of JSON instead of XML) so that you could make a network game. If you create a game let me know about it. I would love to play it.

videogamepic.jpg

Syndicate content