Spiele im Stadtpark

Kurzweilige Spiele, um zu lernen wie man diese programmiert.

• Boulder
• Snake
• Sokoban The classic game with 90 levels from the 1986 version and multiple skins.
  
  • Base
  • 1982
  • Gameboy
• Minesweeper
• Game Of Life Basic implementation of Conways Game Of Life
• Langton's ant A cellular lifeform as MatrixObject behavior.
• Turtle Graphics Draw using a Turtle that moves according to your programmed commands
• Lindenmayer systems Uses the Turtle graphics to visually present L-Systems. Define you own ruleset and watch it unfold.

Technical demos

These demonstrations represent several steps on the way to build a browser game and other capabilities of the included classes.

Press [Space] to pause each demo. Reload each page to start the demo again.

Source Code:

• gitlab.com/feeela/js-utils – Basic JavaScript utilities and helper functions.
• gitlab.com/feeela/malkasten – The used canvas wrapper classes and other tools to paint on a canvas.
• gitlab.com/feeela/spiele.imstadtpark.de – The repositiory containing the games and examples on this website.

MatrixCanvas & Matrix

Basic grid

• Gritter A Malkasten object with a point that moves via a loop. Fakes the Matrix.
• Move it The basix MatrixCanvas. Has a cursor and reacts to user input. The cursor can be moved with arrow keys; but not beyond the canvas edges.
• Collector Demo of the Matrix object; collect things via a keyboard controlled cursor.
• Move it over the edges Demo of the Matrix, where the keyboard cursor can be moved beyond the canvas dimensions and will appear on the opposite edge.
• Move it over the edges 2 Same as before, but faster reaction for keyboard cursor.
• Random walk A marker that randomly wanders around the MatrixCanvas and tracks on often each point it visited.

Matrix objects

MatrixObjects may have one or more behaviors assigned.

• Bacteria Each newly painted point is a distinct object in the matrix. Checks to find unoccupied neighbouring fields are done via the `MatrixObject.passable` property of each object (a Bacteria has `passable` set to `false`; fills entire screen).
• Projectile Moving MatrixObjects that spawn other moving MatrixObjects.
• Slime Test if MatrixObjects can fade out and disappear.

Matrix based layout with collision detection

• Walls You cannot move through those
• Maze Walls placed by a maze generator;
  You can choose between different algorithms.
• Maze builder visualization The maze generator with handbrake applied to see each single step.

Path finding algorithm

• Pathfinder Visualization of different path searching algorithms on randomly genrated mazes.
• A* path finding algorithm Find a path from the top left corner to the current cursor position. (Recalculates when keyboard cursor is moved.)
• A* path finding algorithm visualization The path finding algorithm with handbrake applied to see single steps. Searches through randomly generated mazes.
• Catch me Demo of the path finding algorithm used in a MatrixObject.

Perlin noise and pre-game tests

• Map generator Uses a Perlin noise algorithm to create a simple map with water, land & mountains.
• Fog of war You can only see that part of a map, where the cursor already has been.

Miscellaneous demos

Text Block

Print text on a canvas; has colors and backgrounds with padding

Text Block with Webfont

Print text on a canvas; same as above but uses a webfont.

Color

Demo for class Color, which contains color helper functions

Menu

On-canvas menu with keyboard selection

Pixelate

Rasterize a given image

Mouse interaction

Pointer Control

Now you place the walls yourself, click-a-di-click.

Pixel Paint

Paint a pixel graphic by placing or removing single pixels.

Malkasten

The Malkasten is a Canvas class without using the matrix. It provides basic drawing and other helper methods.

Random number demos

• Bacteria 2 Object only knows about itself, points are stored as simple internal list. Randomly chooses a fixed neighbour, but only if that neighbour point is not in the internal list (leaves gaps).
• Ravel Paint a line to random horizontal and vertical directions.
• Cryptic Same as Ravel, but stop and spawn a new MatrixObject after a random amount of steps. Channels extraterrestrial cyphers.
• Sigil Similar to Cryptic, but also uses diagonal directions and uses lines, curves, circles and gaps. Might look like runes in a magic spell.
• Krakel A Sigil instance, that runs for hundreds of iterations and produces a scribble.

Colony (Random number demos 2)

Colonies are a swarm of points and are storing points as an internal list (array). For each point a full check of each possible neighbour is performed, and as long as there are free neighbouring points a new point will be added (fills up entire screen). A colony has the feature to block points via pushing points to the static class property Colony.doNotStepOn and thus prevent itself and other Colonies from stepping on that same point again.

• Bacteria 3 – Square
• Bacteria 3 – Dots
• Christmas decoration As Bacteria 3, but for each point a line is drawn from the start point.
• Abstract Geometric Modern Art As Bacteria 3, but for each point a line is drawn from the previously painted point. After all colonies are finished growing, a crpytic symbol is painted.
• Abstract Geometric Modern Art v2 As Bacteria 3, but for each point a line is drawn from the previously painted point. After all colonies are finished growing, a crpytic symbol is painted.

Malkasten Helper

• Polygon Demo of the polygon class.
• Polygon intersect Collision detection between a polygon and other objects.
• Gradient Gradients created from a center point and an angle (in degree). Can be animated.
• Normalize Demo for Vector.normalize().

Malkasten other

• Analog Clock An analog clock built with Malkasten objects.
• Googly Eyes Eyes that follow the mouse cursor movement.
• Gravis Plot mathematical formulas in a coordinate system.
• Cubic Bézier Vizusalisation of constructing a cubic Bézier curve.
• Quadratic Bézier Vizusalisation of constructing a quadratic Bézier curve.