Start a new topic

Creating a Tic-Tac-Toe Game within Nextion Logic

For March 2017's tutorial, this thread will show how to create a Tic-Tac-Toe within Nextion Logic without the need for an external microprocessor.  As we go through the process of creating this little game, I will deal with a few techniques that may be useful in your projects. 


image


So this is a relatively simple game, so lets get started.

Resources:

  • Four picture resources
  • 1 8x16 font
Components:
  • 10 Picture Components
  • 1 Text Component
  • 1 Hotspot Component
  • 2 Variable Components
  • uses sys0, sys1, sys2
  • uses click command

_b.png
(502 Bytes)
_o.png
(773 Bytes)
_t.png
(935 Bytes)
_x.png
(724 Bytes)

Load the picture resources in the order _b.png, _o.png, _x.png , _t.png


Order of creation (for square sequential .ids)

 - create the 9 pictures first, .ids 1 to 9  left to right, top to bottom.

 - initialize these 9 pictures .w 100, .h 100, .pic 0


In each Touch Press Event, set sys0 equal to component .id value

  sys0=1

  click m0,1


Add in our Hotspot component m0, .w 10 and .h 10

 - this we use for two code holders

 - we tuck this under the title picture when we are finished


Add the Title Picture p9, .w 100, .h 100, .pic 3.

 - this will also reset our game when over, so add the Press Event code

   if(plays.val>=10)

   {

      page 0

   }


Next we need 2 numeric Variables player and plays


Last we need a Text Component t0 for status.

  - who's turn or who won the game (or tied)

  - set component .w 100, place under our Title Picture

  - don't forget to add an 8x16 font.


 On game start, we need a little Page PostInitialize Event code

   if(player.val==0)

   {

      t0.txt="O's turn"

   }else

   {

      t0.txt="X's turn"

   }


And gee, we are about 1/2 way done already.

So what we have done so far is

 - t0 as status and initialized in post initialize

 - Player 0 is O's and Player 1 is X's.

 - plays variable will counts the plays

 - player.val will keep track of whose turn

 - each square pressed the .id is passed via sys0


So the first bit of Hotspot m0 Touch Press Event Code: 

//make play
if(plays.val<10)
{
  if(b[sys0].pic==0)
  {
    if(player.val==0)
    {
      for(sys2=1;sys2<=100;sys2+=3)
      {
        sys1=100-sys2
        xpic b[sys0].x+sys1,b[sys0].y,sys2,b[sys0].h,0,0,player.val+1
        delay=8
      }
    }else
    {
      for(sys2=1;sys2<=100;sys2+=3)
      {
        sys1=100-sys2
        xpic b[sys0].x,b[sys0].y,sys2,b[sys0].h,sys1,0,player.val+1
        delay=8
      }
    }
    b[sys0].pic=player.val+1
    player.val=1-player.val
    plays.val+=1
    click m0,0
    if(sys2==5)
    {
      if(plays.val<9)
      {
        if(player.val==0)
        {
          t0.txt="O's turn"
        }else
        {
          t0.txt="X's turn"
        }
      }else
      {
        plays.val=10
        t0.txt="Tie Game"
      }
    }else
    {
      plays.val=10
      if(sys2==1)
      {
        t0.txt="O Wins"
      }
      if(sys2==2)
      {
        t0.txt="X Wins"
      }
    }
  }
}

 



So let's look at what's going on in this code.

( almost half it's braces, so not as complex as it looks)

line 2 - only if the number of plays less than 10 - game on

  - this prevents moves being made after the game is over

  - option then is to click our Title Picture to start a new game.

line 4 - only if .pic=0, meaning this square hasn't been used yet.

line 6 - if player is O's do lines 8 to 13

  - this animates an O coming in from left side to fill the square

line 14 - player is X's do lines 16 to 21

  - this animates an X coming in from right side to fill the square

line 23 - finalize setting the square to player's picture resource

line 24 - toggle players

line 25 - increment the number of plays

line 26 - here we skip out to see if this is the game winning move

  Skip out with a click to our hotspots Press Release Event code

returning from our check to see if game the was won

line 27 - if sys2 equals 5, the game wasn't won

line 29 - if plays less than 9 - the game is still on

line 31 - if player's turn is O's then 33 sets to O's turn

line 34 - the player's turn is X's and 36 sets to X's turn

line 38 - the game is over but wasn't won

  - 40 sets plays to 10 so title will restart the game

  - 41 sets the status to a Tie Game

line 43 - the game has been won

  - 45 sets plays to 10 so title will restart the game

line 46 checks if O has won

  - 48 sets the status to show O's victory

line 50 checks if X has won

  - 52 sets the status to show X's victory

So now let's see how I checked if the game was won (Probably a bit lazy, but it works).  So each of the eight possible winning lines, horiztonal, vertical or diagonal needs to be checked.  First sys2 is set to 5 as a default so we know whether or not any winning conditions are met if this has changed.


For each possibility I checked that the starting square isn't blank, then that the second square is the same as the first, and that the third is the same as the second (a != 0, a=b=c) and if so sys2 = pic.


So Hotspot m0's Touch Release Event Code is


 

// check for a win
sys2=5
if(b[1].pic>0)
{
  if(b[1].pic==b[2].pic)
  {
    if(b[2].pic==b[3].pic)
    {
      sys2=b[3].pic
    }
  }
}
if(b[4].pic>0)
{
  if(b[4].pic==b[5].pic)
  {
    if(b[5].pic==b[6].pic)
    {
      sys2=b[6].pic
    }
  }
}
if(b[7].pic>0)
{
  if(b[7].pic==b[8].pic)
  {
    if(b[8].pic==b[9].pic)
    {
      sys2=b[9].pic
    }
  }
}
if(b[1].pic>0)
{
  if(b[1].pic==b[4].pic)
  {
    if(b[4].pic==b[7].pic)
    {
      sys2=b[7].pic
    }
  }
}
if(b[2].pic>0)
{
  if(b[2].pic==b[5].pic)
  {
    if(b[5].pic==b[8].pic)
    {
      sys2=b[8].pic
    }
  }
}
if(b[3].pic>0)
{
  if(b[3].pic==b[6].pic)
  {
    if(b[6].pic==b[9].pic)
    {
      sys2=b[9].pic
    }
  }
}
if(b[1].pic>0)
{
  if(b[1].pic==b[5].pic)
  {
    if(b[5].pic==b[9].pic)
    {
      sys2=b[9].pic
    }
  }
}
if(b[3].pic>0)
{
  if(b[3].pic==b[5].pic)
  {
    if(b[5].pic==b[7].pic)
    {
      sys2=b[7].pic
    }
  }
}

Lastly, tuck out hotspot up under our Title picture and we are done.


I hope some of these techniques have been useful for your projects

and enjoy a few round's of Tic-Tac-Toe with a friend.


Patrick

HMI
(96.9 KB)

The question may seem a bit silly coming from someone who has a good sense of the C language, but there goes: In which object is all this code with ifs, elses and for? 0_o

 

And because on the editing screen I can not see any hotspot object m0? 0_oimage


If the thread was followed closely from the beginning through to the end.

All info is step by step. 

Hotspot m0 is one of the Components used in Materials List

Eu encontrei o m0! XD

image

Login or Signup to post a comment