jordymoos/elm-pixel-boulder-game

Pixel Boulder Game in Elm

Elm Pixel Boulder Game

The Elm Pixel Boulder Game is a bit "out-of-hand" experiment to write a game in a pure functional language. I tried to apply some tricks out of the books like the Actor-Component system which allows you to configure the entities in assets.

For years I wanted to build a led table like this one (not mine). Which I would probably do on a raspberry pi in Python. One of the games I would like to make for it is the old school Boulder Dash. And I thought, if I could make Boulder Dash in a pure functional language like Elm. Then I could probably write about any game you can create in a 12 by 12 pixels grid in Python.

This is also the reason why its all pixel-ish (the menu and some original levels).

When I showed people this they where like "mhe" until I decided to add images. Suddenly it really looked like the old Boulder Dash!

Play the game!

You can play the game at github pages.

https://jordymoos.github.io/elm-pixel-boulder-game/?startLevel=official%2F001&hideDebug=1

Easy level editor

You can create and play your own levels in the visual editor.

And then play your own level!

https://jordymoos.github.io/elm-pixel-boulder-game/?hideDebug=1

Advanced level editor

If you do not like the default configuration then you can also use the advanced editor to configure more of your game!

https://jordymoos.github.io/elm-pixel-boulder-game/?editorMode=advanced

Development

Clone the repository.

git clone https://github.com/JordyMoos/elm-pixel-boulder-game.git

Go into the directory.

cd elm-pixel-boulder-game

Install the dependencies.

npm install

Run the local version.

npm start

And play it in your browser at localhost:3000

Create a prod build

After installing the dependencies you can also create a production build.

npm run prod

Which will create the production version in the ./dist folder.

elm-pixel-boulder-game's Issues

Be able to push stone

I can push Rocks up

Not sure if that should be possible

Bug: you can move to a pixel where something else is moving to

That way a sliding rock can end up at the same location as a falling diamond ;(
I think something goes wrong in the "isClaimed" code

Update positionIndex on actorRemove and actorInsert Explosion animation not working

I guess that the explosion does not get added to the indexedMap.
probably not get removed either

I actually think almost nothing gets removed! :D

Add level animation (with the camera) when level is loaded

Create a coordination index for actors

We have to loop through all the actors like almost d*n times. Only to find if a coordinate is owned or get that owner. We can easily optimize that.

It is possible that a coordinate is owned by more then one actor. Like:

• When player is moving a rock
• When an explosion is triggered

Refactor - Smaller functions

For example these big blob of functions should be composed of smaller ones. Which promotes readability and re-usability

https://github.com/JordyMoos/elm-pixel-boulder-game/blob/master/src/elm/Actor.elm#L916

Be able to configure background color of the canvas

Now there is no background color which makes it white. But I would like to be able 5o specify the color

Be able to finish level when all diamonds are collected

Be able to load levels from json

Split static and dynamic actors for optimalization

There will be a lot of Dirt and Walls which are not using the update loop. We can move them to level.actors.statics/dynamics ?

Die if rock hits your head

Maybe add bomb actors in and around you

Upgrade to canvas 0.3.x

Maybe have an "on movement complete handler"

Like if a rock gravity movenent is done and it is above you then it should kill you next tick.
But if you walk under a non moving rock then it should not kill you next tick

Be able to pickup a diamond when it is moving

Add licence note for the images

Add the canvas instead of asci

Bug enemies sometimes not explode when hit by a rock

I think it has something to do with the movement state

Maybe add tests

To play with the elm-test Fuzz a bit more.

Note the "Maybe" in the title!

Animation time should be stopped when game is paused

Shapes should be able to rolloff round shapes

So a Rock on a Rock should falloff

refactor the destorying dirt and collecting diamonds

Now we have components for destroying and collecting diamonds while they are actually the same thing. The dirt gets destroyed and rewards nothing. And diamonds gets destroyed and collect diamonds

Main point here is that the engine should not know that a diamond is a thing. It ahould be. more generic collectable

Make trigger-explodable more dynamic

Now it is hard coded to what entity to spawn, while the game should not expect that entity to exists. We should make it configurable which entity should be spawned. That way it would be possible to other stuff like diamonds

Only draw tiles that changed

As a performance update it would be cool if we only overwrite tiles that changed.

• Draw the canvas and store it in the model?
• Keep list of changed positions
• Update the changes in the canvas
• How to update animations like diamonds??

Not sure if it really is per formant but it is part of the whole learning trajectory

Create menu's

Do not be able to push Wall

Guess you can only push Circle's

Code needs refactoring

Replace time for a tick counter

So animatioms are not speedup when game is paused

Add fade effect to movement animations

PlayerInputComponent should just be an AI

That way you can no longer have an AI and player input. And also the player input should not give extra powers the the entity (like it does now with initiating a push). That sort of behavior should be decided by components without knowing if the AI or player did it

Enemies should explode when hit on the head

In 3x3 size.

Make game playable on mobile

Guess coolest thing is with touch.
Which will transform to some movement over multiple game ticks. It does need to know where thr player is for it be able to deside

Add ai compinent for enemy

Advanced level editor

Configure what an Entity is yourself! If I also add a "FollowTrackerComponent" and "TrackerComponent" than you can make pacman!

Split RenderComponent

Be able to render pixels (current renderer) but also images.

If something falls on the player then it should die

Maybe move gravity decision to an ai component

Add the pixel text engine

Be able to restart level

Add AnimationFrame to not render too often

Performance with images is pretty bad. Maybe this helps

http://package.elm-lang.org/packages/elm-lang/animation-frame/latest/AnimationFrame

AI / InputControlComponent should be moved to "ControlComponent"

Which is more natural if you combine the two

Better input direction

Now we make direction decision in this order: left, up, right, down. But if we add the gametick to the is/was-pressed and sort on the lowest. Then we get a better direction decision.

Let the diamond animate by default

Add debug flag to the game which allows you to control the game speed

which makes debugging easier.

add buttons for different tick speed: Off, 10sec, 5sec, 1sec, 80milisec

Add enemy

Let the viewport move with the player when he is reaching edges

There should destructible and indestructible walls

Together with explosions and explosive enemies will that open possibilities

Advanced level editor

Be able to drag and drop components to entities to make it more accessible to create games which could be really cool for kids to make their game

Enemy should do damage

Update merge color

Instead of getting the average off all colors and alpha. We should "weight" the colors on the alpha and set alpha to the highest alpha value. I think that will make the color transition look smoother