Drench Game

In this guide you will learn how to develop a funny game: Drench. The goal is to clear the board with the lowest possible number of moves, using the different colors.

By referring to this guide, you will be able to:

  • Use sections bound to the data model.
  • Use $dataReady statement.
  • Use the aria templates DOM event.
  • Use foreach statement.


Step 1

Create a file using your favourite editor and call it index.html. This will be the bootstrap for your app.

Save it inside the root of your project (e.g. /guides/drench/).

Step 2

Inside index.html you will have to load the aria templates framework, define the container div and load the template that you will create.

To load the framework:

<script type="text/javascript" src="/aria/ariatemplates-1.2.0.js"></script>
<script type="text/javascript" src="/aria/css/atskin-1.2.0.js"></script>

To define the div container:

<div id="output"></div>
To load the template:
<script type="text/javascript">

Step 3

Create a file and call it Main.tpl. This is the template that will be used to display the Drench user interface.

Save it inside the view folder inside your project (/guides/drench/view/).

Step 4

Define the classpath of your template and that it has a script.
{Template {
    $classpath: "ariadoc.guides.drench.view.Main",
    $hasScript: true
Define inside the main macro the div to display the level counter and the timer, using two different sections bound to the data model:
<h1>Clean the board!</h1>
    <div class="timer">Level
            {section {
                 id: "level",
                 type: "span",
                 bindRefreshTo: [{to:"level",inside:data}]
        <span style="float:right">Time
               {section {
                   id: "timer",
                   type: "span",
                   bindRefreshTo: [{to:"timer",inside:data}]
Define the div to dispaly the board with a section bound to the data model and with two foreach to cover the image with different colors:
<div {on click "startGame"/}>
  {section {
      id: "board",
      type: "div",
      bindRefreshTo: [{to:"moves",inside:data}],
          attributes: {style: "width:"+BOARDSIZE*25+"px"}
     {foreach line inArray data.board}
         <div class="line">
            {foreach cell inArray line}
                        <span data-x="${cell_index}" data-y="${line_index}" {if cell==-1}class="fade"{else/}style="background:${COLORS[cell]}"{/if}>
Define the section to display:
  • the initial message to start the game;
  • the message if the user wins/fails with the Next Level/Restart button;
  • the clickable colors to play;
{section {
     id: "banner",
     type: "div",
     bindRefreshTo: [{to:"moves",inside:data}]
    {if !data.gameStarted}
        <div class="msg">You have <span>${data.moves}</span> moves to clean the board.<br />Pick a place to start</div>
       {if data.cleaned==TOTAL}
           <div class="msg">${win()}</div>
           <div class="inset"><button type="button">Next level</button></div>
       {elseif data.moves==0/}
           <div class="msg">${fail()}</div>
           <div class="inset"><button type="button">Again! Again!</button></div>
           <div class="msg"><span>${data.moves}</span> ${(data.moves>1 ? "moves" : "move")} left</div>
           {for var c=1; c<COLORS.length; c++}
               <span class="color"></span>

Note: To get more info about sections take a look at this page.

Step 5

Create a file and call it MainScript.js.

Save it inside the view folder inside your project (/guides/drench/view/).

Step 6

Define the classpath, the statics to declare the different colors and the constructor:
  $classpath: "ariadoc.guides.drench.view.MainScript",
  $statics : {
      BOARDSIZE: 14,
      MAXMOVES: 30,
      COLORS: [
          "#66CC00", //green
          "#9999FF", // blue
          "#743EF4", // purple
          "#CCFFCC", // cyan
          "#FF0000", // red
          "#FFCC00"  // yellow
  $constructor : function() {
Call the initialization function when the data has been loaded and the module associated to the template has been initialized:
$dataReady : function() { = {};
    this.initGameData(1, 0);

initGameData : function(lvl, time) {
    var b = = [];
    for (var i=0; i<this.BOARDSIZE; i++) {
       b[i] = [];
       for (var j=0; j<this.BOARDSIZE; j++)
       } = false;
       this.$json.setValue(, "level", lvl);
       this.$json.setValue(, "moves", this.MAXMOVES-lvl+1);
       if (time!=undefined) this.$json.setValue(, "timer", time);
         this.interval = setInterval(function(t){t.$json.setValue(,"timer",}, 1000, this);

Note: To check how to use $dataReady take a look at this page.

Define the startGame() function:
startGame : function(e) {
  if ( return;
  if ("x") &&"y")) { ="x")*1; ="y")*1; = true;
Define the newGame() function to re-initializate the game or to increase the level:
newGame : function(e, levelUp) {
   if (levelUp) this.initGameData(;
       else this.initGameData(1, 0);
Define the functions to manage the spreads on the board when the user clicks a color:
spread : function(x, y, c) { = 0;
    this.convert(0, -1, c);
    this.spread2(,, c);
    this.convert(-2, -1, c);
    this.$json.setValue(, "moves",;
spread2 : function(x, y, c) {
    var b =;
    if (b[y][x]==c)  { b[y][x]=-2;; }
    else if (b[y][x]==-1) { b[y][x]=0;; }
    else return;
    if (y-1>=0) this.spread2(x, y-1, c);
    if (x+1<this.BOARDSIZE) this.spread2(x+1, y, c);
    if (y+1=0) this.spread2(x-1, y, c);
clean : function(e, c) {
   this.spread(,, c);
convert : function(from, to, c) {
   var b =;
   for (var i=0; i<this.BOARDSIZE; i++)
       for (var j=0; j<this.BOARDSIZE; j++)
          if (b[i][j]==from) b[i][j]=to;
Define the functions to display the message if the user finish the level or not:
fail : function() {
   return "You failed miserably at level "" after ""s of struggle.";

win : function() {
   return "Wooohooo! You cleaned the board in "+(" moves! :)";

Step 7

Create a file and call it global.css.

Save it inside the view folder inside your project (/guides/drench/view).

Step 8

Give some style to your todo app.

Step 9

That's it! Open the index.html with your favourite browser (e.g. Chrome) and enjoy.