I was wondering if it is possible to write a very simple game in TikZ; e.g. (very simple) Super Mario Bros. Here is Mario:
\documentclass[border=5pt,tikz]{standalone}
\begin{document}
\begin{tikzpicture}
\draw[step=.5cm] (0,0) grid (8,8);
\foreach \x in {2.5,3,...,4.5}
{
\fill[red] (\x,7.5) rectangle +(.5,.5);
}
\foreach \x in {2,2.5,...,6}
{
\fill[red] (\x,7) rectangle +(.5,.5);
}
\foreach \x in {2,2.5,3}
{
\fill[brown!70!black] (\x,6.5) rectangle +(.5,.5);
}
\foreach \x in {3.5,4}
{
\fill[yellow!50!orange] (\x,6.5) rectangle +(.5,.5);
}
\fill[black] (4.5,6.5) rectangle +(.5,.5);
\fill[yellow!50!orange] (5,6.5) rectangle +(.5,.5);
\fill[brown!70!black] (1.5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (2,6) rectangle +(.5,.5);
\fill[brown!70!black] (2.5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (3,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (3.5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (4,6) rectangle +(.5,.5);
\fill[black] (4.5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (5.5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (6,6) rectangle +(.5,.5);
\begin{scope}[shift={(0,-.5)}]
\fill[brown!70!black] (1.5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (2,6) rectangle +(.5,.5);
\fill[brown!70!black] (2.5,6) rectangle +(.5,.5);
\fill[brown!70!black] (3,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (3.5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (4,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (4.5,6) rectangle +(.5,.5);
\fill[black] (5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (5.5,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (6,6) rectangle +(.5,.5);
\fill[yellow!50!orange] (6.5,6) rectangle +(.5,.5);
\end{scope}
\fill[brown!70!black] (2,5) rectangle +(.5,.5);
\foreach \x in {2.5,3,...,4}
{
\fill[yellow!50!orange] (\x,5) rectangle +(.5,.5);
}
\foreach \x in {4.5,5,...,6}
{
\fill[black] (\x,5) rectangle +(.5,.5);
}
\foreach \x in {2.5,3,...,5}
{
\fill[yellow!50!orange] (\x,4.5) rectangle +(.5,.5);
}
\foreach \x in {2,2.5,...,5.5}
{
\fill[red] (\x,4) rectangle +(.5,.5);
}
\fill[blue] (3,4) rectangle +(.5,.5);
\fill[blue] (4.5,4) rectangle +(.5,.5);
\begin{scope}[shift={(0,-.5)}]
\foreach \x in {1.5,2,...,6}
{
\fill[red] (\x,4) rectangle +(.5,.5);
}
\fill[blue] (3,4) rectangle +(.5,.5);
\fill[blue] (4.5,4) rectangle +(.5,.5);
\end{scope}
\begin{scope}[shift={(0,-1)}]
\foreach \x in {1,1.5,2,...,6.5}
{
\fill[red] (\x,4) rectangle +(.5,.5);
}
\fill[blue] (3,4) rectangle +(.5,.5);
\fill[blue] (3.5,4) rectangle +(.5,.5);
\fill[blue] (4,4) rectangle +(.5,.5);
\fill[blue] (4.5,4) rectangle +(.5,.5);
\end{scope}
\fill[yellow!50!orange] (1,2.5) rectangle +(.5,.5);
\fill[yellow!50!orange] (1.5,2.5) rectangle +(.5,.5);
\fill[red] (2,2.5) rectangle +(.5,.5);
\fill[blue] (2.5,2.5) rectangle +(.5,.5);
\fill[yellow!50!orange] (3,2.5) rectangle +(.5,.5);
\fill[blue] (3.5,2.5) rectangle +(.5,.5);
\fill[blue] (4,2.5) rectangle +(.5,.5);
\fill[yellow!50!orange] (4.5,2.5) rectangle +(.5,.5);
\fill[blue] (5,2.5) rectangle +(.5,.5);
\fill[red] (5.5,2.5) rectangle +(.5,.5);
\fill[yellow!50!orange] (6,2.5) rectangle +(.5,.5);
\fill[yellow!50!orange] (6.5,2.5) rectangle +(.5,.5);
\foreach \x in {1,1.5,2}
{
\fill[yellow!50!orange] (\x,2) rectangle +(.5,.5);
}
\foreach \x in {2.5,3,...,5}
{
\fill[blue] (\x,2) rectangle +(.5,.5);
}
\fill[yellow!50!orange] (5.5,2) rectangle +(.5,.5);
\fill[yellow!50!orange] (6,2) rectangle +(.5,.5);
\fill[yellow!50!orange] (6.5,2) rectangle +(.5,.5);
\begin{scope}[shift={(0,-1)}]
\fill[yellow!50!orange] (1,2.5) rectangle +(.5,.5);
\fill[yellow!50!orange] (1.5,2.5) rectangle +(.5,.5);
\fill[blue] (2,2.5) rectangle +(.5,.5);
\fill[blue] (2.5,2.5) rectangle +(.5,.5);
\fill[blue] (3,2.5) rectangle +(.5,.5);
\fill[blue] (3.5,2.5) rectangle +(.5,.5);
\fill[blue] (4,2.5) rectangle +(.5,.5);
\fill[blue] (4.5,2.5) rectangle +(.5,.5);
\fill[blue] (5,2.5) rectangle +(.5,.5);
\fill[blue] (5.5,2.5) rectangle +(.5,.5);
\fill[yellow!50!orange] (6,2.5) rectangle +(.5,.5);
\fill[yellow!50!orange] (6.5,2.5) rectangle +(.5,.5);
\end{scope}
\foreach \x in {2,2.5,3}
{
\fill[blue] (\x,1) rectangle +(.5,.5);
}
\begin{scope}[shift={(2.5,0)}]
\foreach \x in {2,2.5,3}
{
\fill[blue] (\x,1) rectangle +(.5,.5);
}
\end{scope}
\foreach \x in {1.5,2,2.5}
{
\fill[brown!70!black] (\x,.5) rectangle +(.5,.5);
}
\begin{scope}[shift={(3.5,0)}]
\foreach \x in {1.5,2,2.5}
{
\fill[brown!70!black] (\x,.5) rectangle +(.5,.5);
}
\end{scope}
\begin{scope}[shift={(0,-.5)}]
\foreach \x in {1,1.5,2,2.5}
{
\fill[brown!70!black] (\x,.5) rectangle +(.5,.5);
}
\begin{scope}[shift={(4,0)}]
\foreach \x in {1,1.5,2,2.5}
{
\fill[brown!70!black] (\x,.5) rectangle +(.5,.5);
}
\end{scope}
\end{scope}
\end{tikzpicture}
\end{document}
Here is the output:
And here is the original:
Because you can create simple animations and controls in TikZ (see the Rubiks thread), it is maybe possible to generate a world (e.g. from Mario) , which is refreshed by some buttons.
For the beginn the pong game would be absolutely enough I think, because it is really hard to implement such things especially in TikZ.
As the title says, it would sound great if something like that would exist, so my question is: Does anybody have an idea how to do that? This is not a do-it-for-me – question, rather collecting ideas.
Best Answer
Sliding Puzzle
(Acrobat Reader required;
pdflatex
orlualatex
)This is a non-trivial game with user interaction, based on PDF Layers (OCGs, package
ocgx2
).The picture is split into 15 tiles, stacked upon each other for every cell of the puzzle board, each on an individual PDF Layer. The total number of PDF Layers is thus 4 x 4 x 15 = 240. Their visibility is controlled by JavaScript, triggered by clicking on an array of transparent buttons overlaid on top of the puzzle board.
Original Answer
For this kind of games based on a pixel array using a given set of pre-defined colours, the TikZ-part is straightforward to be implemented; making use of package
ocgx2
, we simply put each pixel colour on an individual PDF Layer.The whole logic of the game can then be implemented in JavaScript. It programmatically controls the visibility of each pixel colour.
As a trivial example, we implement a "game" whose sole purpose is to shuffle the pixel colours by pressing a button and to enjoy the result (Acrobat Reader or Foxit required for viewing):