Ressive.Hu / CODE Samples / Windows Phone / Learn XAML / GAME - Color Match


To run this sample application do the following:

- Install application named Learn XAML on your Windows Phone.

- Discover preinstalled sample applications.

- Create a new sample application.

- Copy (overwrite) JavaScript and XAML codes (listed below) into the code and xaml text editor for the new sample application and save.

- In the sample list touch the application name: GAME - Color Match to start.



JavaScript (full code view content)


  var cx = 6; //8;
  var cy = 7; //9;
  var clrCnt = 6; //6;
  var rcW = 58;
  var rcH = 58;
  var rcG = 6;
  var b3D = true;
  var bHis = true;
  var sTodo = "";
  var sHis = "";
  var iVal = 0;

  var xT = 0;
  var yT = 0;
  var xB = 0;
  var yB = 0;

  function preStart()
  {
    host.UI.doc.Children.Clear();
    host.UI.view.Children.Clear();
    host.UI.his.Items.Clear();

    sTodo = "";
    sHis = "";

    b3D = host.UI.chb3D.IsChecked;

    bHis = host.UI.chbShowHis.IsChecked;
    if( bHis )
    {
      host.UI.lblHis.Visibility =
          System.Windows.
            Visibility.Visible;
      host.UI.his.Visibility =
          System.Windows.
            Visibility.Visible;
    }
    else
    {
      host.UI.lblHis.Visibility =
          System.Windows.
            Visibility.Collapsed;
      host.UI.his.Visibility =
          System.Windows.
            Visibility.Collapsed;
    }

    if( host.UI.chbDbg.IsChecked )
    {
      host.UI.lblDoc.Visibility =
          System.Windows.
            Visibility.Visible;
      host.UI.doc.Visibility =
          System.Windows.
            Visibility.Visible;
    }
    else
    {
      host.UI.lblDoc.Visibility =
          System.Windows.
            Visibility.Collapsed;
      host.UI.doc.Visibility =
          System.Windows.
            Visibility.Collapsed;
    }

    if( !getNum(host.UI.tbCx, "width", 1, 9) ) return;
    cx = iVal;

    if( !getNum(host.UI.tbCy, "height", 1, 9) ) return;
    cy = iVal;

    if( !getNum(host.UI.tbCc, "colors", 1, 6) ) return;
    clrCnt = iVal;
  }

  function getNum(tb, sTit, iMin, iMax)
  {
    iVal = 0;
    if( tb.Text == "" )
    {
      alert("Enter " + sTit + "!");
      return false;
    }
    iVal = parseInt(tb.Text);
    if( tb.Text != iVal.toString() )
    {
      alert("Not a number:  " + sTit + "!");
      return false;
    }
    if( (iVal < iMin) || (iVal > iMax) )
    {
      alert("Not in range (" +
        iMin.toString() + " - " +
        iMax.toString() + "):  " + sTit + "!");
      return false;
    }
    return true;
  }

  function fBack(iReason, x, y)
  {
    switch( iReason )
    {

      case 0 : //Cell mouse down
        host.UI.prsBar.Visibility =
          System.Windows.
            Visibility.Visible;
        break;

      case 1 : //Cell mouse up - started
        break;

      case 2 : //Cell mouse up - ended
        host.UI.prsBar.Visibility =
          System.Windows.
            Visibility.Collapsed;
        break;

    }
  }

  function hisRestore(sh)
  {
    if( !bHis ) return;

    sHis = sh.substring(6);
    for( xh = 0; xh < cx; xh++ )
    {
      for( yh = 0; yh < cy; yh++ )
      {
        var iCnum = parseInt(
          sHis.substring( (xh * cy) + yh,
            ((xh * cy) + yh) + 1 ) );

        setCnum(xh, yh, iCnum);
      }
    }

    sTodo = "";
   
    genView(host.UI.view);
  }

  function hisSave()
  {
    if( !bHis ) return;

    sHis = (host.UI.his.Items.Count + 1).toString();
    if( sHis.length == 1 ) sHis = " " + sHis;
    if( sHis.length == 2 ) sHis = " " + sHis;
    while( sHis.length < 6 ) sHis += " ";

    for( xh = 0; xh < cx; xh++ )
    {
      for( yh = 0; yh < cy; yh++ )
      {
        sHis += getCnum(xh, yh);
      }
    }
   
    host.UI.his.Items.Insert(0, sHis);
  }
 
  function getCval(x, y)
  {
    var iCnum = getCnum(x, y);
    return getCvalDir(iCnum);
  }

  function getCvalDir(iCnum)
  {
    switch( iCnum )
    {
      case 1 :
        return System.Windows.Media.
          Colors.Red;
      case 2 :
        return System.Windows.Media.
          Colors.Green;
      case 3 :
        return System.Windows.Media.
          Colors.Blue;
      case 4 :
        return System.Windows.Media.
          Colors.Orange;
      case 5 :
        return System.Windows.Media.
          Colors.Purple;
      case 6 :
        return System.Windows.Media.
          Colors.DarkGray;
      default :
        return System.Windows.Media.
          Colors.White;
    }
  }

  function genView(can)
  {
    can.Children.Clear();
   
    for( x = 0; x < cx; x++)
    {
      for( y = 0; y < cy; y++ )
      {
        var iCnum = getCnum(x, y);

        var ell = new System.Windows.Shapes.
          Ellipse();
        ell.Name = "v_" + sIdx(x) + "_" + sIdx(y);
        ell.Width = rcW;
        ell.Height = rcH;
        ell.Margin = new System.Windows.
          Thickness( rcG + (x * (rcG + rcW)),
            rcG + (y * (rcG + rcH)), 0, 0 );

        if( iCnum > 0 )
        {
          if( b3D )
          {

            var br = new System.Windows.Media.
              RadialGradientBrush();
            br.Center = new System.Windows.
              Point( 0.4, 0.4 );
            br.GradientOrigin = new System.Windows.
              Point( 0.4, 0.4 );

            var gs1 = new System.Windows.Media.
              GradientStop();
            gs1.Offset = 0;
            gs1.Color = System.Windows.Media.
              Colors.White;
            br.GradientStops.Add(gs1);

            var gs2 = new System.Windows.Media.
              GradientStop();
            gs2.Offset = 1;
            gs2.Color = getCvalDir(iCnum);
            br.GradientStops.Add(gs2);

            ell.Fill = br;
          }
          else
          {
            ell.Fill = new System.Windows.Media.
              SolidColorBrush( getCvalDir(iCnum) );
          }
        }
        else
        {
          ell.Fill = host.UI.view.Background;
        }

        addClk(ell);

        can.Children.Add(ell);
      }
    }
  }

  function doPlay(x, y)
  {
    fBack(1, x, y);

    sTodo = "";
   
    if( !doCell( x, y, 0 ) )
    {
      fBack(2, x, y);
      return;
    }

    xT = x;
    yT = y;
    xB = x;
    yB = y;

    while( sTodo != "" )
    {
      var sItm = sTodo.substring(0, 6);
      //alert(sItm);
      var tX = parseInt(sItm.substring(0, 2));
      //alert(tX.toString());
      var tY = parseInt(sItm.substring(3, 5));
      //alert(tY.toString());

      doCell( tX, tY, 1 );

      sTodo = sTodo.substring(6);
      if( sTodo == ";" ) sTodo = "";
      //alert(sTodo);
    }

    doClear();

    genView(host.UI.view);

    if( bHis ) hisSave();

    fBack(2, x, y);
  }

  function doClear()
  {
    for( x = xT; x <= xB; x++ )
    {
      for(;;)
      {
        var bChng = false;
        var iCnum = 0;
        for( y = 0; y < (cy - 1); y++ )
        {
          iCnum = getCnum(x, y);
          if( iCnum > 0 )
          {
            if( getCnum(x, y + 1) == 0 )
            {
              setCnum( x, y + 1, iCnum );
              setCnum( x, y, 0 );
              bChng = true;
            }
          }
        }
        if( !bChng ) break;
      }
    }

    for( y = 0; y <= yB; y++ )
    {
      for(;;)
      {
        var bChng = false;
        var iCnum = 0;
        for( x = 0; x < (cx - 1); x++ )
        {
          iCnum = getCnum(x, y);
          if( iCnum > 0 )
          {
            if( getCnum(x + 1, y) == 0 )
            {
              setCnum( x + 1, y, iCnum );
              setCnum( x, y, 0 );
              bChng = true;
            }
          }
        }
        if( !bChng ) break;
      }
    }
  }

  function doCell(x, y, iMatchDef)
  {

    var iNumCurr = getCnum(x, y);
    var tX = 0;
    var tY = 0;
    var iMatch = iMatchDef;

    if( iNumCurr == 0 ) return false;

    if( x > 0 )
    {
      tX = x - 1;
      tY = y;
      if( iNumCurr == getCnum(tX, tY) )
      {
        sTodo = sTodo + sIdx(tX) + "-" + sIdx(tY) + ";";
        iMatch++;
      }
    }

    if( x < (cx - 1) )
    {
      tX = x + 1;
      tY = y;
      if( iNumCurr == getCnum(tX, tY) )
      {
        sTodo = sTodo + sIdx(tX) + "-" + sIdx(tY) + ";";
        iMatch++;
      }
    }

    if( y > 0 )
    {
      tX = x;
      tY = y - 1;
      if( iNumCurr == getCnum(tX, tY) )
      {
        sTodo = sTodo + sIdx(tX) + "-" + sIdx(tY) + ";";
        iMatch++;
      }
    }

    if( y < (cy - 1) )
    {
      tX = x;
      tY = y + 1;
      if( iNumCurr == getCnum(tX, tY) )
      {
        sTodo = sTodo + sIdx(tX) + "-" + sIdx(tY) + ";";
        iMatch++;
      }
    }

    if( iMatch )
    {
      xT = Math.min(xT, x);
      yT = Math.min(yT, y);
      xB = Math.max(xB, x);
      yB = Math.max(yB, y);

      setCnum( x, y, 0 );
      return true;
    }

    return false;
  }

  function getX(sNm)
  {
    return parseInt(sNm.substring(2,4));
  }

  function getY(sNm)
  {
    return parseInt(sNm.substring(5));
  }

  function doStart()
  {
    preStart();

    sTodo = "";
   
    if( bHis ) host.UI.his.Items.Clear();

    genDoc(host.UI.doc);
    genView(host.UI.view);

    if( bHis ) hisSave();
  }

  function getCnum(x, y)
  {
    var tb = host.UI.doc.FindName(
      "d_" + sIdx(x) + "_" + sIdx(y));
    return parseInt(tb.Text);
  }

  function setCnum(x, y, iN)
  {
    var tb = host.UI.doc.FindName(
      "d_" + sIdx(x) + "_" + sIdx(y));
    tb.Text = iN.toString();
  }
 
  function genDoc(sp)
  {
    sp.Children.Clear();
   
    for( x = 0; x < cx; x++)
    {
      for( y = 0; y < cy; y++ )
      {
        var tb = new System.Windows.Controls.
          TextBlock();
        tb.Name = "d_" + sIdx(x) + "_" + sIdx(y);
        tb.Text = Math.round(1 + ((clrCnt - 1) *
            Math.random())).toString();
        sp.Children.Add(tb);
      }
    }
  }

  function sIdx(i)
  {
    var res = "";
    if( i < 10 ) res = "0";
    res += i.toString();
    return res;
  }
 
  function addClk(ctl)
  {
    ctl.add_MouseLeftButtonDown(function(sender)
    {
      sender.CaptureMouse();

      fBack(0, getX(sender.Name),
        getY(sender.Name));
    });

    ctl.add_MouseLeftButtonUp(function(sender)
    {
      doPlay(getX(sender.Name),
        getY(sender.Name));
    });
  }

  host.add_Loaded(function()
  {
         
    // Button Click event
    host.UI.btnStart.add_Click(function()
    {
      doStart();
    });

    // ListBox SelectionChanged event
    host.UI.his.add_SelectionChanged(function()
    {
      var item = host.UI.his.SelectedItem;
      if( item == null ) return;
      var sh=item.toString();
      if( sh == "" ) return;
      hisRestore(sh);
    });

  });

});


XAML (full xaml view content)

<UserControl xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" x:Class="JavvascriptSnippets.SampleJavascript" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" xmlns:sys="clr-namespace:System;assembly=mscorlib" d:DesignHeight="480" d:DesignWidth="480">
  <UserControl.Resources>
    <sys:String x:Key="_manifest" xml:space="preserve">
      <![CDATA[
      <SnippetManifest>
        <Author>
          <Name>SocialEbola User</Name>
          <WebSite>http://socialebola.wordpress.com</WebSite>
        </Author>
        <EntryPoint>
          <Title>GAME - Color Match</Title>
          <!--<IconUri>http://server/something.png</IconUri> -->
        </EntryPoint>
      </SnippetManifest>
]]>
    </sys:String>
    <!-- The following code will be loaded and executed when the XAML is done loading. -->
  </UserControl.Resources>
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="LEARN XAML (BETA) - APPLICATION (GAME)" Style="{StaticResource PhoneTextNormalStyle}" />
      <TextBlock x:Name="PageTitle" Text="color match" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid x:Name="settings" Grid.Row="0" Margin="-12,0,-12,6">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBox x:Name="tbCx" TextAlignment="Center" Text="6" Grid.Row="0" Grid.Column="0" Margin="-6,-6,-6,-6" InputScope="Digits" />
        <TextBlock x:Name="lblCx" Text="width" Grid.Row="1" Grid.Column="0" Margin="3,0,3,0" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        <TextBox x:Name="tbCy" TextAlignment="Center" Text="7" Grid.Row="0" Grid.Column="1" Margin="-6,-6,-6,-6" InputScope="Digits" />
        <TextBlock x:Name="lblCy" Text="height" Grid.Row="1" Grid.Column="1" Margin="3,0,3,0" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        <TextBox x:Name="tbCc" TextAlignment="Center" Text="6" Grid.Row="0" Grid.Column="2" Margin="-6,-6,-6,-6" InputScope="Digits" />
        <TextBlock x:Name="lblCc" Text="colors" Grid.Row="1" Grid.Column="2" Margin="3,0,3,0" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        <CheckBox x:Name="chb3D" IsChecked="True" Grid.Row="0" Grid.Column="3" Margin="0, -6, -12, -6" />
        <TextBlock x:Name="lbl3D" Text="3D" Grid.Row="1" Grid.Column="3" Margin="3,0,3,0" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        <CheckBox x:Name="chbShowHis" IsChecked="True" Grid.Row="0" Grid.Column="4" Margin="0, -6, -12, -6" />
        <TextBlock x:Name="lblShowHis" Text="history" Grid.Row="1" Grid.Column="4" Margin="3,0,3,0" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        <CheckBox x:Name="chbDbg" IsChecked="False" Grid.Row="0" Grid.Column="5" Margin="0, -6, -12, -6" />
        <TextBlock x:Name="lblDbg" Text="DBG" Grid.Row="1" Grid.Column="5" Margin="3,0,3,0" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        <Button x:Name="btnStart" Grid.Row="0" Grid.Column="6" Content="s" Width="Auto" Margin="-6,-6,-6,-6"></Button>
        <TextBlock x:Name="lblStart" Text="start" Grid.Row="1" Grid.Column="6" Margin="3,0,3,0" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
      </Grid>
      <Grid x:Name="place" Grid.Row="1" Margin="-12, 0, -12, 0">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="lblDoc" Text="DBG" Grid.Row="0" Grid.Column="0" Visibility="Collapsed" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        <StackPanel x:Name="doc" Grid.Row="1" Grid.Column="0" Width="64" Visibility="Collapsed"></StackPanel>
        <TextBlock x:Name="lblHis" Text="history" Grid.Row="0" Grid.Column="1" Visibility="Collapsed" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" />
        <ListBox x:Name="his" Grid.Row="1" Grid.Column="1" Width="64" Visibility="Collapsed" BorderThickness="{StaticResource PhoneBorderThickness}" BorderBrush="{StaticResource PhoneDisabledBrush}" Margin="0,0,0,0" FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
        <TextBlock x:Name="prsBar" Grid.Row="0" Grid.Column="2" Text="...processing..." Visibility="Collapsed" TextAlignment="Center" FontSize="{StaticResource PhoneFontSizeSmall}" Foreground="{StaticResource PhoneAccentBrush}" />
        <Canvas x:Name="view" Grid.Row="1" Grid.Column="2"></Canvas>
      </Grid>
    </Grid>
  </Grid>
</UserControl>




Direct link of this sample: http://ressive.hu/ColorMatchGame.txt



keywords: Ellipse.MouseLeftButtonDown, Ellipse.MouseLeftButtonUp, Math.random, Children.Add, StackPanel.FindName, Math.min, Math.max, RadialGradientBrush, GradientStop


application tested on: NOKIA Lumia 610 | 800 + Windows Phone 7.8
comments, suggestions and error reports are welcome: gyuszi.csaszar@gmail.com


NOTE: On any error or exception Learn XAML will close without a message!






Anno 2008.



StatCounter.com