Tuesday, September 18, 2012

Breakout

I am very exited! In the last Post we wrote a Pong like ... well ... let's call it javascript application. In this post I have expanded it by the following properties:

The game does not start until you hit enter.

There are blocks that can be hit by the ball and disappear.

There are even blocks with 2 lives (dark blue) that turn into normal blocks on the first hit.

The game stops when the ball leaves the canvas downward.

This means, there is a goal and there is a game over situation. So at this point one could actually call it a game. And it even has a start screen ... did I mention that I am exitied? /,anma But, now, as always, here is a preview. As always you have to click the canvas to get input focus. If you are not viewing this blog article on blogspot and the application does not work, try the original article page.

Note: This currently only works if you are viewing this article only (not in the flow of the complete blog). I am working on the problem ...

manager: The manger is for managing the blocks. Every blocks state is produced by a coroutine, and in the beginning there is a set of blocks in the game (first parameter to manager). The manager distributes its input to all its coroutines. So the input list should have the same length. The output if each coroutines are collected in a list which is the output of the manager.

Every block Coroutine returns "Nothing" when the block is destroyed, the manager than removes the block from the set.

Note that at present there is no way of inserting new blocks in the manager, it is not needed in this game.

switch: Switch allows us to switch between different game states, which all are described by coroutines of the same type.

Initially switch behaves as the init Coroutine (its first parameter) with an extra parameter holding events with other Coroutines. Whenever one of these events occurs, switch switches to the coroutine carried in the event.

<$: This is a operator. When applied to an event it replaces the contents of the event with the second parameter. We need this to replace the content of the KeyDown event with the main Coroutine when the start key is pressed. You will see!

From Pong to Breakout

All very exiting, but the real excitement start now. The main source file Breakout.hs is based on the last postsPong.hs. Here I will go over the differences.

Definitions

The game state needs to reflect the blocks and the start screen. It has changed to:

The BlockState has been added, which contains the block position and the number of lives (1 or 2) of the block. The GameState has been expanded by a list of BlockStates AND can be just the start screen (when the game has not started).

BlockCollision is a type for creating Events where the block collides with the ball. A type synonym to () would also work, but I choose this more verbose way.

The color of the blocks depend if they have 1 or 2 lives. initBlockStates describes the blocks as the game starts. They are evenly spaced, 6 in x and 6 in y directions. 2 of the y rows have 2 lives, the rest 1.

The restartKeyCode is the key code of the enter bar and the canvasName is the name of the canvas in the html code of this blog.

The original main coroutine has been renamed to mainGameCoroutine. There is a new "main coroutine" mainStartScreenCoroutine which is used while in the start screen. The new mainCoroutine switches between these two coroutine when the player pressed enter, or the game is over.

Remember, the <$ operator replaces the contents of an event with its second parameter (here the mainGameCoroutine) and switch receives events containing coroutines to which it switches.

mainGameCoroutine has been extended by the blocks. ballBlocksCollisions, as we will see later, returns a tuple with the ballCollisions events due to collisions with the blocks, and a list of BlockCollision events. This list has the same length as the list of blocks (in oldBlockStates). The n-th element of this list are the collisions with the n-th block.

The block collisions are than passed to the blockStates arrow while the ballCollisions are added to the collisions passed to ballState.

I dislike the long names like "currBallState" here. I would have called it ballState, but there is already an arrow with the same name. I wonder if there is a less clumsy way of doing this ...

In my opinion, this is the most complicated function. It takes the ball state and the block states (as a list) and produces ball collisions events, and a list of block collision events, which has the same length as the input block state list.

The foldStep function takes the next block, tests it for collision and updates the list of ball and block collisions. Here the ball collision events are only expanded when a collision happens. The list of block collision events is always expanded. By an empty event (empty list) when no collision happens, and by a BlockCollision event in case of collision. This is because the position in this list reflects the block that will receive it.

Every block has its own coroutine, which receives block collision events. In case of such an event, the number of lives is reduced or the block is removed (if there are no lives left). The coroutines return a Maybe data type, because they are inserted into the manager. Nothing is returned if the block should be deleted.

You should receive a file "Breakout.js" which can be included in a html file, like this one: haste html

UHC

With UHC it is a little bit more work. UHC does not support arrow syntax, so we must translate the haskell file with arrowp:

cabal install arrowp
arrowp Breakout.hs > BreakoutNA.hs

I choose the name BreakoutNA.hs for "Breakout no arrows". For some reason I also can not get vector space to compile with UHC. Luckily we have not used much of vector space, only the + operator. So edit PongNA.hs and replace the line

I tried to compile some small pieces of code, and with haste-inst the required cabal packages (mtl, transformers, dlist) were pulled in just fine. I couldn't get dlist used by UHC, and didn't try the others afterwards. Did you have such problem?

Unfortantly I can not say more than that it does not work here neither. You could ask at irc://irc.freenode.net/uhcjs, create an issue at github (https://github.com/UU-ComputerScience/uhc-js) or ask on the UHC mailing list (ttp://lists.science.uu.nl/mailman/listinfo/uhc-users).